CODEWITHSUNDEEP
angulartypescriptleafletngx-leafletstamen-maps
Abrar Hossain
Abrar Hossain

Reputation: 2702

How do I change the tile layer from OpenStreetMap to Stamen

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?

Upvotes: 0

Views: 1429

Answers (1)

kboul
kboul

Reputation: 14570

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.

Upvotes: 1

Related Questions