Hoje vamos adicionar alguns mapas base e alguns controles ao nosso mapa. Até agora temos usado o OpenStreetMap como o nosso basemap. Iremos adicionar 2 novas camadas base e também adicionaremos uma atribuição ao mapa para que possamos dar crédito, além de uma barra de escala.
1. Adicionando Basemaps
Os mapas base e seus URLs que queremos adicionar são:
Mapa Nacional topo: https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/WMTS/tile/1.0.0/USGSTopo/default/default028mm/{z}/{y}/{x}.png
Open Topop Map: https://tile.opentopomap.org/{z}/{x}/{y}.png
Primeiro criamos as duas camadas de blocos:
var basetopo = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/WMTS/tile/1.0.0/USGSTopo/default/default028mm/{z}/{y}/{x}.png', {});
var baserelief = L.tileLayer('https://tile.opentopomap.org/{z}/{x}/{y}.png', {});
Poderíamos adicioná-los ao mapa como estão, mas queremos controlar a visibilidade de cada um, permitindo que o usuário escolha qual deles é exibido. Para fazer isso, crie um objeto para manter a descrição e a camada:
var baselayers = {
'Shaded Relief': baserelief,
'National Map topo': basetopo
};
2. Adicionando Controle de Camada
O controle de camada nos permite escolher o que é exibido no mapa. Para criá-lo, passamos o mapa base e as camadas de sobreposição. Isso exige que criemos um objeto para manter a(s) sobreposições e, em seguida, podemos criar o controle:
var overlays = {
'The Trail': thetrail
};
L.control.layers(baselayers, overlays).addTo(map);
Adicionamos apenas um dos mapas base ao mapa antes de criar o controle. O mapa agora tem um controle de camada com um mapa base ativo e outro disponível no controle:
Nós vamos adicionar sobreposições adicionais em posts futuros.
3. O Scalebar
Adicionar uma barra de escala é fácil:
var scale = L.control.scale()
scale.addTo(map)
4. Adicionando Atribuição
Para dar crédito às fontes de dados, adicione a atribuição:
map.attributionControl.addAttribution('National Map Topo');
map.attributionControl.addAttribution('OpenTopoMap');
Isso acrescenta atribuição a qualquer existente, que no início é apenas “Leaflet”.
Isso completa nosso mapa para hoje. Podemos alternar entre camadas base usando o controle e ter a atribuição adequada e uma barra de escala.
5. Código Javascript
var map = L.map(document.getElementById('mapDIV'), {
center: [62.7, -144.0],
zoom: 6
});
// Base maps
var basetopo = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/WMTS/tile/1.0.0/USGSTopo/default/default028mm/{z}/{y}/{x}.png', {});
var baserelief = L.tileLayer('https://tile.opentopomap.org/{z}/{x}/{y}.png', {});
basetopo.addTo(map);
// The trail
var thetrail = L.geoJSON(trail, {
color: '#800000',
weight: 3,
dashArray: '12 8 12',
});
thetrail.bindTooltip('The Valdez-Eagle Trail')
thetrail.addTo(map);
var baselayers = {
'Shaded Relief': baserelief,
'National Map topo': basetopo
};
var overlays = {
'The Trail': thetrail
};
L.control.layers(baselayers, overlays).addTo(map);
// Add scalebar
var scale = L.control.scale()
scale.addTo(map)
// Add attribution
map.attributionControl.addAttribution('National Map Topo');
map.attributionControl.addAttribution('OpenTopoMap');
, cambia el cursor del ratón permitiendo seleccionar en el dibujo los mismos.
