feat(district,maps_utils): add Mapbox provider (temporarily disabled)

district/migrations/0074_districthomepage_mapbox_apikey.py

+# Generated by Django 4.0.4 on 2022-05-22 08:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("district", "0073_districtgeofeaturecollectionpage_logo_image_and_more"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="districthomepage",
+            name="mapbox_apikey",
+            field=models.CharField(
+                blank=True,
+                help_text="API klíč pro Mapbox mapy. Získáte po registraci mapbox.com.",
+                max_length=128,
+                null=True,
+                verbose_name="Mapbox API key",
+            ),
+        ),
+    ]

district/models.py

@@ -204,6 +204,13 @@ class DistrictHomePage(
         null=True,
         blank=True,
     )
+    mapbox_apikey = models.CharField(
+        "Mapbox API key",
+        max_length=128,
+        help_text="API klíč pro Mapbox mapy. Získáte po registraci mapbox.com.",
+        null=True,
+        blank=True,
+    )
 
     ### PANELS
 
@@ -266,6 +273,7 @@ class DistrictHomePage(
         MultiFieldPanel(
             [
                 FieldPanel("stadia_apikey"),
+                FieldPanel("mapbox_apikey"),
             ],
             gettext_lazy("API klíče"),
         ),
@@ -363,6 +371,7 @@ class DistrictHomePage(
         """Get collection of all API keys."""
         return {
             "stadia": self.stadia_apikey,
+            "mapbox": self.mapbox_apikey,
         }
 
 

maps_utils/const.py

@@ -5,6 +5,12 @@ MAP_STYLES = (
     # ("stamen-terrain", "Stamen Terrain"),
     # ("stadia-osm-bright", "Stadia OSM Bright (vyžaduje API klíč)"),
     # ("stadia-outdoors", "Stadia Outdoors (vyžaduje API klíč)"),
+    # ("mapbox-streets", "Mapbox Streets (vyžaduje API klíč)"),
+    # ("mapbox-outdoors", "Mapbox Outdoors (vyžaduje API klíč)"),
+    # ("mapbox-light", "Mapbox Light (vyžaduje API klíč)"),
+    # ("mapbox-dark", "Mapbox Dark (vyžaduje API klíč)"),
+    # ("mapbox-satellite", "Mapbox Satellite (vyžaduje API klíč)"),
+    # ("mapbox-pirate", "Mapbox Pirate Theme (vyžaduje API klíč)"),
 )
 
 DEFAULT_MAP_STYLE = "osm-mapnik"

maps_utils/static/maps_utils/geo-feature-collection.js

@@ -19,6 +19,16 @@ const buildMarkerIcon = (color, number) => {
     });
 };
 
+const mapboxStyle = (id, apiKey) => ({
+    url: `https://api.mapbox.com/styles/v1/${id}/tiles/{z}/{x}/{y}@2x?access_token=${apiKey}`,
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    maxZoom: 22,
+    maxNativeZoom: 22,
+    detectRetina: true,
+    tileSize: 1024,
+    zoomOffset: -2,
+});
+
 const tileStyles = {
     "osm-mapnik": (apiKeys) => ({
         url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
@@ -61,6 +71,12 @@ const tileStyles = {
         maxZoom: 20,
         maxNativeZoom: 20,
     }),
+    "mapbox-streets": (apiKeys) => mapboxStyle('mapbox/streets-v11', apiKeys.mapbox),
+    "mapbox-outdoors": (apiKeys) => mapboxStyle('mapbox/outdoors-v11', apiKeys.mapbox),
+    "mapbox-light": (apiKeys) => mapboxStyle('mapbox/light-v10', apiKeys.mapbox),
+    "mapbox-dark": (apiKeys) => mapboxStyle('mapbox/dark-v10', apiKeys.mapbox),
+    "mapbox-satellite": (apiKeys) => mapboxStyle('mapbox/satellite-v9', apiKeys.mapbox),
+    "mapbox-pirate": (apiKeys) => mapboxStyle('xaralis/ck4oblwty0fgk1fjzxmqow2r5', apiKeys.mapbox),
 };
 
 const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
@@ -121,12 +137,14 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
             mapOptions: {
                 dragging: !L.Browser.mobile,
                 tap: !L.Browser.mobile,
-                maxNativeZoom: tileOpts.maxNativeZoom,
+                maxZoom: tileOpts.maxZoom,
                 zoomSnap: 0.5,
                 zoomControl: this.displayZoomControl,
 
             },
-            ...tileOpts,
+            tileLayerOptions: {
+                ...tileOpts
+            },
         };
     },
     computed: {
@@ -512,13 +530,13 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                     ref="map"
                     :style="{height: height}"
                     :zoom="zoom"
-                    :maxZoom="maxZoom"
+                    :maxZoom="tileLayerOptions.maxZoom"
                     :options="mapOptions"
                 >
                     <l-tile-layer
-                        :url="url"
-                        :attribution="attribution"
-                        :options="{maxZoom: maxZoom, maxNativeZoom: maxNativeZoom}"
+                        :url="tileLayerOptions.url"
+                        :attribution="tileLayerOptions.attribution"
+                        :options="tileLayerOptions"
                     ></l-tile-layer>
                     <l-control v-if="displayLegend" class="geo-feature-collection__legend text-sm leading-normal elevation-10 space-y-1">
                         <div v-for="(category, name, index) in categories" :key="category.name">