:Author: OSGeo-Live :Author: Javier Sanchez :Version: osgeo-live6.5d :License: Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) :Thanks: tutorial from Ivan Sánchez Ortega and Pedro Ferrer Matoses from Spanish OSGeo Chapter :Translator: Luca Delucchi .. image:: ../../images/project_logos/logo-tilemill.png :scale: 75 % :alt: project logo :align: right Guida rapida su TileMill ******************************************************************************** TileMill è uno strumento per creare velocemente e facilmente mappe per il web usando dati propri. È creato sulla potente libreria open-source per vestizione grafica Mapnik ( lo stesso software utilizzato da OpenStreetMap e MapQuest per creare le proprie mappe) e usa CartoCSS come linguaggio per lo stile. Questa guida rapida descrive come: * Aggiunge un layer da una connessione PostGIS * Modificare gli stile * Configurare i suggerimenti * Scrivere una legenda * Esportare mappe .. contents:: Contenuti Creare un progetto ================================================================================ 1. Avviare TileMill e cliccare sul bottone “New project” nella schermata principale. .. image:: ../../images/screenshots/1024x768/tilemill_newproject.png :scale: 70 % .. Writing Tip: For images, use a scale of 50% from a 1024x768 display (preferred) or 70% from a 800x600 display. Images should be stored here: https://svn.osgeo.org/osgeo/livedvd/gisvm/trunk/doc/images/screenshots/1024x768/ ******************************************************************************** 2- Inserire i seguenti dati nel form, e cliccare “Add”: .. image:: ../../images/screenshots/1024x768/tilemill_projectinfo.png :scale: 70 % **Filename:** tilemill_quickstart **Name:** TileMill Quickstart OSGeo Live **Description:** Quickstart from OSGeo Live **Default Data:** Leave selected 3. Cliccare sul nuovo progetto per aprirlo. Il progetto contiene un layer predefinito chiamato #countries con un esempio di stile con codice CartoCSS. Aggiungere un nuovo layer al progetto ================================================================================ È possibile aggiungere nuovi layer da File, SQLite o PostGIS. Si vuole aggiungere layers da dati OSM salvati in PostGIS. In questo tutorial si assume che si conoscano già le tabelle, i campi e i tipi dei dati che si vogliono rappresentare nella mappa. È possibile fare ciò analizzando precedentemente o interrogando direttamente PostGIS usando pgAdminIII, o con gli strumenti di ogni desktop GIS con la connessione PostGIS, come QGIS o Open Jump. 1. Ora si aggiungerà un layer da dati PostGis. Primo, si clicchi sul bottone layer ( |LAYER|) e premere sul bottone '+ Add layer'. Nel form 'Add layer', per prima cosa si seleziona la tipologia dei dati, PostGIS: .. |LAYER| image:: ../../images/screenshots/1024x768/tilemill_layerbtn.png .. image:: ../../images/screenshots/1024x768/tilemill_addpostgis.png :scale: 70 % 2. Aggiungere il layer strade da PostGIS, inseriti i seguenti dati, e cliccare su 'Save & Style': **ID:** osm_roads **Class:** osmroads **Connection:** host=localhost port=5432 user=user password=user dbname=osm_local **Table or subquery:** planet_osm_roads **Unique key field:** osm_id **Geometry field:** way **SRS:** Select WGS84 3. Aggiungere un layer di linee da PostGIS, inseriti i seguenti dati, e cliccare su 'Save & Style': **ID:** osm_line **Class:** osmline **Connection:** host=localhost port=5432 user=user password=user dbname=osm_local **Table or subquery:** planet_osm_line **Unique key field:** osm_id **Geometry field:** way **SRS:** Select WGS84 4. Aggiungere un layer puntuale da PostGIS, inseriti i seguenti dati, e cliccare su 'Save & Style': **ID:** osm_points **Class:** osmpoints **Connection:** host=localhost port=5432 user=user password=user dbname=osm_local **Table or subquery:** (select osm_id, amenity, way from planet_osm_point where amenity is not null) AS amen **Unique key field:** osm_id **Geometry field:** way **SRS:** Select WGS84 Nel layer osm_points si stanno importando un sottoinsieme di punti della tabella planet_osm_point nel set di dati osm_local, considerando solo quei punti che non hanno un valore amenity non nullo. Impostare la visualizzazione predefinita per la proiezione ================================================================================ Al fine di impostare i valori predefiniti per l'area di lavoro, si clicchi il bottone |TOOLS|. Ora è possibile centrare l'area di lavoro, e impostare il punto centrale. È anche possibile digitare i valori del centro e i del perimetro direttamente nel form. .. |TOOLS| image:: ../../images/screenshots/1024x768/tilemill_confbtn.png .. image:: ../../images/screenshots/1024x768/tilemill_project_settings.png :scale: 70 % Impostare lo stile dei dati ================================================================================ TileMill usa un linguaggio chiamato CartoCSS per determinare lo stile di una mappa. Colori, dimensioni, e forme possono essere tutte manipolate applicando loro i relativi paramentri di CartoCS nel pannello dello stile a destra della mappa. Leggere il manuale di CartoCSS per una introduzione dettagliate al linguaggio. Quando un nuovo layer PostGIS è stato importato usando il bottone “Save&Style”, vengono automaticamente aggiunti diversi paramentri dello stile al foglio delli stili e dargli un valore iniziale: 1. #osm_point Questo è il layer a cui è associato lo stile. 2. marker-width Questo determina la dimensione del marker, in pixels. È possibile provare a cambiarlo digitando numeri diversi. 3. marker-fill Questo è il colore interno del marker. Ci sono due metodi per cambiare i valori del colore. È possibile sia digitare un nuovo valore, o si può usare the color swatches at the bottom of the CartoCSS panel 4. marker-line-color Questo è il colore del bordo del marker. 5.- marker-allow-overlap Questo permette ai markers di essere sovrapposti l'un l'altro. Se non è specificato o impostato a falso, potenzialmente i markers sovrapposti non saranno visualizzati. Qualsiasi di questi valori possono essere cambiati e visualizzati dopo aver salvato il progetto. Stile condizionali ================================================================================ Gli stili condizionali di CartoCSS permettono di cambiare l'aspetto degli elementi nella mappa, basandosi sugli attributi dei dati. Qui verranno cambiati osm_points e osm_roads, al fini di evidenziare alcuni tipi di elementi, dati alcuni valori. Si applicheranno differenti stili ai punti a secondo di quello che loro rappresentano 'post_box', 'pub' o 'bicyle_parking', siccome già conosciamo che questi valori si trovano nel campo 'amenity' della tabella. Si definirà uno stile differente alle linee che rappresentano 'cycleway', siccome conosciamo che 'cycleway' è un valore del campo 'highway' della tabella. Questo è il nostro codice dopo aver cambiato alcuni i valori di alcuni stili e codificando alcuni stili condizionali: :: Map { background-color: #b8dee6; } #countries { ::outline { line-color: #8b9091; line-width: 2; line-join: round; } polygon-fill: #fff; } #osm_roads { line-width:1; line-color:#8b9091; //168 } #osm_line { line-width:1; line-color:#8b9091; [highway='cycleway'] { //red line-color:#ff2525; //ff2525 line-width:3; } } #osm_poinst { marker-width:6; marker-fill:#8b9091; //f45 marker-line-color:#813; marker-allow-overlap:true; [amenity='post_box'] { //orange marker-fill:#ffc425; marker-line-color:#a67c0c; } [amenity='pub'] { //green marker-fill:#39e639; marker-line-color:#008500; } [amenity='bicycle_parking'] { //blue marker-fill:#85c5d3; marker-line-color:#180773; } } .. image:: ../../images/screenshots/1024x768/tilemill_customizedview.png :scale: 70 % Tooltips ================================================================================ Tooltips vi permettono di rendere le mappa interattive con contenuto dinamico che appare quando un utente passa sopra o clicca sulla mappa. Questi possono contenere HTML e sono utili per revealing dati, immagini, e altri contenuti addizionali. 1. Aprire il pannello Templates cliccando sul bottone pointer in basso a sinistra ( |POINTER| ) .. |POINTER| image:: ../../images/screenshots/1024x768/tilemill_pointerbtn.png 2. Cliccare sul pannello “Teaser”. Il contenuto Teaser appare quando si passa con il mouse su un elemento e il contenuto completo appare quando si clicca su un elemento. È possibile utilizzare il campo Posizione per definire un URL da caricare quando si fa clic un elemento. 3. Selezionare il layer 'osm_point' da usarlo per l'interazione. TileMill supporta solo un layer interattivo alla volta. 4. I campi dei dati per il layer sono visualizzati wrapped in curly Mustache tags. Questi tags saranno rimpiazzati dai dati quando si interagirà con la mappa. Trovare i campi che si vuole usare. 5. Scrivere il template usando i tags Mustache. Incollare il codice che segue nel campo Teaser e usare l'anteprima per essere sicure che funzioni bene: :: Type:{{{amenity}}}
Name:{{{name}}} .. image:: ../../images/screenshots/1024x768/tilemill_teaser_frm.png :scale: 70 % 6. Cliccare “Save” per salvare le impostazioni e ricaricare la mappa. Chiudere il pannello cliccando sul bottone chiudi (X) o premendo il tasto ESC. Muovere il mouse sopra alcuni punti per vedere il tooltips. .. image:: ../../images/screenshots/1024x768/tilemill_tooltip.png :scale: 70 % Legende ================================================================================ Una legenda è permanentemente sulla mappa ed è utili per visualizzare titoli, descrizioni, è chiavi per cosa sarà mappato. Può essere stilizzata usando HTML, o semplicemente contenere un'immagine. Aggiungere una legenda che descrive il tema della mappa. #. Aprire il pannello Templates cliccando sul bottone pointer in basso a sinistra #. Il pannello Legenda è ora aperto di default. #. Inserire il testo text/html nel campo Legend: :: OSGeo Live TileMill Quick Start
Points locate different amenities in Nottingham
.. image:: ../../images/screenshots/1024x768/tilemill_legend_text.png :scale: 70 % #. Cliccare salva e chiudere il pannello. Ora vedrete la legenda nell'angolo in basso a destra della mappa. .. image:: ../../images/screenshots/1024x768/tilemill_legend.png :scale: 70 % Esportare la mappa ================================================================================ TileMill può esportare mappe nei formati MBTiles, PNG, PDF, SVG, o Mapnik XML. Una liste a panoramica completa si può trovare nella `documentazione di esportazione `_ Se si vuole esportare in MBTiles: #. Cliccare il bottone “Export”. Un menu a tendina apparirà. #. Cliccare “MBTiles”. La finestra si sposterò allo strumento di esportazione. #. Sceglire un “Filename”“. Di default verrà proposto il nome del progetto. #. Selezionare i livelli di Zoom. levels. Impostare lo zoom più distante a 1 trascinando l'estremità sinistra verso destra. Impostare lo zoom più vicino a 6 trascinando l'estremità destra verso sinistra. #. Selezionare il “Center” della mappa. Questo determina il centro iniziale e il livello di zoom della mappa quando è caricato all'inizio. È possibile inserire manualmente questi valori o cliccare un punto nell'anteprima della mappa. Fare zoom al livello tre e cliccare il centro degli Stati Uniti. #. Selezionare la mappa “Bounds”. Questa è l'area della mappa da esportare. Di default l'intero mondo è selezionato. Se la mappa occupa una regione più piccola del globo, è possibile salvare tempo e spazione ritagliando all'area utile. Questo può essere fatto manualmente inserendo i valori nei campi Bounds, o premendo il tasto SHIFT e cliccando e spostandosi nella map. Lasciare il valore di default. #. cliccare “Export”. #. Quando il processo di esportazione è completo, la barra di progresso sarà rimpiazzata dal bottone Save. Questo salverà un copia del file localmente in una directory selezionata .. image:: ../../images/screenshots/1024x768/tilemill_viewexports.png :scale: 70 % È possibile ritornare alla pagina di benvenuto in qualsiasi momemto selezionando :menuselection:`Help --> Welcome` dalla barra del menu. Cosa da provare ================================================================================ Qui alcune sfide addizionale da provare: #. Prova a cambiare gli stili fissi o condizionali da te #. Prova a importare dati da altre sorgenti, come file .CSV o sqlite ( È possibile seguire `la documentazione on-line di TileMill `_) Ed ora? ================================================================================ .. Writing tip Provide links to further tutorials and other documentation. Questo è solo il primo step sulla strada per l'utilizzo di TileMill. C'è molto altro materaile (e possibilità) lasciate da scoprire a te: * Ottenere maggiore aiuto dall'ambiente, cliccare sul bottone help (|HELP|) .. |HELP| image:: ../../images/screenshots/1024x768/tilemill_helpbtn.png * Imparare di più sul linguaggio cartocss nella `Documentazione delle API `_ * Imparare come eseguire `TileMill con un servizio di Ubuntu `_