Meglio una mappa o una immagine?

Blog

Meglio una mappa o una immagine?

Meglio una mappa o una immagine? >> Stavo leggendo un articolo intitolato Cina, la megalopoli da 110 milioni di abitanti che impressiona il mondo su un noto giornale online (vedi articolo)  e dopo una decine di righe leggo: Pechino è già contornata da sei tangenziali, [...] ma questo settimo sarà lungo 940 chilometri.
Quanti sono 940 km ad esempio lungo un cerchio, come le Tangenziali di Milano?
Ho avuto subito la necessità di andare a disegnare un cerchio con circonferenza di 940 km, perché non mi sono reso subito conto di quanto fosse, visto che i riferimenti sul territorio, mostrati nell'immagine, non erano familiari.

See the Pen rOjvvW by PJHooker (@pjhooker) on CodePen.

Mi soffermo qualche secondo sul risultato e ho pensato: ma perché i blogger non usano le mappe web per rappresentare il loro articolo? Forse nell'ultimo anno, col boom di MapBox, ma nello stesso tempo anche il largo uso (abuso) di Google Maps, l'inserimento delle online map nei blog, è aumentato, ma quello che vorrei sfatare sono questi due punti:
  • inserire una mappa in un articolo, non è solo per webmaster o mappers;
  • per inserire una mappa non serve necessariamente un servizio di terze parti o qualche plugin che spesso fanno troppo per quello che servono;
Adesso vi spiego come inserire una mappa nel vostro articolo, a confronto con l'inserimento di un'immagine.

Come creare e inserire una mappa web

  1. andare su un sito come https://jsfiddle.net o http://codepen.io/
  2. copiare il codice della mappa qui sopra (oppure vai qui) e incollare le le parti in un vostro progetto
  3. modificare le coordinate del centro setView([45.4613,9.1595], lo zoom ...9.1595], 7); le coordinate del marker L.marker([45.4613,9.1595]) , la scritta nel popup .bindPopup(<b>City of Milano, le coordinate del cerchio L.circle([45.4613,9.1595],  e il raggio ... 149681, {
  4. potete arricchire la mappa con quanti punti volete, cerchi, linee e poligoni (vedi tutorial)
  5. infine i siti jsfiddle e codepen nel tasto share vi permettono di integrare con un codice iframe o script, da incollare nel vostro articolo, passando nella modalità editor html che per gli utenti di Wordpress significa passare da Visual a Text
  6. invece di usare codepen, se si dispone di accesso ad un hosting web, è possibile copiare il codice, creare una pagina mymap.html ed incollare il codice, per avere una mappa priva di altri riferimenti come nell'esempio qui sotto (tenete d'occhio l'integrazione del foglio di stile e dello script di LeafletJS meglio visibili in questa mappa)
  7. passate al metodo per inserire l'HTML nel vostro articolo (text) ed includete la mappa con <iframe src=http://miosito/nomefilemappa.html></iframe>

Come creare e inserire una immagine di una mappa

  1. andare su un sito di mappe tipo OpenStreetMap o Google Maps o Bing Maps
  2. catturare la schermata (tenete presente i termini di utilizzo)
  3. aprire un programma di grafica come GIMP o Photoshop, ma anche PowerPoint
  4. cercate di inserire nella posizione interessata un'icona e poi create un cerchio, giocando sulla trasparenza e sui livelli
  5. ovviamente anche qui potete sbizzarrirvi con forme e fumetti
  6. salvate l'immagine ed esportatela in formato jpg
  7. caricate nel vostro hosting o in servizi tipo Flickr o altri per archiviare le vostre immagini e pubblicarli
  8. i servizi come Flickr generano anch'essi dei codici da incorporare come codice HTML, se invece avete caricato l'immagine su qualche hosting, passate al metodo per inserire l'HTML nel vostro articolo (text) ed includete la mappa con <img src=http://miosito/nomefilemappa.jpg></iframe>

Conclusioni

Ho notato che una mappa online risulta più lenta (di qualche decimo di secondo) rispetto ad una immagine, ma per fare un test accurato, bisogna vedere come si comportano, mappe grandi e ricche di elementi. In questo caso non è sicuramente un ostacolo. Una mappa web, caricata su un servizio come codepen.io risulta facilmente modificabile, mentre un immagine esportata, comporta spesso una modifica più lunga. Entrare nella logica delle coordinate, è possibile creare riferimenti molto precisi e rappresentare forme che coincidono esattamente col territorio di riferimento, mentre con le immagini e i programmi di grafica, le indicazioni sono imprecise e si tende a dare molto peso alla grafica, piuttosto che al riferimento geografico. Dopo aver letto questo articolo, sarà difficile scegliere di inserire immagini di mappe, al posto di web maps; gli articoli di news e i blog, sempre più spesso raccontano fatti che hanno un riferimento geografico e mi piacerebbe vedere sempre più spesso applicato questo trucchetto.
Mi sono accorto di non avere inserito la caratteristica plus: si può navigare e fare zoom!

Riferimenti