#!/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/fallback_image.ipynb)
# [![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/fallback_image.ipynb)
# [![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)
# 
# **Use a fallback image**
# 
# This source code of this example is adapted from the MapLibre GL JS example - [Use a fallback image](https://maplibre.org/maplibre-gl-js/docs/examples/fallback-image/).
# 
# Uncomment the following line to install [leafmap](https://leafmap.org) if needed.

# In[ ]:


# %pip install "leafmap[maplibre]"


# In[ ]:


import leafmap.maplibregl as leafmap


# To run this notebook, you will need an [API key](https://docs.maptiler.com/cloud/api/authentication-key/) from [MapTiler](https://www.maptiler.com/cloud/). Once you have the API key, you can uncomment the following code block and replace `YOUR_API_KEY` with your actual API key. Then, run the code block code to set the API key as an environment variable.

# In[ ]:


# import os
# os.environ["MAPTILER_KEY"] = "YOUR_API_KEY"


# In[ ]:


m = leafmap.Map(center=[-77, 38.75], zoom=5, style="streets")
source = {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586],
                },
                "properties": {"title": "Washington DC", "icon": "monument"},
            },
            {
                "type": "Feature",
                "geometry": {"type": "Point", "coordinates": [-79.9959, 40.4406]},
                "properties": {"title": "Pittsburgh", "icon": "bridges"},
            },
            {
                "type": "Feature",
                "geometry": {"type": "Point", "coordinates": [-76.2859, 36.8508]},
                "properties": {"title": "Norfolk", "icon": "harbor"},
            },
        ],
    },
}
m.add_source("points", source)
layer = {
    "id": "points",
    "type": "symbol",
    "source": "points",
    "layout": {
        "icon-image": [
            "coalesce",
            ["image", ["concat", ["get", "icon"], "_15"]],
            ["image", "marker_15"],
        ],
        "text-field": ["get", "title"],
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top",
    },
}
m.add_layer(layer)
m


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