Add Satellite Layer

Try It Out

Use the layers icon at the top right to change between the satelitte view and the colour street map view.

Code

          var lyr_satellite = L.tileLayer(esri_url, {id: 'MapID', maxZoom: 20, tileSize: 512, zoomOffset: -1, attribution: esri_attribution});
          var lyr_streets   = L.tileLayer(mapbox_url, {id: 'mapbox/streets-v11', maxZoom: 28, tileSize: 512, zoomOffset: -1, attribution: mapbox_attribution});
          ...
          var map = L.map('map', {
            center: [54.17747885048963, -6.337641477584839],
            zoom: 18,
            layers: [lyr_satellite, lyr_streets, lg_markers]
          });

          var baseMaps = {
              "Streets": lyr_streets,
              "Satellite": lyr_satellite
          };
          var overlayMaps = {
              "Markers": lg_markers,
          };

          L.control.layers(baseMaps, overlayMaps).addTo(map);
        

View the source of this page to see fully how the map is created. In this example notice:

• We use variables for the URLs and attribution text
• We use 2 layers. The normal street tiles from Mapbox and satelitte tiles from ESRI
• We add the marker as a layer so it can be switched on/off

Next Example Previous