In this tutorial I used the new version of QGIS 3.14 – I noticed that the qgis2web function for choosing the base map has disappeared. I tried to load one with QuickMapServices, I chose HOT OpenStreetMap and the export worked well.
Tag: LeafletJS
LeafletJS Map tutorial with Google Tag Manager and its events https://youtu.be/TeXzuPxXrWg #leafletjs #tutorial #webdev #google #tagmanager #googletagmanager #gistipter #gistips
In questo prima puntata della serie WP Maps Tutorial, vederete i file necessari per creare un template; intervenendo sul codice, andremo a sostituire questi file del template, con alcuni nostri, semplificati e adatti ad inserire una semplice prima mappa.
- Video completo: http://bit.ly/2IsI9jz (GDrive folder – è richiesto l’accesso)
- Risorsa: http://bit.ly/2InCNGr (GDrive folder – è richiesto l’accesso)
- Plugin
- Custom Post Type UI di WebDevStudios https://it.wordpress.org/plugins/custom-post-type-ui/
- Advanced Custom Fields di Elliot Condon https://it.wordpress.org/plugins/advanced-custom-fields/
Un biglietto di Natale a passo con i tempi
Merry Christmas Gistonickers, Gistipster & a tutti quelli che ampliano il loro #target con le #mappe ( le mappe di qualità sono il tuo #kpi ) #xmas2017🎄
Quest’anno col gruppo GIStonic tra le varie mappe & dati abbiamo analizzato gli archivi relativi al programmato del Trasporto Pubblico Locale sono scaricabili nel formato GTFS. E’ ancora presto per creare un’applicazione simile a Moovit, ma in questo biglietto i markers arancioni si muovono proprio sulle linee di trasporto (Bus, Metro, Tram …).
Un po’ è stato seguita l’idea del Plugin Time Manager di QGis ed in particolare il tutorial di Anita Graser e la spiegazione pratica di Massimiliano Moraca, ma poi la scelta è andata su LeafletJS e questo è l’ottimo risultato!
Download video & GIF senza brand:
Riferimenti:
Questa soluzione ci permette di aprire con QGis i dati cartografici pubblicati su una mappa web, pubblicata ad esempio con LeafletJS. Sto usando un sistema operativo Windows 10 e mediante il software PuTTY, creo un tunnel ssh alla porta 5432 di un server con PostGIS. La modifica dei dati quindi è possibile farla con il potente software QGis, che legge nativamente la connessione con un database Postgres; in questo i modo i dati, estratti direttamente dal database in formato GeoJson, vengono visualizzati subito sulla mappa web.
La nuova versione della libreria LeafletJS, la 1.0.x ha introdotto dei cambiamenti di funzionalità che a volte sono incompatibili con i plugin sviluppati per le versioni 0.7
Il plugin che permette di caricare le mappe di Google, è vittima di questo cambiamento. Quasi scontato che qualche sviluppatore, ha subito pensato ha risolvere il problema, producendo una versione compatibile, il suo nome è Ivan Sanchez che ha messo a punto Leaflet.GridLayer.GoogleMutant … ecco come funziona!
[buttonyoutube]https://goo.gl/XyxHmm[/buttonyoutube]
FOSS4G-IT 2017: Mercoledì 8 febbraio si terranno 15 workshop, su 7 aule in parallelo, 14 presso il Dipartimento di Architettura e Design (DAD) ed 1, che impegna tutta la giornata, presso il Dipartimento di Ingegneria Civile, Chimica e Ambientale (DICCA).
- Programma completo
- WORKSHOP: Dal Geoportale alla mappa web mediante LeafletJS
- Aula 4 Architettura dalle 09:00 alle 13:00
LeafletJS, la libreria Javascript per pubblicare mappe sul web, ha raggiunto un livello di sviluppo tale da adattarsi ad ogni esigenza. Trovare i dati, gestirli con QGis, imagazzinarli in un DB Postgres e da questo estrarre i file geoJson con query dinamiche tramite il PHP, significa ottimizzare il processo per la visualizzazione dei dati.
Nel workshop il docente farà una scaletta scelta opportunamente dal suo canale di Youtube
- Docenti: Piergiorgio Roveda
- Richieste: PC personale e VM Osgeo live
Abbiamo il piacere di comunicare che il prossimo convegno italiano su Software e Dati Geografici Free e Open Source “FOSS4G-IT 2017” si terrà a Genova da mercoledì 8 a sabato 11 febbraio 2017. Per il primo anno tale convegno raccoglie insieme il “XVIII Meeting degli utenti italiani di GRASS e GFOSS”, il “X GFOSS DAY” e “OSMit2017”.
Quante volte avete cercato di salvare una mappa da mettere sullo sfondo del vostro desktop? Io parecchie e mi trovavo sempre a dovere “ispezionare” per togliere <div> e testi aggiuntivi! Bene, allora l’altro giorno mi sono messo a scrivere un po’ di codice e sono riuscito ad ottenere uno strumento comodo e semplice da usare. In questo video tutorial vi mostro il funzionamento, che in pochi minuti, vi permette di avere uno wallpaper fullHD, con tante mappe da scegliere.
Riferimenti utili
- Quasi mi dimenticavo, la mappa: cityplanner.it/webapp/wallmapper
- elenco layer: gistips_bassemaps.js
- parlano di WALLMAPPER: geoobserver.wordpress.com/geotapete…
- Guarda una colezione di screenshoots: plus.google.com/collection/4PG6ME
Una mappa online deve essere semplice e leggibile, ma anche rispettare le regole del web design moderno. Questo è la seconda parte del tutorial “LeafletJS e Material Design” e a prima parte la trovate in questo articolo.
Si parte da: http://codepen.io/pjhooker/pen/VaxyaL da cui si può fare un FORK
Innanzitutto biosogna disabilitare i controlli di default, aggiungendo zoomControl: false
dove è definita L.map
Prima
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
Dopo
var mymap = L.map('mapid',{ zoomControl: false}).setView([51.505, -0.09], 13);
Inserimento NAVBAR
Adesso usiamo le navbar del tema dashboard di bootstrap http://getbootstrap.com/examples/dashboard/ che però si risolve aggiungendo il foglio di stile http://getbootstrap.com/examples/dashboard/dashboard.css
Per avere una navbar si aggiunge questo codice sotto <div id="mapid"></div>
<!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-side navbar-fixed-side-left" role="navigation"> <div class="container"> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <button type="button" class="btn btn-primary btn-sm button-control"></button> </li> </ul> </div> </div> </div>
Adesso abbiamo inserito il primo bottone
Questa nuova barra non si sovrappone subito alla mappa, perchè è necessario inserire nel codice css una nuova porpietà per #mapid
#mapid{ position: absolute; }
e il risultato dovrebbe essere simile a questo:
Il primo codice da inserire permette di dare un riferimento fisso al contenitore
.navbar-fixed-side { position: fixed; }
Il secondo ci permette di allineare i bottoni in modo verticale, invece che orrizontale
.navbar-fixed-side .navbar-nav > li { float: none; }
Il terzo ci permette di togliere il colore del background e lasciare visibili solo i bottoni
.navbar.navbar, .navbar-default.navbar { background-color: rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0.84); }
Aggiunta controlli custom
Adesso possiamo operare sui bottoni. Bisogna infatti definire una funzione ad ogni bottone e in questo esempio facciamo lo zoom in, lo zoom out e il “torna a casa”. Prima di tutto bisogna associare la funzione ai bottoni ad esempio onclick="onClick_zoomIn()"
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm button-control" onclick="onClick_zoomIn()"></button>
e ora andiamo a creare delle funzioni nella parte javascript, seguendo le indicazioni delle API di LeafletJS http://leafletjs.com/reference.html
per lo zoom in
function onClick_zoomIn () { mymap.zoomIn(); }
per lo zoom out
function onClick_zoomOut () { mymap.zoomOut(); }
per ricentrare la mappa alla posizione iniziale, oppure in altre posizioni
function onClick_home () { mymap.setView([51.5, -0.09], 16); }
Ora vediamo di aggiungere 3 pulsanti associando ad ognuna le funzioni appena inserite.
Material design icon
Facendo riferimento alla libreria di icone https://cdn.materialdesignicons.com/1.1.34/, andiamo ad inserire delle icone comprensibili nei bottoni
zoom in: mdi-content-add-circle-outline
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm mdi-content-add-circle-outline button-control" onclick="onClick_zoomIn()"></button>
home: mdi-action-home
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm mdi-action-home button-control" onclick="onClick_zoomIn()"></button>
zoom out: mdi-content-remove-circle-outline
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm mdi-content-remove-circle-outline button-control" onclick="onClick_zoomIn()"></button>
Ecco il risultato finale (se non si vede clicca su “Result”)
[codepen_embed height=”300″ theme_id=”11907″ slug_hash=”LNBaar” default_tab=”html,result” user=”pjhooker”]See the Pen <a href=’http://codepen.io/pjhooker/pen/LNBaar/’>LeafletJS e Material Design sui controlli</a> by PJHooker (<a href=’http://codepen.io/pjhooker’>@pjhooker</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Tutorial: LeafletJS e Material Design
Una mappa online deve essere semplice e leggibile, ma anche rispettare le regole del web design moderno.
In questo tutorial ho provato ad utilizzare CodePen e questo è il link del progetto. Mentre tutti i passaggi e i requisiti li puoi trovare qui.
Creare una mappa online con la libreria Javascript chiamata LeafletJS è ormai quasi uno standard, ma se siete stufi dei soliti elementi grafici, vediamo come integrare il moderno Material Design con le nostre mappe.
[wc_button type=”primary” url=”http://www.cityplanner.it/tutorial-leafletjs-material-design-sui-controlli/” title=”Guarda seconda parte” target=”self” position=”float”]C’è anche la seconda parte[/wc_button]