#!/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/geojson_layer_in_stack.ipynb)
# [![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/geojson_layer_in_stack.ipynb)
# [![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)
# 
# **Add a new layer below labels**
# 
# This source code of this example is adapted from the MapLibre GL JS example - [Add a new layer below labels](https://maplibre.org/maplibre-gl-js/docs/examples/geojson-layer-in-stack/).
# 
# 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=[-88.137343, 35.137451], zoom=4, style="streets")
source = {
    "type": "geojson",
    "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson",
}
m.add_source("urban-areas", source)
first_symbol_layer = m.find_first_symbol_layer()
layer = {
    "id": "urban-areas-fill",
    "type": "fill",
    "source": "urban-areas",
    "layout": {},
    "paint": {"fill-color": "#f08", "fill-opacity": 0.4},
}
m.add_layer(layer, before_id=first_symbol_layer["id"])
m


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