#!/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/variable_offset_label_placement.ipynb)
# [![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/variable_offset_label_placement.ipynb)
# [![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)
# 
# **Variable label placement with offset**
# 
# This source code of this example is adapted from the MapLibre GL JS example - [Variable label placement with offset](https://maplibre.org/maplibre-gl-js/docs/examples/variable-offset-label-placement/).
# 
# 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.04, 38.907], zoom=11, style="streets")

places = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {"description": "Ford's Theater", "icon": "theatre"},
            "geometry": {"type": "Point", "coordinates": [-77.038659, 38.931567]},
        },
        {
            "type": "Feature",
            "properties": {"description": "The Gaslight", "icon": "theatre"},
            "geometry": {"type": "Point", "coordinates": [-77.003168, 38.894651]},
        },
        {
            "type": "Feature",
            "properties": {"description": "Horrible Harry's", "icon": "bar"},
            "geometry": {"type": "Point", "coordinates": [-77.090372, 38.881189]},
        },
        {
            "type": "Feature",
            "properties": {"description": "Bike Party", "icon": "bicycle"},
            "geometry": {"type": "Point", "coordinates": [-77.052477, 38.943951]},
        },
        {
            "type": "Feature",
            "properties": {"description": "Rockabilly Rockstars", "icon": "music"},
            "geometry": {"type": "Point", "coordinates": [-77.031706, 38.914581]},
        },
        {
            "type": "Feature",
            "properties": {"description": "District Drum Tribe", "icon": "music"},
            "geometry": {"type": "Point", "coordinates": [-77.020945, 38.878241]},
        },
        {
            "type": "Feature",
            "properties": {"description": "Motown Memories", "icon": "music"},
            "geometry": {"type": "Point", "coordinates": [-77.007481, 38.876516]},
        },
    ],
}
source = {"type": "geojson", "data": places}
m.add_source("places", source)

layer = {
    "id": "poi-labels",
    "type": "symbol",
    "source": "places",
    "layout": {
        "text-field": ["get", "description"],
        "text-variable-anchor-offset": [
            "top",
            [0, 1],
            "bottom",
            [0, -2],
            "left",
            [1, 0],
            "right",
            [-2, 0],
        ],
        "text-justify": "auto",
        "icon-image": ["concat", ["get", "icon"], "_15"],
    },
}
m.add_layer(layer)
m


# In[ ]:


m.rotate_to(bearing=180, options={"duration": 10000})


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