Categories
video

QGIS 3.14 how to make a webmap with qgis2web and base map HOT OpenStreetMap

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.

Content not available.
Please allow cookies by clicking Accept on the banner

Categories
Map tutorial video

LeafletJS Map tutorial with Google Tag Manager and its events

LeafletJS Map tutorial with Google Tag Manager and its events https://youtu.be/TeXzuPxXrWg #leafletjs #tutorial #webdev #google #tagmanager #googletagmanager #gistipter #gistips

Content not available.
Please allow cookies by clicking Accept on the banner

Categories
WebGIS

WP Maps tutorial – Come inserire la prima mappa nel template di una pagina di WordPress

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.

Categories
WebGIS

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!

Mappa Video

Download video & GIF senza brand:

Riferimenti:

Categories
tutorial

Modificare con QGis le geometrie di una mappa online con PostGIS e LeafletJS

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.

Categories
WebGIS

Add Google Maps to LeafletJS 1.x (webgis043a)

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]

Categories
Eventi GISTIPS

Dal Geoportale alla mappa web mediante LeafletJS – FOSS4G-IT 2017

FOSS4G-IT 2017Mercoledì 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

Programma completo

FOSS4G-IT 2017


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”.

Categories
Maps WebGIS

Io odio i WebGIS, ma adoro i wallpaper con le mappe

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.

YouTube video tutorial

Riferimenti utili

Categories
WebGIS

Tutorial: LeafletJS e Material Design sui controlli

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.


Content not available.
Please allow cookies by clicking Accept on the banner

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:

LeafletJS e Material Design sui controlli

Adesso dobbiamo aggiungere qualche proprietà per fare si che i bottoni si allineano bene a sinistra

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);
}
LeafletJS e Material Design sui controlli

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]

Categories
WebGIS

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.

Content not available.
Please allow cookies by clicking Accept on the banner


[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]