{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# DualMap plugin\n", "\n", "This plugin is using the Leaflet plugin Sync by Jieter:\n", "https://github.com/jieter/Leaflet.Sync\n", "\n", "The goal is to have two maps side by side. When you pan or zoom on one map, the other will move as well." ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [], "source": [ "import folium\n", "import folium.plugins" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `DualMap` class accepts the same arguments as the normal `Map` class. Except for these: 'width', 'height', 'left', 'top', 'position'.\n", "\n", "In the following example we create a `DualMap`, add layer controls and then show the map. Try panning and zooming to check that both maps are synchronized." ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
Make this Notebook Trusted to load map: File -> Trust Notebook
" ], "text/plain": [ "" ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.plugins.DualMap(location=(52.1, 5.1), zoom_start=8)\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You can access the two submaps with attributes `m1` and `m2`. You can add objects to each map specifically.\n", "\n", "Here we add different tile layers to each map. This way you can see two different tile sets at the same time." ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
Make this Notebook Trusted to load map: File -> Trust Notebook
" ], "text/plain": [ "" ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.plugins.DualMap(location=(52.1, 5.1), tiles=None, zoom_start=8)\n", "\n", "folium.TileLayer(\"openstreetmap\").add_to(m.m1)\n", "folium.TileLayer(\"cartodbpositron\").add_to(m.m2)\n", "\n", "folium.LayerControl(collapsed=False).add_to(m)\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now we're going to add feature groups and markers to both maps and to each map individually. We'll color the shared icon red." ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
Make this Notebook Trusted to load map: File -> Trust Notebook
" ], "text/plain": [ "" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.plugins.DualMap(location=(52.1, 5.1), tiles=\"cartodbpositron\", zoom_start=8)\n", "\n", "fg_both = folium.FeatureGroup(name=\"markers_both\").add_to(m)\n", "fg_1 = folium.FeatureGroup(name=\"markers_1\").add_to(m.m1)\n", "fg_2 = folium.FeatureGroup(name=\"markers_2\").add_to(m.m2)\n", "\n", "icon_red = folium.Icon(color=\"red\")\n", "folium.Marker((52.0, 5.0), tooltip=\"both\", icon=icon_red).add_to(fg_both)\n", "folium.Marker((52.4, 5.0), tooltip=\"1\").add_to(fg_1)\n", "folium.Marker((52.0, 5.4), tooltip=\"2\").add_to(fg_2)\n", "\n", "folium.LayerControl(collapsed=False).add_to(m)\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Finally, you can use the `layout` argument to change the layout to vertical:" ] }, { "cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
Make this Notebook Trusted to load map: File -> Trust Notebook
" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.plugins.DualMap(layout=\"vertical\")\n", "m" ] } ], "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.9.0" } }, "nbformat": 4, "nbformat_minor": 2 }