[#HTML] Una de mapas con #Leaflet, #NuGet y #VisualStudio

Hola!

hoy necesitaba hacer 2 cosas rápidas con un mapa y como PowerBI era demasiado, me acordé de un post de Alberto donde hablaba de LeafLet, con un mapa con los colaboradores más activos de GitHub. Pues bien después de ver un poco de ejemplos en línea me pude crear mi mapa en pocos segundos.

Aquí van los pasos para hacer uno de ejemplo con Visual Studio.

– Primero lo de siempre, buscar e instalar el paquete NuGet

ll 01

Detalle, NuGet no es la única opción, aunque tiré por aquí que era más rápido.

– Lo siguiente es acomodar un poco los bundles para que nos queden el js y el css a mano en el proyecto

– Finalmente crear una página HTML con el siguiente código

Si analizamos un poco el código veremos que en solo 10 líneas he creado un map centrado en la parada de metro Santiago Bernabeu, y luego he agregado un marker en el estadio Santiago Bernabeú

ll 02

La verdad que para un uso quick and dirty y con un js de sólo 33Kbs es genial. Además hay bastantes plugins que nos vienen bien para algunas cosas más complejas.

Por cierto, LeafLet utiliza OpenStreetMap, asi que no se olviden de poner la referencia >> http://www.openstreetmap.org/copyright

Saludos @ Madrid

/El Bruno

Homepage: http://leafletjs.com/examples/quick-start.html

Referencias: http://albertoromeu.com/mapa-programadores-mas-influyentes-de-github/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s