Skip to content

Commit

Permalink
Add variable label placement notebook
Browse files Browse the repository at this point in the history
  • Loading branch information
giswqs committed Jun 20, 2024
1 parent c769f09 commit 31cef8d
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 14 deletions.
8 changes: 7 additions & 1 deletion docs/maplibre/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,11 +92,17 @@ Initialize a map with pitch and bearing camera options.

[![](https://i.imgur.com/onKRYXz.png)](https://leafmap.org/maplibre/set_pitch_bearing)

## Variable label placement

Use text-variable-anchor to allow high priority labels to shift position to stay on the map.

[![](https://i.imgur.com/4fo0ODF.png)](https://leafmap.org/maplibre/variable_label_placement)

## Variable label placement with offset

Use text-variable-anchor-offset to allow high priority labels to shift position to stay on the map.

[![](https://i.imgur.com/HKfcsoc.png)](https://leafmap.org/maplibre/variable_label_placement)
[![](https://i.imgur.com/HKfcsoc.png)](https://leafmap.org/maplibre/variable_offset_label_placement)

## Add a vector tile source

Expand Down
18 changes: 5 additions & 13 deletions docs/maplibre/variable_label_placement.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
"[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/variable_label_placement.ipynb)\n",
"[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
"\n",
"**Variable label placement with offset**\n",
"**Variable label placement**\n",
"\n",
"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).\n",
"This source code of this example is adapted from the MapLibre GL JS example - [Variable label placement](https://maplibre.org/maplibre-gl-js/docs/examples/variable-label-placement).\n",
"\n",
"Uncomment the following line to install [leafmap](https://leafmap.org) if needed."
]
Expand Down Expand Up @@ -117,16 +117,8 @@
" \"source\": \"places\",\n",
" \"layout\": {\n",
" \"text-field\": [\"get\", \"description\"],\n",
" \"text-variable-anchor-offset\": [\n",
" \"top\",\n",
" [0, 1],\n",
" \"bottom\",\n",
" [0, -2],\n",
" \"left\",\n",
" [1, 0],\n",
" \"right\",\n",
" [-2, 0],\n",
" ],\n",
" \"text-variable-anchor\": [\"top\", \"bottom\", \"left\", \"right\"],\n",
" \"text-radial-offset\": 0.5,\n",
" \"text-justify\": \"auto\",\n",
" \"icon-image\": [\"concat\", [\"get\", \"icon\"], \"_15\"],\n",
" },\n",
Expand All @@ -149,7 +141,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"![](https://i.imgur.com/HKfcsoc.png)"
"![](https://i.imgur.com/4fo0ODF.png)"
]
}
],
Expand Down
177 changes: 177 additions & 0 deletions docs/maplibre/variable_offset_label_placement.ipynb
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"[![image](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://demo.leafmap.org/lab/index.html?path=maplibre/variable_offset_label_placement.ipynb)\n",
"[![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)\n",
"[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
"\n",
"**Variable label placement with offset**\n",
"\n",
"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).\n",
"\n",
"Uncomment the following line to install [leafmap](https://leafmap.org) if needed."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# %pip install \"leafmap[maplibre]\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import os\n",
"import leafmap.maplibregl as leafmap"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"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 set it as an environment variable in your notebook or script as follows:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# os.environ[\"MAPTILER_KEY\"] = \"YOUR_API_KEY\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"MAPTILER_KEY = os.environ.get(\"MAPTILER_KEY\")\n",
"style = f\"https://api.maptiler.com/maps/streets/style.json?key={MAPTILER_KEY}\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"m = leafmap.Map(center=[-77.04, 38.907], zoom=11, style=style)\n",
"\n",
"places = {\n",
" \"type\": \"FeatureCollection\",\n",
" \"features\": [\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"Ford's Theater\", \"icon\": \"theatre\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.038659, 38.931567]},\n",
" },\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"The Gaslight\", \"icon\": \"theatre\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.003168, 38.894651]},\n",
" },\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"Horrible Harry's\", \"icon\": \"bar\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.090372, 38.881189]},\n",
" },\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"Bike Party\", \"icon\": \"bicycle\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.052477, 38.943951]},\n",
" },\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"Rockabilly Rockstars\", \"icon\": \"music\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.031706, 38.914581]},\n",
" },\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"District Drum Tribe\", \"icon\": \"music\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.020945, 38.878241]},\n",
" },\n",
" {\n",
" \"type\": \"Feature\",\n",
" \"properties\": {\"description\": \"Motown Memories\", \"icon\": \"music\"},\n",
" \"geometry\": {\"type\": \"Point\", \"coordinates\": [-77.007481, 38.876516]},\n",
" },\n",
" ],\n",
"}\n",
"source = {\"type\": \"geojson\", \"data\": places}\n",
"m.add_source(\"places\", source)\n",
"\n",
"layer = {\n",
" \"id\": \"poi-labels\",\n",
" \"type\": \"symbol\",\n",
" \"source\": \"places\",\n",
" \"layout\": {\n",
" \"text-field\": [\"get\", \"description\"],\n",
" \"text-variable-anchor-offset\": [\n",
" \"top\",\n",
" [0, 1],\n",
" \"bottom\",\n",
" [0, -2],\n",
" \"left\",\n",
" [1, 0],\n",
" \"right\",\n",
" [-2, 0],\n",
" ],\n",
" \"text-justify\": \"auto\",\n",
" \"icon-image\": [\"concat\", [\"get\", \"icon\"], \"_15\"],\n",
" },\n",
"}\n",
"m.add_layer(layer)\n",
"m"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"m.rotate_to(bearing=180, options={\"duration\": 10000})"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"![](https://i.imgur.com/HKfcsoc.png)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.11.8"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
1 change: 1 addition & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ nav:
- maplibre/satellite_map.ipynb
- maplibre/set_pitch_bearing.ipynb
- maplibre/variable_label_placement.ipynb
- maplibre/variable_offset_label_placement.ipynb
- maplibre/vector_tile.ipynb
- maplibre/add_video.ipynb
- maplibre/visualize_population_density.ipynb
Expand Down

0 comments on commit 31cef8d

Please sign in to comment.