decidim-navigation_maps 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e99886ba8f12f6602904f174d2d82542def72cc7e6eb2dcdaa07861876d7eed
-  data.tar.gz: d57eef525c3197b6dcd5645cb1f5ed433762558223ee80895f78b34af4216230
+  metadata.gz: 555b93edb92b69f19e3cc10841179b04fb57502a13d347fe69132d01833f88d6
+  data.tar.gz: 76da0880561f5e1e5b1201a048d90c8a862194134f3e485c1d2d045401f61551
 SHA512:
-  metadata.gz: b4a1b325b560400a2ee97b8ebd1d2e67e40a5472922e3cf631630233f8552576f54574c453ca4c73d6093410059cb154d3062861b8e6f29729a40db4f62cb6f7
-  data.tar.gz: 71a153f0cc0c8e4675c5292e0a40248cd7510c39052e1b83856006bf3798340a9489078a0bfc23f02f68bc4087d377a8a9f724a5e5a52e1a8f14a2266d6e6a31
+  metadata.gz: d90681644ff2111df383e19b5e7e7568c97cc225aad75645dcd86369332e91d4ef0d0fcc0ea6413c7bcb83bab0239333fb926958d8a32e62df5e2b52bd7353d1
+  data.tar.gz: bbc246049572a74e697a0382bd084213cdff071149ea1c2ef1a93eae78da2d1ceeba110b394c16c9877b5c88ecd96fca0c674b1f72193b7b86b993a5707c6daf

data/README.md

@@ -24,7 +24,7 @@ homepage only).
 Add this line to your application's Gemfile:
 
 ```ruby
-gem "decidim-navigation_maps", "~> 1.2.0"
+gem "decidim-navigation_maps"
 ```
 
 And then execute (remember to repeat this if you are upgrading from version 1.1):
@@ -32,16 +32,35 @@ And then execute (remember to repeat this if you are upgrading from version 1.1)
 ```bash
 bundle
 bundle exec rails decidim_navigation_maps:install:migrations
+bundle exec rails decidim_navigation_maps:webpacker:install
 bundle exec rails db:migrate
 ```
 
+> NOTE: the `decidim_notify:webpacker:install` is only necessary for Decidim versions starting at 0.25.
+
+If you are upgrading from a version prior to 1.3, make sure that you migrate your existing images to Active Storae:
+
+```
+RAILS_ENV=production bin/rails navigation_maps:active_storage_migrations:migrate_from_carrierwave
+```
+
+Or check your migration status with:
+```
+RAILS_ENV=production bin/rails navigation_maps:active_storage_migrations:check_migration_from_carrierwave
+```
+
+The correct version of Navigation Maps should resolved automatically by the Bundler.
+However you can force some specific version using `gem "decidim-navigation_maps", "~> 1.3.0"` in the Gemfile.
+
+
 Depending on your Decidim version, choose the corresponding Plugin version to ensure compatibility:
 
 | Navigation Maps version | Compatible Decidim versions |
 |---|---|
-| 1.0.x | 0.18.x - 0.21.x |
-| 1.1.x | 0.22.x, 0.23.x |
+| 1.3.x | 0.25.x, 0.26.x |
 | 1.2.x | 0.24.x |
+| 1.1.x | 0.22.x, 0.23.x |
+| 1.0.x | 0.18.x - 0.21.x |
 
 ## Contributing
 

data/Rakefile

@@ -9,6 +9,12 @@ def install_module(path)
   end
 end
 
