Categories
GIS tutorial WebGIS

LeafletJS: 4 minitutorial per arricchire il design della tua webapp o webmap

Mini tutorial:
1) pin and popup base https://codepen.io/pjhooker/pen/ROrajv
2) pin base and popup mod1 https://codepen.io/pjhooker/pen/gyrLyN
3) pin base and popup mod2 (creativetim) https://codepen.io/pjhooker/pen/axNpmj
4) pin mod1 and popup mod2 (creativetim) https://codepen.io/pjhooker/pen/ZZWeRd

Approfondimenti:
– Creative TIM: https://demos.creative-tim.com/material-dashboard/examples/dashboard.html
– LeafletJS primo tutorial: https://leafletjs.com/examples/quick-start/
– A simple JSON store for your web or mobile app http://myjson.com
– GEOJSON.io http://geojson.io

Categories
WebGIS

Test nuova webapp per segnalazione pericoli cani

Vai alla mappa

Con questa webapp è possibile inserire le segnalazioni su una mappa. Il focus della webapp è quello di segnalare cani che sono stati male dopo avere fatto una passeggiata e magari mangiato qualcosa, ma anche segnalare smarrimenti, nella speranza poi che il nostro pet venga ritrovato. Infatti nella webapp è possibile modificare la segnalazione in un click da SMARRITO a RITROVATO!

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
WebGIS

15 Creative Maps Made with the New CARTO.js 4.0

Developers need open-source tools to be able to create applications that are both visually stunning and highly functional. CARTO and the Location Intelligence community have long supported the open-source community, contributing to the development of a modern geospatial tech stack that allows all companies to take advantage of their location data.

Today we’re excited to announce a beta release of CARTO.js 4.0.

CARTO.js is an open-source JavaScript library that interacts with different APIs in the CARTO Engine ecosystem. The new version, CARTO.js 4.0, provides additional functionality to extract and filter data within CARTO so that you can create custom UI components, such as widgets, pop-ups, legends, and much more.

If you have used previous versions of CARTO.js, take a look at the Beta Release documentation to learn more about the basic concepts and workflow changes between the old and new library.

The current beta of CARTO.js includes changes to the JavaScript library only. A future enhancement will include functionality for maintaining your core application.

Written by Devon Hopkins on 

Categories
PostGIS QGis tutorial WebGIS

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

Material Dashboard FREE BOOTSTRAP MATERIAL ADMIN

Material Dashboard is a free Material Bootstrap Admin with a fresh, new design inspired by Google’s Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

Example with map

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
WebGIS

Come usare Google Map e LeafletJS con ACF

Riferimenti: http://gistonic-milano.duckdns.org/lu… https://console.developers.google.com/ http://leafletjs.com/examples/quick-s… http://leafletjs.com/examples/quick-s… view-source:http://leafletjs.com/examples/quick-s…

Categories
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” la pagina per togliere div e testi aggiuntivi! Bene, così l’altro giorno mi sono messo a scrivere un po’ di codice e sono riuscito ad ottenere uno strumento comodo e semplice da usare.

L’idea di partenza che mi ha permesso di immaginare l’applicazione è Leaflet-providers preview sviluppata e messa su GitHub da Jan Pieter Waagmeester aka jieter che permette di visualizzare un lungo elenco di mappe base, messe a disposizione dai vari Providers.

Ho spesso usato questa mappa di jieter, sia per trovare delle mappe base adatte per le mie web map, sia per fare degli screenshoots.

webapp/wallmapper

Ho basato l’applicazione che vi mostro in questo articolo sulla libreria LeafletJS e ho utilizzato il linguaggio jQuery, per interagire con la pagina web in base agli input degli utenti. Le principali funzioni sono le seguenti:

  1. è possibile scegliere la mappa di base tra molti esempi
    in alto a sinistra, cliccando su “more” apparirà un elenco dei layer disponibili
  2. in questo elenco è sviluppato con la libreria DataTableJS ed è possibile fare una ricerca per titolo del tile, estensione e tag
  3. a destra c’è un pannello di controllo, dove dei bottoni permettono di abilitare o disabilitare delle opzioni
  4. visto che l’applicazione è fatta per fare screenshoots, in questo pannello di controllo, si possono disabilitare il box dei crediti, così si ha solo la mappa a tutto schermo
  5. le stelline, che si possono spegnere, rappresentano tutti gli screenshots, fatti dagli utenti e cliccando su una stella, è possibile sapere le coordinate, lo zoom e il layer che è stato salvato da qualche utente
  6. ci sono altre quattro opzioni attivabili, ovvero dei layer aggiuntivi da integrare alla mappa di base scelta
  7. si può accendre la heat map dei percorsi registrati con Strava
  8. si può accendere in trasparenza il rilievo del terreno
  9. infine due layer “admin” per vedere i confini amministrativi e/o le etichette, per quelle basemap dove non è chiaro o assente questa informazione

L’idea di questa mappa è sia quella di avere un elenco di mappe base fruibili, che già è possibile avere con Leaflet-providers preview, sia rendere un servizio di conoscenza e di report.

Se un layer non viene caricato, magari perchè la fonte è obsoleta, è possibile segnalarlo, tramite un semplice form.

La parte che riguarda i social network è attualmente in sviluppo, perchè verrà creato un post sul mio account Twitter, che segnala ogni “Screenshot taked” in modo anonimo.

I pulsanti Tokyo, Londra, New York e Mt. Everest, servono per dirigersi in un click per vedere come sono rappresentate sulla mappa questi luoghi “famosi”. Interessante vedere il Mt. Everest con il rilievo DEM.

Un Ester Egg: se ispezionate la pagina e aprite la console di LOG, è possible vedere in ordine cronologico, tutti gli “Screenshot taked” ed inoltre se inserite:

wallmapper/?lat=-25.7603&lng=-52.4268

con le coordinate, è possibile ottenere un permalink, facile da condividere.

OpenSource

Su GitHub ho condiviso i file di questa applicazione, ma è necessaria anche una breve spiegazione. Il link è il seguente github.com/pjhooker/basemaps e troverete:

  • gistips_bassemaps.js > array 1 con la lista dei layer disponibili con descrizione e url
  • gistips_bassemaps_list.js > array2 con solo la lista dei layer disponibili
  • walmapper > la mappa sviluppata con LeafletJS, jQuery e PHP

In questo video tutorial vi mostro il funzionamento, che in pochi minuti, vi permette di avere uno wallpaper fullHD, con tante mappe da scegliere.