#!/usr/bin/env python
# coding: utf-8

# [![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=maplibre/map_tiles.ipynb)
# [![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/map_tiles.ipynb)
# [![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)
# 
# **Add a raster tile source**
# 
# This source code of this example is adapted from the MapLibre GL JS example - [Add a raster tile source](https://maplibre.org/maplibre-gl-js/docs/examples/map-tiles/).
# 
# Uncomment the following line to install [leafmap](https://leafmap.org) if needed.

# In[ ]:


# %pip install "leafmap[maplibre]"


# In[ ]:


import os
import leafmap.maplibregl as leafmap


# In[ ]:


style = {
    "version": 8,
    "sources": {
        "raster-tiles": {
            "type": "raster",
            "tiles": [
                "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg"
            ],
            "tileSize": 256,
            "attribution": 'Map tiles by <a target="_blank" href="https://stamen.com">Stamen Design</a>; Hosting by <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>. Data &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors',
        }
    },
    "layers": [
        {
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22,
        }
    ],
}


# In[ ]:


m = leafmap.Map(center=[-74.5, 40], zoom=2, style=style)
m


# ![](https://i.imgur.com/GX7reQP.png)