Ejercicio usando Leafletjs

A la découverte de Leaflet (1) - Arnold KOUYAArnold KOUYA

Leafle tes la biblioteca de JS de codigo abierto lider para mapas interactivos compatibles con dispositivos moviles.

A continuación presentaremos un ejemplo realizado de un mapa de la Ciudad de Quito.

Pasos para realizar  el mapa

- Preparar la pagina.
Antes de escribir cualquier código para el mapa, debe realizar los  siguientes pasos de preparación en su pagina.

1) Incluimos el archivo CSS de folleto en la sección principal de su documento.

Ejemplo:

  •  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
2) Incluimos el archivo JS del folleto después del archivo CSS del folleto.

Ejemplo:
  •  <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
3) Colocamos un div elemento con un  determinado lugar id donde desea que este su mapa.

Ejemplo
  • <body>
        <div id="map"></div>
    </body>
4) Nos aseguramos que el contenedor del mapa tenga una altura definida.

Ejemplo
  •  <style>
            #map {
                height: 750px;
            }
        </style>
Ahora estamos listos para inicializar el mapa y hacer algunas cosas interesantes con el.
-Crearemos un mapa de Quito-Ecuador con bonitos mosaicos.
Ejemplo
var map = L.map('map').setView([-0.2346352, -78.5289499], 13);
-Ahora agregaremos una capa de mosaicos.
Ejemplo
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
-Ademas de las capas de mosaicos también podemos agregar diferentes cosas a nuestro mapa entre las cuales están: Polilineas, polígonos,círculos y ventanas emergentes.
- Ahora agregaremos varios marcadores  los cuales representaran a nuestro instituto y a algunos de nuestros compañeros con su respectivo nombre y coordenada
Ejemplo
L.marker([-0.224882, -78.516902]).addTo(map)
        .bindPopup('Instituto Tecnologico "Yavirac')
        .openPopup();

    L.marker([-0.297729, -78.535831]).addTo(map)
        .bindPopup('Erick Damian.')
        .openPopup();

    L.marker([-0.2718950, -78.5677830]).addTo(map)
        .bindPopup('Anthony Santilla.')
        .openPopup();

    L.marker([-0.273612, -78.538286]).addTo(map)
        .bindPopup('Bryan Perez.')
        .openPopup();

    L.marker([-0.298549, -78.526138]).addTo(map)
        .bindPopup('Israel Salazar.')
        .openPopup();

    L.marker([-0.273612, -78.538286]).addTo(map)
        .bindPopup('Andres Andino.')
        .openPopup();

    L.marker([-0.2376814, -78.4803202]).addTo(map)
        .bindPopup('Fernanda Defaz.')
        .openPopup();

    L.marker([-0.281091, -78.551235]).addTo(map)
        .bindPopup('Dustin Joel.')
        .openPopup();
Ahora agregaremos lineas que unan al Instituto Yavirac con la dirección de nuestro compañeros.
-Para esto usaremos una variable donde incluiremos las coordenadas de ambos lugares que queremos unir.
Ejemplo
var linea= L.polyline([
        [-0.297729, -78.535831],
        [-0.224882, -78.516902],
    ]).addTo(map);

    var linea = L.polyline([
        [-0.2718950, -78.5677830],
        [-0.224882, -78.516902],
    ]).addTo(map);
    var linea= L.polyline([
        [-0.2247332, -78.5179488],
        [-0.224882, -78.516902],
    ]).addTo(map);
    var linea= L.polyline([
        [-0.224882, -78.516902],
        [-0.298549, -78.526138],
    ]).addTo(map);

    var linea= L.polyline([
        [-0.273612, -78.538286],
        [-0.224882, -78.516902],
    ]).addTo(map);

    var linea= L.polyline([
        [-0.2376814, -78.4803202],
        [-0.224882, -78.516902],
    ]).addTo(map);

    var linea= L.polyline([
        [-0.281091, -78.551235],
        [-0.224882, -78.516902],
    ]).addTo(map);
-Agregaremos un circulo el cual corresponde a un radio de cada lugar que deseamos tener en nuestro mapa.
Ejemplo
  var circle = L.circle([-0.224882, -78.516902], {
        color: 'black',
        fillColor: '#f50',
        fillOpacity: 0.0,
        radius: 200
    }).addTo(map);


    var circle = L.circle([-0.297729, -78.535831], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);

    var circle = L.circle([-0.2718950, -78.5677830], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);

    var circle = L.circle([-0.273612, -78.538286], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);

    var circle = L.circle([-0.298549, -78.526138], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);
    var circle = L.circle([-0.273612, -78.538286], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);
    var circle = L.circle([-0.2376814, -78.4803202], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);
    var circle = L.circle([-0.281091, -78.551235], {
        color: 'black',
        fillColor: '#f03',
        fillOpacity: 0.2,
        radius: 200
    }).addTo(map);
-Una vez hecho todos estos pasos lograras obtener un mapa muy bien estructurado.
Ejemplo



Comentarios

Publicar un comentario

Entradas populares