Как изменить базовую карту/тип карты с помощью пользовательского элемента управления в Leaflet? ⇐ Jquery

[Anonymous]

Я создал собственную панель, как показано ниже:

Это мой HTML-код:

Код: Выделить всё

[list]
[*]


OSM Map

[*]


Google Street

[*]


Google Traffic

[*]


Satellite Map

[*]


Hybrid Map

[/list]

а это мой JS-код:

Код: Выделить всё

var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});

var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});

var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});

var googleTraffic = L.tileLayer('https://{s}.google.com/vt/lyrs=m@221097413,traffic&x={x}&y={y}&z={z}', {
maxZoom: 20,
minZoom: 2,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
});

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '© OpenStreetMap'
});

var map = L.map('map', {
center: [-5.368029,112.005921],
zoom: 5,
layers: [osm]
});

var baseMaps = {
"OSM": osm,
"Street": googleStreets,
"Traffic": googleTraffic,
"Satellite": googleSat,
"Hybrid": googleHybrid
};

var overlays =  {//add any overlays here
};

//var layerControl = L.control.layers(baseMaps,overlays,{position:'bottomleft'}).addTo(map);  Hidden default control

$('input[type=radio][name=radiomaptype]').on('change', function() {
switch ($(this).val()) {
case 'osm':
baseMaps["OSM"].addTo(map);
break;
case 'streetmap':
baseMaps["Street"].addTo(map);
break;
case 'trafficmap':
baseMaps["Traffic"].addTo(map);
break;
case 'satellitemap':
baseMaps["Satellite"].addTo(map);
break;
case 'hybridmap':
baseMaps["Hybrid"].addTo(map);
break;

default:
baseMaps["OSM"].addTo(map);
break;
}
});

У меня есть 2 проблемы:

• Пример: последняя выбранная позиция на радио «Спутниковая карта», когда я перезагружаю страницу, тип карты меняется на тип по умолчанию, который является «OSM», но на радио все еще выбран / отмечен «Спутниковая карта», хотя я установил флажок по умолчанию для «OSM» в HTML-код выше.
• При первой загрузке страницы первая попытка изменить тип карты оказывается успешной, но со второй попытки изменение типа карты является успешным. не работает.

Пример:

• Страница открыта.
• Выберите радио «Google Sat». Карта изменится на «Google Sat» — успешно
• Выберите «Гибридное радио Google», и карта изменится на «Google Hybrid» – успешно
• Снова выберите радио «Google Sat», и карта не изменится.

Я все еще изучаю Leaflet и нуждаюсь в помощи.
PS: При использовании элемента управления слоями по умолчанию из Leaflet я не столкнулся с проблемами.< /p>



Подробнее здесь: https://stackoverflow.com/questions/790 ... in-leaflet