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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body>
<h2>El Bruno – LeafLet demo 01</h2>
<div id="map"></div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/leaflet")
<script>
// center map in Santiago Bernabeu Metro Station
var map = L.map('map').setView([40.451631, -3.690366], 18);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Parada de Metro Santiago Bernabeu'
}).addTo(map);
// add marker in the Santiago Bernabeu footbal stadium
L.marker([40.453146, -3.688344]).addTo(map)
.bindPopup('El estadio del Real Madrid<br>Pedazo de cracks.')
.openPopup();
</script>
</body>
</html>

view raw
ElBrunoLealLetdemo
hosted with ❤ by GitHub

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/