{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![image](https://studiolab.sagemaker.aws/studiolab.svg)](https://studiolab.sagemaker.aws/import/github/giswqs/mapwidget/blob/master/docs/examples/maplibre.ipynb)\n",
    "[![image](https://img.shields.io/badge/Open-Planetary%20Computer-black?style=flat&logo=microsoft)](https://pccompute.westeurope.cloudapp.azure.com/compute/hub/user-redirect/git-pull?repo=https://github.com/giswqs/mapwidget&urlpath=lab/tree/mapwidget/docs/examples/maplibre.ipynb&branch=master)\n",
    "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/giswqs/mapwidget/blob/master/docs/examples/maplibre.ipynb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %pip install mapwidget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import mapwidget.maplibre as mapwidget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m = mapwidget.Map(center=[20, 0], zoom=2, height='600px')\n",
    "m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![](https://i.imgur.com/Pxi43kg.png)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m.center"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m.zoom"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m.bounds"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m.clicked_latlng"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "esm = \"\"\"\n",
    "\n",
    "    var videoStyle = {\n",
    "        'version': 8,\n",
    "        'sources': {\n",
    "            'satellite': {\n",
    "                'type': 'raster',\n",
    "                'url':\n",
    "                    'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',\n",
    "                'tileSize': 256\n",
    "            },\n",
    "            'video': {\n",
    "                'type': 'video',\n",
    "                'urls': [\n",
    "                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',\n",
    "                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'\n",
    "                ],\n",
    "                'coordinates': [\n",
    "                    [-122.51596391201019, 37.56238816766053],\n",
    "                    [-122.51467645168304, 37.56410183312965],\n",
    "                    [-122.51309394836426, 37.563391708549425],\n",
    "                    [-122.51423120498657, 37.56161849366671]\n",
    "                ]\n",
    "            }\n",
    "        },\n",
    "        'layers': [\n",
    "            {\n",
    "                'id': 'background',\n",
    "                'type': 'background',\n",
    "                'paint': {\n",
    "                    'background-color': 'rgb(4,7,14)'\n",
    "                }\n",
    "            },\n",
    "            {\n",
    "                'id': 'satellite',\n",
    "                'type': 'raster',\n",
    "                'source': 'satellite'\n",
    "            },\n",
    "            {\n",
    "                'id': 'video',\n",
    "                'type': 'raster',\n",
    "                'source': 'video'\n",
    "            }\n",
    "        ]\n",
    "    };\n",
    "\n",
    "    var map = new maplibregl.Map({\n",
    "        container: 'map',\n",
    "        minZoom: 14,\n",
    "        zoom: 17,\n",
    "        center: [-122.514426, 37.562984],\n",
    "        bearing: -96,\n",
    "        style: videoStyle\n",
    "    });\n",
    "\n",
    "    var playingVideo = true;\n",
    "\n",
    "    map.on('click', function () {\n",
    "        playingVideo = !playingVideo;\n",
    "\n",
    "        if (playingVideo) map.getSource('video').play();\n",
    "        else map.getSource('video').pause();\n",
    "    });\n",
    "\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m.set_esm(esm)\n",
    "m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![](https://i.imgur.com/o2ZHeTL.gif)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "esm = \"\"\"\n",
    "\n",
    "    var map = (window.map = new maplibregl.Map({\n",
    "        container: 'map',\n",
    "        zoom: 12,\n",
    "        center: [11.39085, 47.27574],\n",
    "        pitch: 52,\n",
    "        hash: true,\n",
    "        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: '© 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",
    "                {\n",
    "                    id: 'osm',\n",
    "                    type: 'raster',\n",
    "                    source: 'osm'\n",
    "                },\n",
    "                {\n",
    "                    id: 'hills',\n",
    "                    type: 'hillshade',\n",
    "                    source: 'hillshadeSource',\n",
    "                    layout: { visibility: 'visible' },\n",
    "                    paint: { 'hillshade-shadow-color': '#473B24' }\n",
    "                }\n",
    "            ],\n",
    "            terrain: {\n",
    "                source: 'terrainSource',\n",
    "                exaggeration: 1\n",
    "            }\n",
    "        },\n",
    "        maxZoom: 18,\n",
    "        maxPitch: 85\n",
    "    }));\n",
    "\n",
    "    map.addControl(\n",
    "        new maplibregl.NavigationControl({\n",
    "            visualizePitch: true,\n",
    "            showZoom: true,\n",
    "            showCompass: true\n",
    "        })\n",
    "    );\n",
    "\n",
    "    map.addControl(\n",
    "        new maplibregl.TerrainControl({\n",
    "            source: 'terrainSource',\n",
    "            exaggeration: 1\n",
    "        })\n",
    "    );\n",
    "\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m.set_esm(esm)\n",
    "m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![](https://i.imgur.com/TTN1mx5.png)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.10.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}