I'm looking for a solution to create a box to switch between map / satellite layers, like Google Maps has. Could someone help in creating this switch style like Google Maps?

Google Maps example

What I have using Leaflet :

renderBaseLayers: function (callback) {
            var self = this;

            var Esri_WorldImagery = L.tileLayer(
                'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                    attribution: '© Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
                    maxNativeZoom: 19,
                    maxZoom: 25,
                    opacity: 0.8,
                    type: 'satellite'
                });

            var World_Street_Map = L.tileLayer(
                'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                    attribution: '© Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
                    maxNativeZoom: 19,
                    maxZoom: 25,
                    opacity: 1,
                    type: 'street'
                });

            App.map.Markers = {};
            var layers = {
                'Satellite': Esri_WorldImagery.addTo(this.baseMap),
                'Map': World_Street_Map
            };  

            L.control.layers(layers , null, {position: "bottomright"}).addTo(this.baseMap);   

Which is working and showing result like we have in this example.

https://leafletjs.com/examples/layers-control/

Could someone suggest how to create this switch style like in Google Maps?

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.