How to change Base Map/Map Type with custom control in Leaflet?

I created custom bar as image below:

This my HTML code:


<div class="collapse map-custombar-collapse-left" id="listMapBaseControl">
    <ul class="ul-map-custombar-collapse-left">
        <li class="li-map-custombar-collapse-left">
            <div class="form-check">
            <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToOSM" value="osm" checked>
            <label class="form-check-label" for="mapTypeToOSM">OSM Map</label>
            </div>
        </li>
        <li class="li-map-custombar-collapse-left">
            <div class="form-check">
            <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToStreet" value="streetmap">
            <label class="form-check-label" for="mapTypeToStreet">Google Street</label>
            </div>
        </li>
        <li class="li-map-custombar-collapse-left">
            <div class="form-check">
            <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToTraffic" value="trafficmap">
            <label class="form-check-label" for="mapTypeToTraffic">Google Traffic</label>
            </div>
        </li>
        <li class="li-map-custombar-collapse-left">
            <div class="form-check">
            <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToSatellite" value="satellitemap">
            <label class="form-check-label" for="mapTypeToSatellite">Satellite Map</label>
            </div>
        </li>
        <li class="li-map-custombar-collapse-left">
            <div class="form-check">
            <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToHybrid" value="hybridmap">
            <label class="form-check-label" for="mapTypeToHybrid">Hybrid Map</label>
            </div>
        </li>
    </ul>
</div>

<div id="map" style="height:100%;"></div>

and, this my JS Code:


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;
  }
});

I have 2 issues:

Example, last selected position on radio "Satellite Map", when I reload the page, the map type changes to default type which is "OSM", but on the radio still selected/checked is "Satellite Map" although I set default checked is for "OSM" in the HTML code above.
When page first loads, first try to change map type is success, but on the second try, changing map type is not working.

Example:

Page open
Select "Google Sat" radio. Map will change to "Google Sat" – successful
Select "Google Hybrid radio, and map will change to "Google Hybrid" – successful
Select "Google Sat" radio again, and map fail to change.

I’m still learning about Leaflet and need help

PS: If using default layer control from Leaflet, I didn’t encounter the issues.

You need to sign in to view this answers

Related Post