0

I am trying to use Stamen maps with ngx-leaflet. The documentation for integrating leaftlet is here. I am not sure how to integrate it with ngx-leaflet. Is there a way to get a reference to the leaflet, L object in ngx-leaflet? Are there better ways to change the tile from openstreetmap to stamen?

kboul
  • 13,836
  • 5
  • 42
  • 53
Abrar Hossain
  • 2,594
  • 8
  • 29
  • 54
  • 1
    What exactly do you want to achieve? Load a map with stamen tiles instead of open-street map tiles? Is that correct? – kboul Apr 02 '19 at 13:55
  • 1
    This repo shows a bunch of examples of how to integrate external Leaflet plugins with ngx-leaflet. They have examples of how to import the plugin code and how to get the 'L' object: https://github.com/Asymmetrik/ngx-leaflet-tutorial-plugins – reblace Apr 02 '19 at 15:20
  • @kboul yes that's exactly what I was looking for – Abrar Hossain Apr 02 '19 at 16:31

1 Answers1

1

Yo do not need to add an external library just provide the correct tiles url:

options = {
    layers: [
      (L as any).tileLayer(
        "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}",
        {
          attribution:
            'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
          subdomains: "abcd",
          minZoom: 0,
          maxZoom: 20,
          ext: "png"
        }
      )
    ],
    zoom: 5,
    center: L.latLng(46.879966, -121.726909)
  };

Here is a demo with several stamen available tiles in an overlay that you are able to switch.

kboul
  • 13,836
  • 5
  • 42
  • 53