Curso sobre creación y desarrollo de mapas – Parte 6: Varias capas

Continuamos con el curso de mapas. En esta sexta parte estaré mostrando como agregar varias capas en un mapa.
En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_varias_capas.

ejemplo_varias_capas
ejemplo_varias_capas

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificación en el index.html
Modificación en el index.html

Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_varias_capas

Mapa inicial
Mapa inicial

Muestra una capa usando datos OSM.

Un mapa puede contener varias capas o layers. Esas capas pueden ser capas vectorial o raster.

Volvemos a entrar a nuestro editor y nos dirigimos al archivo MapaOSM.js
// Humanitarian layer.
var humanitarian_layer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
    attribution: 'Data \u00a9 ' + 'OpenStreetMap Contributors Tiles \u00a9 HOT'
});


// Mapnik layer.
var mapnik_layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data \u00a9 ' +'OpenStreetMap Contributors '
});

// MapQuest layer.
var mapquest_layer = L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest ',
      subdomains: ['otile1','otile2','otile3','otile4']
});

Agregamos tres layers
Agregamos tres layers

Instanciamos el objeto mapa
// Se instancia el objeto mapa.
mapa = L.map('map-container', {
    center: new L.LatLng(latitud, longitud),
    zoom: zoom,
    layers: [mapnik_layer]
});

Instanciamos el objeto mapa
Instanciamos el objeto mapa

Adjuntamos los tres layers al mapa.
var baseMaps = {
    "Mapnik": mapnik_layer,
    "Humanitarian": humanitarian_layer,
    "MapQuest": mapquest_layer
};

var control = L.control.layers(baseMaps, {}, {
    collapsed: true
});
control.addTo(mapa);

Adjuntamos tres layers al mapa
Adjuntamos tres layers al mapa

Ahora refrescamos el navegador.

Varias capas
Varias capas

Pueden ver que aparece un icono a la derecha. De ahí seleccionan las tres capas.

Capa Humanitarian
Capa Humanitarian
Capa MapQuest
Capa MapQuest

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo varias capas
Código fuente: ejemplo_varias_capas

(Visited 369 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*