Guía rápida para crear mapas con...

js

  • Librería de Javascript para crear mapas
  • Open-source
  • HTML + CSS + Javascript
  • Adaptada para móvil

¿qué es leaflet?

algunos ejemplos...

algunos ejemplos...

algunos ejemplos...

recursos javascript

fundamental...

  
     <html>

        <head>

            <title></title>
	    <style></style>

        </head>

        <body>

            <div id="map"></div>

            <script>
            </script>

        </body>
    
    </html>

html

html

primeros pasos...

  
   <head>
	
       <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
       <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
       <script src="scripts/leaflet.label.js"></script>

   </head>
    

html

<head> <script src="...


    <head>

    	 <style> 

            #map { height: 100%; width: 100%; } 

	 </style>

    </head>

css

estilos del mapa...

js


    <script>
  
      var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {minZoom: 6,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }).addTo(map);

    </script>

cómo dibujar el mapa sobre el lienzo...

  
    <script>

       var map = L.map('map').setView([40.111054, -3.679537], 6 );
       var Esri_WorldStreetMap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Code: Tiles © Esri — Source: Esri, DeLorme'
        }).addTo(map);
    
    </script>

cómo cambiar el mapa base...

js

    

    var marker = L.marker([41.435620, 2.236003]).addTo(map);
        marker.bindPopup("Éste es mi primer <a href=http://leafletjs.com/reference.html#marker target=_blank>marcador</a>
         <br><br><iframe width=300 height=150 src=https://www.youtube.com/embed/W4p3M4Vuy_E frameborder=0 allowfullscreen>   
         </iframe>
         <br><br> Don't stop me know").openPopup();

js

marker...



    var popup = L.popup()
        .setLatLng([38.358237, -5.876802])
        .setContent("Éste es mi primer popup")
        .openOn(map);

js

popup...

js

polyline...





    var polyline = L.polyline([[43.260568, -2.935282], [43.294170, -1.968390], [42.813582, -2.700043], [42.813582, -2.700043], [42.453915, -2.440312], [41.602982, -0.888640]], {color: 'black'}).addTo(map);

  docs, tutoriales

ablanco [at] elconfidencial [dot] com

  más...

Journocoders

En una hora, el objetivo es aprender los conceptos básicos de un lenguaje de programación, que tenga una aplicación práctica en periodismo, para que cada uno pueda avanzar a su ritmo más tarde

dudas, preguntas...