Merge branch 'chore/vector_tiles' into 'main'

feat: add support for maptiler

See merge request decidim/decidim-module-geo!158

app/cells/decidim/geo/content_blocks/geo_maps_cell.rb

@@ -150,6 +150,8 @@ def map_config
             lat: model.try(:latitude).nil? ? config.latitude : model.latitude,
             lng: model.try(:longitude).nil? ? config.longitude : model.longitude,
             tile_layer: config.tile,
+            maptiler_api_key: config.maptiler_api_key,
+            maptiler_style_id: config.maptiler_style_id,
             zoom: config.zoom,
             focus_zoom_level: config.focus_zoom_level,
             force_geo_filter: config.default_geoencoded_filter

app/commands/decidim/geo/admin/update_geo_config.rb

@@ -45,6 +45,8 @@ def attributes
             latitude: form.latitude,
             zoom: form.zoom,
             tile: form.tile,
+            maptiler_api_key: form.maptiler_api_key,
+            maptiler_style_id: form.maptiler_style_id,
             only_assemblies: form.only_assemblies,
             only_processes: form.only_processes,
             focus_zoom_level: form.focus_zoom_level,

app/forms/decidim/geo/admin/geo_config_form.rb

@@ -9,6 +9,8 @@ class GeoConfigForm < Form
         attribute :latitude, Float
         attribute :zoom, Integer
         attribute :tile, String
+        attribute :maptiler_api_key, String
+        attribute :maptiler_style_id, String
         attribute :only_assemblies, Boolean
         attribute :only_processes, Boolean
         attribute :default_geoencoded_filter, Integer

app/models/decidim/geo/geo_config.rb

@@ -14,6 +14,8 @@ def self.geo_config_default
                            longitude: 0,
                            zoom: 13,
                            tile: tile_layer_default,
+                           maptiler_api_key: "",
+                           maptiler_style_id: "",
                            default_geoencoded_filter: 1)
       end
 

app/packs/src/decidim/geo/index.js

@@ -13,7 +13,6 @@ import bootstrap from "./bootstrap";
 import registerMobile from "./ui/mobile/registerMobile";
 import FilterControl from "./ui/FilterControl";
 import PageNameControl from "./ui/PageNameControl";
-
 window.debug = window.debug || {};
 window.debug.stores = () => ({
   config: configStore.getState(),
@@ -29,7 +28,7 @@ async function prepareLeaflet(isSmallScreen) {
   bootstrap();
   // Parse and save server-side information.
   const { map, tile } = await initMap();
-  configStore.setState(() => ({ map, tile, isSmallScreen }));
+  configStore.setState(() => ({ map,  isSmallScreen }));
 }
 async function fetchData() {
   const { addProcess, removeProcess, fetchAll, pointsForFilters } = pointStore.getState();

app/packs/src/decidim/geo/ui/initMap.js

@@ -1,10 +1,11 @@
+import L from "leaflet";
 import configStore from "../stores/configStore";
 import "leaflet.fullscreen";
-
+import {init as initMapTiler} from "@maptiler/leaflet-maptilersdk";
 const initMap = async () => {
   const {
     mapID,
-    map_config: { lat, lng, zoom, tile_layer },
+    map_config: { lat, lng, zoom, tile_layer, maptiler_api_key, maptiler_style_id },
     i18n
   } = configStore.getState();
   const map = L.map(mapID, {
@@ -13,15 +14,24 @@ const initMap = async () => {
     scrollWheelZoom: false,
     fullscreenControl: false
   });
-
+  
   map.zoomControl.setPosition("bottomright");
 
-  const tile = L.tileLayer(tile_layer, {
-    maxZoom: 19,
-    attribution:
-      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-  }).addTo(map);
+  if(maptiler_api_key.length > 0){
+    initMapTiler()
+    new L.MaptilerLayer({
+      style: maptiler_style_id,
+      apiKey: maptiler_api_key}
+    ).addTo(map)
 
+  }else{
+    L.tileLayer(tile_layer, {
+      maxZoom: 19,
+      attribution:
+        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+
+  }
   L.control
     .fullscreen({
       position: "topright",
@@ -32,6 +42,6 @@ const initMap = async () => {
     })
     .addTo(map);
 
-  return { map, tile };
+  return { map };
 };
 export default initMap;

app/views/decidim/geo/admin/geo_configs/_form.html.erb

@@ -30,6 +30,17 @@
         <%= form.text_field :tile %>
       </div>
     </div>
+    <div class="row">
+      <div class="columns xlarge-6">
+        <%= form.text_field :maptiler_api_key %>
+      </div>
+    </div>
+    <div class="row"></div>
+      <div class="columns xlarge-6">
+        <%= form.text_field :maptiler_style_id %>
+      </div>
+    </div>
+
   </div>
 
   <div class="card-divider">

config/locales/decidim-geo.en.yml

@@ -66,6 +66,7 @@ en:
             longitude: Longitude
             latitude: Latitude
             tile: Tile 
+            maptiler_api_key: Map tiler API Key (Optional)
           actions:
             update:
               success: Configurations Updated

db/migrate/20241019233857_add_vector_layer_config.rb

@@ -0,0 +1,6 @@
+class AddVectorLayerConfig < ActiveRecord::Migration[6.1]
+  def change
+    add_column :decidim_geo_configs, :maptiler_api_key, :string, default: ""
+    add_column :decidim_geo_configs, :maptiler_style_id, :string, default: ""
+  end
+end

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@maptiler/leaflet-maptilersdk": "^2.0.0",
     "buffer": "^6.0.3",
     "date-fns": "^3.0.0",
     "graphql": "16.6.0",