How to use a tile provider in AngularJs Leaflet?

Question

I want to remove the roads from an OSM map which I am displaying with Leaflet in an AngularJs app.

This question says that roads can't be removed, but that one can use a layer provider which has background images with no roads.

It even gives an example in R - but, alas, I don't know R.

Given that I declare my map thus in AngularJs:

const map = L.map('map').setView([51.178882, -1.826215], 16);
        Self.map = map;

        const osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: '&copy; ' + osmUrl,
                maxZoom: 18,
            }).addTo(map);

how do I change the title provider to Esri.WorldShadedRelief? Preferably in such a way that I can toggle tile providers when the user clicks a button.

score 1 · Accepted Answer · answered Jul 21 '20 at 13:22

Just use a different tile provider (check here for Esri.WorldShadedRelief) and use also the example on one of leaflet' s tutorials to change the tile providers using a L.control. Here is how it looks like in vanilla leaflet since I do not know how you have structured your angularjs project but I am pretty sure it can be adjusted easily.

<!DOCTYPE html>
<html>

<head>

  <title>Layers Control Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 600px;
      height: 400px;
    }
  </style>


</head>

<body>

  <div id='map'></div>

  <script>
    var cities = L.layerGroup();

    L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
      L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
      L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
      L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


    var OpenStreetMap_Mapnik = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var Esri_WorldShadedRelief = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}';

    var openstreet = L.tileLayer(OpenStreetMap_Mapnik, {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    var esri = L.tileLayer(Esri_WorldShadedRelief, {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri',
      maxZoom: 13
    });

    var map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 10,
      layers: [openstreet, esri]
    });

    var baseLayers = {
      "OpenStreetMap_Mapnik": openstreet,
      "Esri_WorldShadedRelief": esri
    };

    var overlays = {
      "Cities": cities
    };

    L.control.layers(baseLayers, overlays).addTo(map);
  </script>



</body>

</html>

Great answer, thanks! Looks fantastic.. I think, though, that I will look for a layer provider that will show city names, but not roads. That's not your problem, though. You have perfectly answered the question — Mawg says reinstate Monica, Jul 21 '20 at 17:26

How to use a tile provider in AngularJs Leaflet?

1 Answers1