+def override_webpacker_config_files(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim_navigation_maps:webpacker:install")
+  end
+end
+
 def seed_db(path)
   Dir.chdir(path) do
     system("bundle exec rake db:seed")
@@ -25,6 +31,7 @@ desc "Generates a dummy app for testing"
 task test_app: "decidim:generate_external_test_app" do
   ENV["RAILS_ENV"] = "test"
   install_module("spec/decidim_dummy_app")
+  override_webpacker_config_files("spec/decidim_dummy_app")
 end
 
 desc "Generates a development app"
@@ -42,6 +49,7 @@ task :development_app do
   end
 
   install_module("development_app")
+  override_webpacker_config_files("development_app")
   ENV["SKIP_MODULE_SEEDS"] = "1"
   seed_db("development_app")
   # manually seed navigation maps to ensure participatory process groups are created

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map/_tabs_content.erb

@@ -2,7 +2,7 @@
 <div class="tabs-content admin" data-tabs-content="navigation_maps-tabs">
   <% tabs.each_with_index do |item, index| %>
     <div class="tabs-panel<%= " is-active" if index.zero? %>" id="map<%= index %>">
-      <%= content_tag(:div, "", id: "navigation_maps-map-#{item.id}", class: "map", style: "height: #{item.height}px", data: { id: item.id, image: item.image.url, blueprint: item.blueprint }) %>
+      <%= content_tag(:div, "", id: "navigation_maps-map-#{item.id}", class: "map", style: "height: #{item.height}px", data: { id: item.id, image: image_path(item.image), blueprint: item.blueprint }) %>
     </div>
   <% end %>
 </div>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map/show.erb

@@ -1,4 +1,4 @@
-<%= stylesheet_link_tag "decidim/navigation_maps/navigation_maps" %>
+<%= stylesheet_pack_tag "decidim_navigation_maps" %>
 <%= render partial: "styles", locals: { blueprints: valid_blueprints } %>
 
 <section<%= class_tag(section_classes) %>>
@@ -18,4 +18,4 @@
 </section>
 
 <%= render partial: "template" %>
-<%= javascript_include_tag "decidim/navigation_maps/navigation_maps" %>
+<%= javascript_pack_tag "decidim_navigation_maps" %>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_cell.rb

@@ -42,6 +42,11 @@ module Decidim
 
           " class=\"#{class_string}\""
         end
+
+        def image_path(image, options = {})
+          options.merge!({ only_path: true })
+          Rails.application.routes.url_helpers.rails_blob_url(image, options)
+        end
       end
     end
   end

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_form.erb

@@ -1,5 +1,5 @@
 <ul class="accordion" data-accordion>
-  <li class="accordion-item<%= " is-active" unless form.image? %>" data-accordion-item>
+  <li class="accordion-item<%= " is-active" unless image?(form) %>" data-accordion-item>
     <a href="#" class="accordion-title"><%= t("navigation_map_settings_form.info", scope: "decidim.navigation_maps.content_blocks") %></a>
 
     <div class="accordion-content" data-tab-content>
@@ -9,7 +9,7 @@
 
       <%= label_tag t("navigation_map_settings_form.blueprint_image", scope: "decidim.navigation_maps.content_blocks") %>
       <div class="thumbnail">
-        <%= image_tag form.image.thumbnail.url if form.image? %>
+        <%= image_tag image_path(form.image, variant: :thumbnail) if image?(form) %>
       </div>
       <%= file_field_tag "blueprints[#{form.ident}][image]", { id: "blueprints_#{form.ident}_image", label: t("navigation_map_settings_form.title", scope: "decidim.navigation_maps.content_blocks") } %>
 
@@ -25,12 +25,12 @@
   </div>
   </li>
 
-  <% if form.image? %>
+  <% if image?(form) %>
   <li class="accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title"><%= t("navigation_map_settings_form.editor", scope: "decidim.navigation_maps.content_blocks") %></a>
     <div class="accordion-content navigation_maps-content" data-tab-content>
 
-      <%= content_tag(:div, "", id: "navigation_maps-map-#{form.ident}", class: "map", data: { id: form.ident, image: form.image.url, blueprint: form.blueprint }) %>
+      <%= content_tag(:div, "", id: "navigation_maps-map-#{form.ident}", class: "map", data: { id: form.ident, image: image_path(form.image), blueprint: form.blueprint }) %>
 
     </div>
   </li>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_tabs_content.erb

@@ -1,4 +1,3 @@
-
 <div class="tabs-content" data-tabs-content="navigation_maps-tabs">
   <% tabs.each_with_index do |item, index| %>
     <div class="tabs-panel<%= " is-active" if index.zero? %>" id="map<%= index %>">

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/show.erb

@@ -33,5 +33,7 @@
 </div>
 
 <%= render partial: "modal" %>
-<%= javascript_include_tag "decidim/navigation_maps/admin/navigation_maps" %>
-<%= stylesheet_link_tag "decidim/navigation_maps/admin/navigation_maps" %>
+<%# we need to rely on a CDN due a bug in webpacker that renders twice jquery if importing a plugin %>
+<%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js", integrity: "sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn", crossorigin: "anonymous" %>
+<%= javascript_pack_tag "decidim_admin_navigation_maps" %>
+<%= stylesheet_pack_tag "decidim_admin_navigation_maps" %>

data/app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form_cell.rb

@@ -26,6 +26,15 @@ module Decidim
         def label
           I18n.t("decidim.content_blocks.html.html_content")
         end
+
+        def image?(frm)
+          frm.image.attached?
+        end
+
+        def image_path(image, options = {})
+          options.merge!({ only_path: true })
+          Rails.application.routes.url_helpers.rails_blob_url(image, options)
+        end
       end
     end
   end

data/app/controllers/decidim/navigation_maps/admin/blueprints_controller.rb

@@ -13,7 +13,7 @@ module Decidim
         end
 
         def show
-          render json: organization_blueprints.find(params[:id])
+          render json: organization_blueprints.find(params[:id]).to_json(except: :image)
         end
 
         def create

data/app/jobs/decidim/navigation_maps/migrate_legacy_images_job.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Decidim
+  module NavigationMaps
+    class MigrateLegacyImagesJob < ApplicationJob
+      queue_as :default
+
+      def perform(organization_id, mappings = [], logger = Rails.logger)
+        @organization_id = organization_id
+        @routes_mappings = mappings
+        @logger = logger
+
+        migrate_all!
+      end
+
+      private
+
+      attr_reader :routes_mappings, :logger
+
+      def migrate_all!
+        Decidim::CarrierWaveMigratorService.migrate_attachment!(
+          klass: Decidim::NavigationMaps::BluePrint,
+          cw_attribute: "image",
+          cw_uploader: Decidim::NavigationMaps::Cw::ImageUploader,
+          as_attribute: "image",
+          logger: @logger,
+          routes_mappings: routes_mappings
+        )
+      end
+    end
+  end
+end

data/app/models/decidim/navigation_maps/blueprint.rb

@@ -4,6 +4,8 @@ module Decidim
   module NavigationMaps
     # Abstract class from which all models in this engine inherit.
     class Blueprint < ApplicationRecord
+      include Decidim::HasUploadValidations
+
       self.table_name = "decidim_navigation_maps_blueprints"
 
       attribute :height, :integer, default: 475
@@ -16,11 +18,10 @@ module Decidim
                dependent: :destroy
 
       validates :organization, presence: true
-      validates :image,
-                file_content_type: { allow: ["image/jpeg", "image/png", "image/svg+xml"] }
       validates :height, numericality: { greater_than: 0 }
 
-      mount_uploader :image, Decidim::NavigationMaps::BlueprintUploader
+      has_one_attached :image
+      validates_upload :image, uploader: Decidim::NavigationMaps::BlueprintUploader
 
       def blueprint
         areas.map { |area| [area.area_id.to_s, area.to_geoson] }.to_h

data/app/packs/entrypoints/decidim_admin_navigation_maps.js

@@ -0,0 +1,4 @@
+import "src/decidim/navigation_maps/admin/navigation_maps.js"
+
+// CSS
+import "entrypoints/decidim_admin_navigation_maps.scss";

data/app/packs/entrypoints/decidim_admin_navigation_maps.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/navigation_maps/admin/navigation_maps";

data/app/packs/entrypoints/decidim_navigation_maps.js

@@ -0,0 +1,7 @@
+import "src/decidim/navigation_maps/navigation_maps.js"
+
+// Images
+require.context("../images", true)
+
+// CSS
+import "entrypoints/decidim_navigation_maps.scss";

data/app/packs/entrypoints/decidim_navigation_maps.scss

@@ -0,0 +1 @@
+@import "stylesheets/decidim/navigation_maps/navigation_maps";

data/app/packs/src/decidim/navigation_maps/admin/map_editor.js

@@ -0,0 +1,83 @@
+// Creates a map
+import NavigationMapView from "src/decidim/navigation_maps/map_view.js";
+
+export default class NavigationMapEditor extends NavigationMapView {
+  constructor(map_object, table_object) {
+    // Call constructor of superclass to initialize superclass-derived members.
+    super(map_object, () => {
+      this.createControls();
+      if (this.blueprint) {
+        this.createAreas();
+      }
+    });
+    this.table_object = table_object;
+    this.createAreaCallback = function () {};
+    this.editAreaCallback = function () {};
+    this.removeAreaCallback = function () {};
+  }
+
+  createControls() {
+    this.map.pm.addControls({
+      position: "topleft",
+      drawCircle: false,
+      drawMarker: false,
+      drawCircleMarker: false,
+      drawPolyline: false,
+      cutPolygon: false
+    });
+
+    this.map.on("pm:create", (e) => {
+      let geojson = e.layer.toGeoJSON();
+      this.blueprint[e.layer._leaflet_id] = geojson;
+      this.attachEditorEvents(e.layer);
+      this.createAreaCallback(e.layer._leaflet_id, e.layer, this);
+    });
+
+    this.map.on("pm:remove", (e) => {
+      delete this.blueprint[e.layer._leaflet_id];
+      this.removeAreaCallback(e.layer._leaflet_id, e.layer, this);
+    });
+  };
+
+  editing() {
+    let pm = this.map.pm;
+    return pm.globalRemovalEnabled() || pm.globalDragModeEnabled() || pm.globalEditEnabled();
+  };
+
+  // register callback to handle area edits,removals and creations
+  onCreateArea(callback) {
+    this.createAreaCallback = callback;
+  };
+  onEditArea(callback) {
+    this.editAreaCallback = callback;
+  };
+  onRemoveArea(callback) {
+    this.removeCreateCallback = callback;
+  };
+
+  attachEditorEvents (layer) {
+    layer.on("mouseover", (e) => {
+      e.target.getElement().classList.add("selected")
+    });
+
+    layer.on("mouseout", (e) => {
+      e.target.getElement().classList.remove("selected")
+    });
+
+    layer.on("pm:edit", (e) => {
+      this.blueprint[e.target._leaflet_id] = e.target.toGeoJSON();
+      this.editAreaCallback(e.target._leaflet_id, e.target, this);
+    });
+
+    layer.on("click", (e) => {
+      if (!this.editing()) {
+        this.clickAreaCallback(e.target._leaflet_id, e.target, this);
+      }
+    });
+  };
+
+  getBlueprint () {
+    return this.blueprint;
+  };
+
+}

data/app/packs/src/decidim/navigation_maps/admin/navigation_maps.js

@@ -0,0 +1,154 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+// import "jquery-form"; // we use a CDN instead due a bug in webpacker
+import NavigationMapEditor from "src/decidim/navigation_maps/admin/map_editor.js";
+
+$(() => {
+
+  let $maps = $(".navigation_maps.admin .map");
+  let $progress = $(".navigation_maps.admin .progress");
+  let $bar = $(".navigation_maps.admin .progress-meter");
+  let $loading = $(".navigation_maps.admin .loading");
+  let $callout = $(".navigation_maps.admin .callout");
+  let $modal = $("#mapEditModal");
+  let $form = $("form");
+  let $tabs = $("#navigation_maps-tabs");
+  let $accordion = $(".navigation_maps.admin .accordion");
+  let editors = {};
+  let new_areas = {};
+
+  $maps.each((_i, el) => {
+    let id = $(el).data("id");
+    let table = document.getElementById(`navigation_maps-table-${id}`);
+    editors[id] = new NavigationMapEditor(el, table);
+    editors[id].onCreateArea((area_id) => {
+      new_areas[area_id] = true;
+    });
+
+    editors[id].onClickArea((area_id, area) => {
+      $modal.find(".modal-content").html("");
+      $modal.addClass("loading").foundation("open");
+      $callout.hide();
+      $callout.removeClass("alert success");
+      // "new" form insted of editing
+      let rel = new_areas[area_id]
+        ? "new"
+        : area_id;
+      $modal.find(".modal-content").load(`/admin/navigation_maps/blueprints/${id}/areas/${rel}`, () => {
+        let $input1 = $modal.find('input[name="blueprint_area[area_id]"]');
+        let $input2 = $modal.find('input[name="blueprint_area[area_type]"]');
+        let $input3 = $modal.find('input[name="blueprint_area[area]"]');
+        let a = area.toGeoJSON();
+        $modal.removeClass("loading");
+        if ($input1.length) { 
+          $input1.val(area_id); 
+        }
+        if ($input2.length) {
+          $input2.val(a.type);
+        }
+        if ($input3.length) {
+          $input3.val(JSON.stringify(a));
+        }
+        $modal.find("ul[data-tabs=true]").each(() => {
+          new Foundation.Tabs($(el)); // eslint-disable-line
+        });
+      });
+    });
+  });
+
+  // Rails AJAX events
+  document.body.addEventListener("ajax:error", (responseText) => {
+    $callout.contents("p").html(`${responseText.detail[0].message}: <strong>${responseText.detail[0].error}</strong>`);
+    $callout.addClass("alert");
+  });
+
+  document.body.addEventListener("ajax:success", (responseText) => {
+    if (new_areas[responseText.detail[0].area]) {
+      delete new_areas[responseText.detail[0].area]
+    }
+    let blueprint_id = responseText.detail[0].blueprint_id;
+    let area_id = responseText.detail[0].area_id;
+    let area = responseText.detail[0].area;
+    editors[blueprint_id].setLayerProperties(editors[blueprint_id].map._layers[area_id], area);
+    editors[blueprint_id].blueprint[area_id] = area;
+    $callout.contents("p").html(responseText.detail[0].message);
+    $callout.addClass("success");
+  });
+
+  document.body.addEventListener("ajax:complete", () => {
+    $callout.show();
+    $modal.foundation("close");
+  })
+
+  $tabs.on("change.zf.tabs", (e, $tab, $content) => {
+    let id = $content.find(".map").data("id");
+    if (id) {
+      editors[id].reload();
+    }
+  });
+
+  $accordion.on("down.zf.accordion", () => {
+    let id = $accordion.find(".map").data("id");
+    if (id) {
+      editors[id].reload();
+    }
+  });
+
+  // If a new item si going to be created o the image is changed a reload is needed
+  let needsReload = () => {
+    let reload = false;
+    if ($form.find("#map-new input:checked").length) {
+      return true;
+    }
+    if ($form.find(".delete-tab input[type=checkbox]:checked").length) {
+      return true;
+    }
+
+    $form.find("input[type=file],input[tabs_id=blueprints___title]").each((_i, el) => {
+      if ($(el).val()) {
+        reload = true;
+        return false;
+      }
+    });
+    return reload;
+  };
+
+  $form.ajaxForm({
+    url: $form.find("[name=action]").val(),
+    beforeSerialize: () => {
+      Object.keys(editors).forEach((key) => {
+        let editor = editors[key];
+        $(`#blueprints_${editor.id}_blueprint`).val(JSON.stringify(editor.getBlueprint()));
+      });
+    },
+    beforeSend: () => {
+      let percentVal = "0%";
+      $bar.width(percentVal).html(percentVal);
+      $progress.show();
+      $callout.hide();
+      $callout.removeClass("alert success");
+      $loading.show();
+    },
+    uploadProgress: (event, position, total, percentComplete) => { // eslint-disable-line
+      let percentVal = `${percentComplete}%`;
+      $bar.width(percentVal).html(percentVal);
+    },
+    success: (responseText) => {
+      $callout.show();
+      $progress.hide();
+      $callout.contents("p").html(responseText);
+      $callout.addClass("success");
+      $loading.hide();
+      if (needsReload()) {
+        $loading.show();
+        location.reload();
+      }
+    },
+    error: (xhr) => {
+      $loading.hide();
+      $callout.show();
+      $callout.contents("p").html(xhr.responseText);
+      $callout.addClass("alert");
+    }
+  });
+});

data/app/packs/src/decidim/navigation_maps/map_view.js

@@ -0,0 +1,125 @@
+// Creates a map view
+import "leaflet";
+import "leaflet/dist/leaflet.css";
+import "@geoman-io/leaflet-geoman-free";
+import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
+
+export default class NavigationMapView {
+  constructor(map_object, imageDecorator) {
+    this.features = {};
+    this.map_object = map_object;
+    this.id = map_object.dataset.id;
+    this.image_path = map_object.dataset.image;
+    this.blueprint = map_object.dataset.blueprint
+      ? JSON.parse(map_object.dataset.blueprint)
+      : {};
+    this.image = new Image();
+    this.image.onload = () => {
+      this.createMap();
+      if (typeof imageDecorator === "function") {
+        imageDecorator(this);
+      } else if (this.blueprint) {
+        this.createAreas();
+      }
+    };
+    this.image.src = this.image_path;
+    this.clickAreaCallback = () => {};
+    this.setLayerPropertiesCallback = () => {};
+  }
+
+  createMap() {
+    let bounds = [[0, 0], [this.image.height, this.image.width]];
+    this.map = L.map(this.map_object, {
+      minZoom: -1,
+      maxZoom: 2,
+      crs: L.CRS.Simple,
+      noWrap: true,
+      zoomSnap: 0,
+      // zoomDelta: 0.1,
+      maxBounds: [[0, 0], [this.image.height, this.image.width]],
+      center: [this.image.height / 2, this.image.width / 2],
+      zoom: -1,
+      scrollWheelZoom: false,
+      attributionControl: false
+    });
+
+    L.imageOverlay(this.image.src, bounds).addTo(this.map);
+    this.fitBounds();
+  };
+
+  fitBounds() {
+    let image_ratio = this.image.height / this.image.width;
+    let map_ratio = this.map_object.offsetHeight / this.map_object.offsetWidth;
+
+    if (image_ratio > map_ratio) {
+      this.map.fitBounds([[0, 0], [0, this.image.width]]);
+    }
+    else {
+      this.map.fitBounds([[0, 0], [this.image.height, 0]]);
+    }
+    this.map.setView([this.image.height / 2, this.image.width / 2]);
+  };
+
+  createAreas() {
+    this.forEachBlueprint((id, geoarea) => {
+      new L.GeoJSON(geoarea, {
+        onEachFeature: (feature, layer) => {
+          layer._leaflet_id = id;
+          this.setLayerProperties(layer, geoarea);
+          this.attachEditorEvents(layer);
+        }
+      }).addTo(this.map);
+    });
+  };
+
+  setLayerProperties (layer, area) {
+    let props = area.properties;
+    if (props) {
+      if (props.color) {
+        layer.setStyle({fillColor: props.color, color: props.color});
+      }
+      this.setLayerPropertiesCallback(layer, props);
+    }
+  };
+
+  attachEditorEvents (layer) {
+    layer.on("mouseover", (e) => {
+      e.target.getElement().classList.add("selected")
+    });
+
+    layer.on("mouseout", (e) => {
+      e.target.getElement().classList.remove("selected")
+    });
+
+    layer.on("click", (e) => {
+      this.clickAreaCallback(e.target, this);
+    });
+  };
+
+  // register callback to handle area clicks
+  onClickArea(callback) {
+    this.clickAreaCallback = callback;
+  };
+
+  onSetLayerProperties(callback) {
+    this.setLayerPropertiesCallback = callback;
+  };
+
+  forEachBlueprint (decorator) {
+    for (let id in this.blueprint) {
+      let geoarea = this.blueprint[id];
+      // avoid non-polygons for the moment
+      if (geoarea.geometry && geoarea.geometry.type === "Polygon") {
+        decorator(id, geoarea);
+      }
+    }
+  };
+
+  reload () {
+    if (this.map) {
+      this.map.invalidateSize(true);
+      this.fitBounds();
+    }
+  };
+}
+