From 7bf698f7c7851c7c9d7c3421bbc8ae7a9141bae4 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Mon, 23 May 2022 07:53:51 +0100
Subject: [PATCH] feat(district,maps_utils): add Mapbox provider (temporarily
disabled)
---
.../0074_districthomepage_mapbox_apikey.py | 24 +++++++++++++++
district/models.py | 9 ++++++
maps_utils/const.py | 6 ++++
.../maps_utils/geo-feature-collection.js | 30 +++++++++++++++----
4 files changed, 63 insertions(+), 6 deletions(-)
create mode 100644 district/migrations/0074_districthomepage_mapbox_apikey.py
diff --git a/district/migrations/0074_districthomepage_mapbox_apikey.py b/district/migrations/0074_districthomepage_mapbox_apikey.py
new file mode 100644
index 00000000..5e658229
--- /dev/null
+++ b/district/migrations/0074_districthomepage_mapbox_apikey.py
@@ -0,0 +1,24 @@
+# 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",
+ ),
+ ),
+ ]
diff --git a/district/models.py b/district/models.py
index dbe93f2a..93a9c5d7 100644
--- a/district/models.py
+++ b/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,
}
diff --git a/maps_utils/const.py b/maps_utils/const.py
index 1129ac93..cc1ab4f7 100644
--- a/maps_utils/const.py
+++ b/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"
diff --git a/maps_utils/static/maps_utils/geo-feature-collection.js b/maps_utils/static/maps_utils/geo-feature-collection.js
index 4bedb0f2..f1471f3b 100644
--- a/maps_utils/static/maps_utils/geo-feature-collection.js
+++ b/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 © <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">
--
GitLab