Skip to content

Commit

Permalink
Add more MapLibre example (#773)
Browse files Browse the repository at this point in the history 
* Add more MapLibre example

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Skip notebook execute

* Add 3D indoor mapping example

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Remove notebook skip execute

* Add 3D terrain example

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Fix typos

* Add MapLibre overview

* Add a marker example

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Add a video example

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
  • Loading branch information
@giswqs @pre-commit-ci
giswqs and pre-commit-ci[bot] committed Jun 19, 2024
1 parent e67c457 commit 327c264
Show file tree
Hide file tree
Showing 13 changed files with 768 additions and 24 deletions.
144 changes: 144 additions & 0 deletions docs/maplibre/3d_buildings.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
{
"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/3d_buildings.ipynb)\n",
"[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/3d_buildings.ipynb)\n",
"[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
"\n",
"**Display buildings in 3D**\n",
"\n",
"This source code of this example is adapted from the MapLibre GL JS example - [Display buildings in 3D](https://maplibre.org/maplibre-gl-js/docs/examples/3d-buildings).\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[\"MAPBOX_API_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/basic-v2/style.json?key={MAPTILER_KEY}\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"m = leafmap.Map(center=[40.7135, -74.0066], zoom=16, pitch=45, bearing=-17, style=style)\n",
"source = {\n",
" \"url\": f\"https://api.maptiler.com/tiles/v3/tiles.json?key={MAPTILER_KEY}\",\n",
" \"type\": \"vector\",\n",
"}\n",
"\n",
"layer = {\n",
" \"id\": \"3d-buildings\",\n",
" \"source\": \"openmaptiles\",\n",
" \"source-layer\": \"building\",\n",
" \"type\": \"fill-extrusion\",\n",
" \"min-zoom\": 15,\n",
" \"paint\": {\n",
" \"fill-extrusion-color\": [\n",
" \"interpolate\",\n",
" [\"linear\"],\n",
" [\"get\", \"render_height\"],\n",
" 0,\n",
" \"lightgray\",\n",
" 200,\n",
" \"royalblue\",\n",
" 400,\n",
" \"lightblue\",\n",
" ],\n",
" \"fill-extrusion-height\": [\n",
" \"interpolate\",\n",
" [\"linear\"],\n",
" [\"zoom\"],\n",
" 15,\n",
" 0,\n",
" 16,\n",
" [\"get\", \"render_height\"],\n",
" ],\n",
" \"fill-extrusion-base\": [\n",
" \"case\",\n",
" [\">=\", [\"get\", \"zoom\"], 16],\n",
" [\"get\", \"render_min_height\"],\n",
" 0,\n",
" ],\n",
" },\n",
"}\n",
"m.add_source(\"openmaptiles\", source)\n",
"m.add_layer(layer)\n",
"m"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![](https://i.imgur.com/tusvTMZ.gif)"
]
}
],
"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.9"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
90 changes: 90 additions & 0 deletions docs/maplibre/3d_indoor_mapping.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
{
"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/3d_indoor_mapping.ipynb)\n",
"[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/3d_indoor_mapping.ipynb)\n",
"[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
"\n",
"**Display buildings in 3D**\n",
"\n",
"This source code of this example is adapted from the MapLibre GL JS example - [Extrude polygons for 3D indoor mapping](https://maplibre.org/maplibre-gl-js/docs/examples/3d-extrusion-floorplan).\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 leafmap.maplibregl as leafmap"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"m = leafmap.Map(\n",
" center=(41.86625, -87.61694), zoom=17, pitch=40, bearing=20, style=\"positron\"\n",
")\n",
"m.add_basemap(\"OpenStreetMap.Mapnik\")\n",
"data = \"https://maplibre.org/maplibre-gl-js/docs/assets/indoor-3d-map.geojson\"\n",
"m.add_geojson(\n",
" data,\n",
" layer_type=\"fill-extrusion\",\n",
" name=\"floorplan\",\n",
" paint={\n",
" \"fill-extrusion-color\": [\"get\", \"color\"],\n",
" \"fill-extrusion-height\": [\"get\", \"height\"],\n",
" \"fill-extrusion-base\": [\"get\", \"base_height\"],\n",
" \"fill-extrusion-opacity\": 0.5,\n",
" },\n",
")\n",
"m"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![](https://i.imgur.com/emBIlfG.gif)"
]
}
],
"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.9"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
116 changes: 116 additions & 0 deletions docs/maplibre/3d_terrain.ipynb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
{
"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/3d_terrain.ipynb)\n",
"[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/leafmap/blob/master/docs/maplibre/3d_terrain.ipynb)\n",
"[![image](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/opengeos/leafmap/HEAD)\n",
"\n",
"**Display buildings in 3D**\n",
"\n",
"This source code of this example is adapted from the MapLibre GL JS example - [3D Terrain](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain).\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 leafmap.maplibregl as leafmap"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"style = {\n",
" \"version\": 8,\n",
" \"sources\": {\n",
" \"osm\": {\n",
" \"type\": \"raster\",\n",
" \"tiles\": [\"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png\"],\n",
" \"tileSize\": 256,\n",
" \"attribution\": \"&copy; OpenStreetMap Contributors\",\n",
" \"maxzoom\": 19,\n",
" },\n",
" \"terrainSource\": {\n",
" \"type\": \"raster-dem\",\n",
" \"url\": \"https://demotiles.maplibre.org/terrain-tiles/tiles.json\",\n",
" \"tileSize\": 256,\n",
" },\n",
" \"hillshadeSource\": {\n",
" \"type\": \"raster-dem\",\n",
" \"url\": \"https://demotiles.maplibre.org/terrain-tiles/tiles.json\",\n",
" \"tileSize\": 256,\n",
" },\n",
" },\n",
" \"layers\": [\n",
" {\"id\": \"osm\", \"type\": \"raster\", \"source\": \"osm\"},\n",
" {\n",
" \"id\": \"hills\",\n",
" \"type\": \"hillshade\",\n",
" \"source\": \"hillshadeSource\",\n",
" \"layout\": {\"visibility\": \"visible\"},\n",
" \"paint\": {\"hillshade-shadow-color\": \"#473B24\"},\n",
" },\n",
" ],\n",
" \"terrain\": {\"source\": \"terrainSource\", \"exaggeration\": 1},\n",
"}"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"m = leafmap.Map(center=[47.27574, 11.39085], zoom=12, pitch=52, style=style)\n",
"m"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![](https://i.imgur.com/sjXZ2Jm.jpeg)"
]
}
],
"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.9"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Loading

0 comments on commit 327c264

Please sign in to comment.