decidim-decidim_awesome 0.6.6 → 0.8.0

data/app/packs/src/decidim/decidim_awesome/awesome_map/awesome_map.js

@@ -0,0 +1,130 @@
+import * as L from "leaflet";
+import "src/decidim/map/icon.js" // comes with Decidim
+import "src/decidim/vendor/leaflet-tilelayer-here"
+import "leaflet.markercluster"; // Comes with Decidim
+import "leaflet.featuregroup.subgroup" // included in this package.json
+import "src/vendor/jquery.truncate"
+import "jsrender"
+
+import ControlsUI from "src/decidim/decidim_awesome/awesome_map/controls_ui";
+import ProposalsController from "src/decidim/decidim_awesome/awesome_map/controllers/proposals_controller";
+import MeetingsController from "src/decidim/decidim_awesome/awesome_map/controllers/meetings_controller";
+
+export default class AwesomeMap {
+  constructor(map, config) {
+    this.map = map;
+    this.categories = window.AwesomeMap && window.AwesomeMap.categories || []
+    this.config = $.extend({
+      length: 255,
+      center: null,
+      zoom: 8,
+      menu: {
+        amendments: false,
+        meetings: false,
+        categories: true,
+        hashtags: false,
+        mergeComponents: false
+      },
+      show: {
+        withdrawn: false,
+        accepted: false,
+        evaluating: false,
+        notAnswered: false,
+        rejected: false
+      },
+      hideControls: false,
+      collapsedMenu: false,
+      components: []
+    }, config);
+    this.layers = {};
+    this.cluster = new L.MarkerClusterGroup();
+    this.map.addLayer(this.cluster);
+    this.controls = new ControlsUI(this);
+    this.allMarkers = [];
+    this.onFinished = () => {};
+    this.controllers = {};
+    this.loading = [];
+    this._firstController = {};
+  }
+
+  // Queries the API and load all the markers
+  loadControllers() {
+    this.autoResize();
+    this.controls.attach();
+
+    this.config.components.forEach((component) => {
+      const controller = this._getController(component);
+      if (controller) {
+        controller.loadNodes();
+        this.loading.push(component.type);
+        controller.onFinished = () => {
+          this.loading.pop();
+          this.autoResize();
+
+          if (this.loading.length == 0) {
+            this.controls.$loading.hide();
+            // call trigger as all loads are finished
+            this.onFinished();
+          }
+        };
+      }
+    });
+  }
+
+  autoResize() {
+    // Setup center/zoom options if specified, otherwise fitbounds
+    const bounds = this.cluster.getBounds()
+    if (this.config.center && this.config.zoom) {
+      this.map.setView(this.config.center, this.config.zoom);
+    } else if (bounds.isValid()) {
+      // this.map.fitBounds(bounds, { padding: [50, 50] }); // this doesn't work much of the time, probably some race condition
+      this.map.fitBounds([[bounds.getNorth(), bounds.getEast()], [bounds.getSouth(), bounds.getWest()]], { padding: [50, 50] });
+    }
+  }
+
+  getCategory(category) {
+    let defaultCat = {
+      color: getComputedStyle(document.documentElement).getPropertyValue("--primary"),
+      children: () => {},
+      parent: null,
+      name: null
+    };
+
+    if (category) {
+      let id = category.id
+        ? parseInt(category.id, 10)
+        : parseInt(category, 10);
+      let cat = this.categories.find((c) => c.id == id);
+      if (cat) {
+        cat.children = () => {
+          return this.categories.filter((c) => c.parent === cat.id);
+        }
+        return cat;
+      }
+    }
+    return defaultCat;
+  }
+
+  _getController(component) {
+    let controller;
+
+    if (component.type == "proposals") {
+      controller = new ProposalsController(this, component);
+    }
+    if (component.type == "meetings" && this.config.menu.meetings) {
+      controller = new MeetingsController(this, component);
+    }
+
+    if (controller) {
+      // Agrupate layers for controlling components
+      if (this._firstController[component.type] && this.config.menu.mergeComponents) {
+        controller.controls = this._firstController[component.type].controls;
+      } else  {
+        controller.addControls();
+      }
+      this._firstController[component.type] = this._firstController[component.type] || controller;
+      this.controllers[component.type] = controller;
+      return this.controllers[component.type]
+    }
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/controller.js

@@ -0,0 +1,112 @@
+import * as L from "leaflet";
+
+export default class Controller {
+  constructor(awesomeMap, component) {
+    this.awesomeMap = awesomeMap;
+    this.component = component;
+    this.templateId = "marker-meeting-popup";
+    this.controls = {
+      label: this.getLabel(),
+      group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+    };
+    this.onFinished = () => {};
+    this.allMarkers = [];
+
+  }
+
+  getLabel() {
+    let text = this.awesomeMap.config.menu.mergeComponents || !this.component.name 
+      ? window.DecidimAwesome.texts[this.component.type]
+      : this.component.name;
+    return `<span class="awesome_map-component" id="awesome_map-component_${this.component.id}" title="0" data-layer="${this.component.type}">${text}</span>`
+  }
+
+  setFetcher(Fetcher) {
+    this.fetcher = new Fetcher(this);
+    this.fetcher.onFinished = () => {
+      // console.log(`all ${this.component.type} loaded`, this)
+      this._onFinished();
+    };
+  }
+
+  addControls() {
+    this.awesomeMap.controls.main.addOverlay(this.controls.group, this.controls.label);
+    this.awesomeMap.map.addLayer(this.controls.group);
+  }
+
+  loadNodes() {
+    // to override
+  }
+
+  addMarker(marker, node) {
+
+    /* theorically, this should be enough to create popups on markers but looks that there is som bug in leaflet that sometimes prevents this to work
+    let node = document.createElement("div");
+    // console.log("addMarker", marker, "node", node)
+    node.innerHTML = $.templates(`#${this.templateId}`).render(node);
+    marker.bindPopup(node, {
+      maxwidth: 640,
+      minWidth: 500,
+      keepInView: true,
+      className: "map-info"
+    }); */
+
+    marker.on("click", () => {
+      let dom = document.createElement("div");
+      dom.innerHTML = $.templates(`#${this.templateId}`).render(node);
+
+      let pop = L.popup({
+        maxwidth: 640,
+        minWidth: 500,
+        keepInView: true,
+        className: "map-info"
+
+      }).setLatLng(marker.getLatLng()).setContent(dom);
+      this.awesomeMap.map.addlayer(pop);
+    });
+
+    this.controls.group.addLayer(marker);
+
+    this.allMarkers.push({
+      marker: marker,
+      component: this.component,
+      node: node
+    });
+
+    this.addMarkerCategory(marker, node.category);
+    this.addMarkerHashtags(marker, node.hashtags);
+  }
+
+  addMarkerCategory(marker, category) {
+    // Add to category layer
+    const cat = this.awesomeMap.getCategory(category);
+    if (this.awesomeMap.layers[cat.id]) {
+      marker.addTo(this.awesomeMap.layers[cat.id].group);
+      this.awesomeMap.controls.showCategory(cat);
+    }   
+  }
+
+  addMarkerHashtags(marker, hashtags) {
+    // Add hashtag layer
+    if (this.awesomeMap.config.menu.hashtags) {
+      this.awesomeMap.controls.addHashtagsControls(hashtags, marker);
+    }
+  }
+
+  // Override if needed (call this.onFinished() at the end!)
+  _onFinished() {
+    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allMarkers.length);
+    this.onFinished();
+  }
+
+  createIcon(Builder, color) {
+    return new Builder({
+      color: "#000000",
+      fillColor: color,
+      circleFillColor: color,
+      weight: 1,
+      stroke: color,
+      fillOpacity: 0.9
+    });
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/meetings_controller.js

@@ -0,0 +1,31 @@
+import * as L from "leaflet";
+import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
+import MeetingsFetcher from "src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher";
+
+const MeetingIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
+  _createPathDescription: function() {
+    return "M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899";
+  }
+});
+
+export default class MeetingsController extends Controller {
+  constructor(awesomeMap, component) {
+    super(awesomeMap, component)
+    this.templateId = "marker-meeting-popup";
+    this.setFetcher(MeetingsFetcher);
+  }
+
+  loadNodes() {
+    // for each meeting, create a marker with an associated popup
+    this.fetcher.onNode = (meeting) => {
+      let marker = new L.Marker([meeting.coordinates.latitude, meeting.coordinates.longitude], {
+        icon: this.createIcon(MeetingIcon, this.awesomeMap.getCategory(meeting.category).color),
+        title: meeting.title.translation
+      });
+      // console.log("new meeting", meeting, marker)
+      this.addMarker(marker, meeting);
+    };
+
+    this.fetcher.fetch();
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controllers/proposals_controller.js

@@ -0,0 +1,88 @@
+import * as L from "leaflet";
+import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
+import ProposalsFetcher from "src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher";
+
+const ProposalIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
+  options: {
+    fillColor: "#ef604d",
+    fillOpacity: 0.8,
+    strokeWidth: 1,
+    strokeOpcacity: 1
+  }
+});
+export default class ProposalsController extends Controller {
+  constructor(awesomeMap, component) {
+    super(awesomeMap, component)
+    this.templateId = "marker-proposal-popup";
+    this.amendments = {};
+    this.setFetcher(ProposalsFetcher);
+  }
+
+  addControls() {
+    super.addControls();
+
+    // add control layer for amendments if any
+    if (this.awesomeMap.config.menu.amendments && this.component.amendments && !this.awesomeMap.layers.amendments) {
+      this.awesomeMap.layers.amendments = {
+        label: `<span class="awesome_map-component" id="awesome_map-amendments_${this.component.id}" title="0" data-layer="amendments">${window.DecidimAwesome.texts.amendments}</span>`,
+        group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+      }
+      this.awesomeMap.controls.main.addOverlay(this.awesomeMap.layers.amendments.group, this.awesomeMap.layers.amendments.label);
+      this.awesomeMap.layers.amendments.group.addTo(this.awesomeMap.map);
+    }
+  }
+
+  loadNodes() {
+    // for each proposal, create a marker with an associated popup
+    this.fetcher.onNode = (proposal) => {
+      let marker = new L.Marker([proposal.coordinates.latitude, proposal.coordinates.longitude], {
+        icon: this.createIcon(ProposalIcon, this.awesomeMap.getCategory(proposal.category).color),
+        title: proposal.title.translation
+      });
+
+      // Check if it has amendments, add it to a list
+      // also assign parent's proposal categories to it
+      if (proposal.amendments && proposal.amendments.length) {
+        proposal.amendments.forEach((amendment) => {
+          this.amendments[amendment.emendation.id] = proposal;
+        });
+      }
+
+      // console.log("new proposal", proposal, "marker",  marker)
+      this.addMarker(marker, proposal);
+    };
+
+    this.fetcher.fetch();
+  }
+
+  _onFinished() {
+    const iterableAmendments = Object.entries(this.amendments);
+    this.awesomeMap.controls.updateStats(`component_${this.component.id}`, this.allMarkers.length - iterableAmendments.length);
+    this.awesomeMap.controls.updateStats(`amendments_${this.component.id}`, iterableAmendments.length);
+
+    // Process all amendments
+    iterableAmendments.forEach((amendment) => {
+      const marker = this.allMarkers.find((item) => item.node.id == amendment[0]);
+      const parent = amendment[1];
+      // console.log("marker", marker, "parent proposal", parent)
+      // add marker to amendments layers and remove it from proposals
+      if (marker) {
+        try { 
+          marker.marker.removeFrom(this.controls.group) 
+        } catch (e) { 
+          console.error("error removeFrom marker", marker, "layer", this.controls.group,  e);
+        }
+        if (this.awesomeMap.config.menu.amendments) {
+          marker.marker.addTo(this.awesomeMap.layers.amendments.group);
+          // mimic parent category (amendments doesn't have categories)
+          if (parent.category) {
+            marker.marker.setIcon(this.createIcon(ProposalIcon, this.awesomeMap.getCategory(parent.category).color));
+            this.addMarkerCategory(marker.marker, parent.category)
+          }
+        }
+      }
+    });
+
+    this.onFinished();
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/controls_ui.js

@@ -0,0 +1,221 @@
+import * as L from "leaflet";
+
+export default class ControlsUI {
+  constructor(awesomeMap) {
+    this.awesomeMap = awesomeMap;
+
+    this.main = L.control.layers(null, null, {
+      position: "topleft",
+      sortLayers: false,
+      collapsed: this.awesomeMap.config.collapsedMenu
+      // hideSingleBase: true
+    });
+
+    if (this.awesomeMap.config.hideControls) {
+      $(this.main.getContainer()).hide();
+    }
+
+    this.$loading = $("#awesome-map .loading-spinner");
+    this.onHashtag = this._orderHashtags;
+
+    this.awesomeMap.map.on("overlayadd", () => {
+      this.removeHiddenCategories();
+    });
+  }
+
+  attach() {
+    // legends
+    this.main.addTo(this.awesomeMap.map);
+
+    this.addSearchControls();
+    if (this.awesomeMap.config.menu.categories) {
+      this.addCategoriesControls();
+    }
+
+    // sub-layer hashtag title toggle
+    $("#awesome-map").on("click", ".awesome_map-title-control", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $("#awesome_map-categories-control").toggleClass("active");
+      $("#awesome_map-hashtags-control").toggleClass("active");
+    });
+
+    // hashtag events
+    $("#awesome-map").on("change", ".awesome_map-hashtags-selector", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const tag = $(e.target).closest("label").data("layer");
+      // console.log("changed, layer", tag, "checked", e.target.checked, e);
+      if (tag) {
+        this.updateHashtagLayers();
+      }
+    });
+
+    // select/deselect all tags
+    $("#awesome-map").on("click", ".awesome_map-toggle_all_tags", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $("#awesome-map .awesome_map-hashtags-selector").prop("checked", $("#awesome-map .awesome_map-hashtags-selector:checked").length < $("#awesome-map .awesome_map-hashtags-selector").length);
+      this.updateHashtagLayers();
+    });
+  }
+
+  addSearchControls() {
+    $(this.main.getContainer()).contents("form").append(`<div id="awesome_map-categories-control" class="active"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.categories}</b><div class="categories-container"></div></div>
+    <div id="awesome_map-hashtags-control"><b class="awesome_map-title-control">${window.DecidimAwesome.texts.hashtags}</b><div class="hashtags-container"></div><a href="#" class="awesome_map-toggle_all_tags">${window.DecidimAwesome.texts.select_deselect_all}</a></div>`);
+  }
+
+  addCategoriesControls() {
+    this.awesomeMap.categories.forEach((category) => {
+      // add control layer for this category
+      const label = `<i class="awesome_map-category_${category.id}"></i> ${category.name}`;
+      this.awesomeMap.layers[category.id] = {
+        label: label,
+        group: L.featureGroup.subGroup(this.awesomeMap.cluster)
+      };
+      this.awesomeMap.layers[category.id].group.addTo(this.awesomeMap.map);
+      $("#awesome_map-categories-control .categories-container").append(`<label data-layer="${category.id}" class="awesome_map-category-${category.id}${category.parent
+        ? " subcategory"
+        : ""}" data-parent="${category.parent}"><input type="checkbox" class="awesome_map-categories-selector" checked><span>${label}</span></label>`);
+    })
+
+    // category events
+    $("#awesome-map").on("change", ".awesome_map-categories-selector", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const id = $(e.target).closest("label").data("layer");
+      const cat = this.awesomeMap.getCategory(id);
+      // console.log("changed, layer", id, "cat", cat, "checked", e.target.checked, e);
+      if (cat) {
+        const layer = this.awesomeMap.layers[cat.id];
+        if (e.target.checked) {
+          // show group of markers
+          this.awesomeMap.map.addLayer(layer.group);
+        } else {
+          // hide group of markers
+          this.awesomeMap.map.removeLayer(layer.group);
+          // cat.children().forEach((c) => {
+          //   let $el = $(`.awesome_map-category-${c.id}`);
+          //   if($el.contents("input").prop("checked")) {
+          //     $el.click();
+          //   }
+          // });
+        }
+        // if it's a children, put the parent to indeterminate
+        this._indeterminateParentInput(cat);
+        // sync tags
+        this.updateHashtagLayers();
+      }
+    });
+  }
+
+  // Hashtags are collected directly from proposals (this is different than categories)
+  addHashtagsControls(hashtags, marker) {
+    // show hashtag layer
+    if (hashtags && hashtags.length) {
+      $("#awesome_map-hashtags-control").show();
+      hashtags.forEach((hashtag) => {
+        // Add layer if not exists, otherwise just add the marker to the group
+        if (!this.awesomeMap.layers[hashtag.tag]) {
+          this.awesomeMap.layers[hashtag.tag] = {
+            label: hashtag.name,
+            group: new L.FeatureGroup.SubGroup(this.awesomeMap.cluster)
+          };
+          this.awesomeMap.layers[hashtag.tag].group.addTo(this.awesomeMap.map);
+          $("#awesome_map-hashtags-control .hashtags-container").append(`<label data-layer="${hashtag.tag}" class="awesome_map-hashtag-${hashtag.tag}"><input type="checkbox" class="awesome_map-hashtags-selector" checked><span>${hashtag.name}</span></label>`);
+          // Call a trigger, might be in service for customizations
+          this.onHashtag(hashtag, $("#awesome_map-hashtags-control .hashtags-container"));
+        }
+        marker.addTo(this.awesomeMap.layers[hashtag.tag].group);
+
+        const $label = $(`label.awesome_map-hashtag-${hashtag.tag}`);
+        // update number of items
+        $label.attr("title", `${parseInt($label.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+      });
+    }
+  }
+
+  showCategory(cat) {
+    $("#awesome_map-categories-control").show();
+    // show category if hidden
+    const $label = $(`label.awesome_map-category-${cat.id}`);
+    const $parent = $(`label.awesome_map-category-${cat.parent}`);
+    $label.show();
+    // update number of items
+    $label.attr("title", `${parseInt($label.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+    // show parent if apply
+    $parent.show();
+    $parent.attr("title", `${parseInt($parent.attr("title") || 0) + 1} ${window.DecidimAwesome.texts.items}`);
+  }
+
+  removeHiddenComponents() {
+    $(".awesome_map-component").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).data("layer")];
+      const $input = $(el).closest("div").find("input:not(:checked)");
+      if (layer && $input.length) {
+        this.awesomeMap.map.addLayer(layer.group);
+        this.awesomeMap.map.removeLayer(layer.group);
+      }
+    });
+  }
+
+  removeHiddenCategories() {
+    $(".awesome_map-categories-selector:not(:checked)").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
+      if (layer) {
+        this.awesomeMap.map.addLayer(layer.group);
+        this.awesomeMap.map.removeLayer(layer.group);
+      }
+    });
+  }
+
+  updateHashtagLayers() {
+    // hide all
+    $(".awesome_map-hashtags-selector").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
+      if (layer) {
+        this.awesomeMap.map.removeLayer(layer.group);
+      }
+    });
+    // show selected only
+    $(".awesome_map-hashtags-selector:checked").each((_idx, el) => {
+      const layer = this.awesomeMap.layers[$(el).closest("label").data("layer")];
+      if (layer) {
+        this.awesomeMap.map.addLayer(layer.group);
+      }
+    });
+    // hide non-selected categories
+    this.removeHiddenComponents();
+    this.removeHiddenCategories();
+  }
+
+  updateStats(uid, total) {
+    // update component stats
+    const $component = $(`#awesome_map-${uid}`);
+    $component.attr("title", `${total} ${window.DecidimAwesome.texts.items}`);
+  }
+
+  _indeterminateParentInput(cat) {
+    if (cat.parent) {
+      let $input = $(`.awesome_map-category-${cat.parent}`).contents("input");
+      let $subcats = $(`[class^="awesome_map-category-"][data-parent="${cat.parent}"]:visible`);
+      let num_checked = $subcats.contents("input:checked").length;
+      $input.prop("indeterminate", num_checked != $subcats.length && num_checked != 0);
+    }
+  }
+
+  // order hashtags alphabetically
+  _orderHashtags(_hashtag, $div) {
+    let $last = $div.contents("label:last");
+    if ($last.prev("label").length) {
+      // move the label to order it alphabetically
+      $div.contents("label").each((_idx, el) => {
+        if ($(el).text().localeCompare($last.text()) > 0) {
+          $(el).before($last);
+          return false;
+        }
+      });
+    }
+  }
+}

data/app/packs/src/decidim/decidim_awesome/awesome_map/load_map.js

@@ -0,0 +1,51 @@
+import AwesomeMap from "src/decidim/decidim_awesome/awesome_map/awesome_map"
+
+$(() => {
+  const sanitizeCenter = (string) => {
+    if (string) {
+      const parts = string.split(",")
+      if (parts.length >= 2) {
+        const lat = parseFloat(parts[0]);
+        const lng = parseFloat(parts[1]);
+        if (lat && lng) {
+          return [lat, lng];
+        }
+      }
+    }
+  };
+
+  const config = {
+    length: $("#awesome-map").data("truncate") || 254,
+    center: sanitizeCenter($("#awesome-map").data("map-center")),
+    zoom: $("#awesome-map").data("map-zoom"),    
+    menu: {
+      amendments: $("#awesome-map").data("menu-amendments"),
+      meetings: $("#awesome-map").data("menu-meetings"),
+      categories: $("#awesome-map").data("menu-categories"),
+      hashtags: $("#awesome-map").data("menu-hashtags"),
+      mergeComponents: $("#awesome-map").data("menu-merge-components")
+    },
+    show: {
+      withdrawn: $("#awesome-map").data("show-withdrawn"),
+      accepted: $("#awesome-map").data("show-accepted"),
+      evaluating: $("#awesome-map").data("show-evaluating"),
+      notAnswered: $("#awesome-map").data("show-not-answered"),
+      rejected: $("#awesome-map").data("show-rejected")
+    },
+    hideControls: $("#awesome-map").data("hide-controls"),
+    collapsedMenu: $("#awesome-map").data("collapsed"),
+    components: $("#awesome-map").data("components")
+  };
+
+  // build awesome map (if exist)
+  $("#awesome-map .google-map").on("ready.decidim", (evt, map) => {
+    // bindPopup doesn't work for some unknown cause and these handler neither so we're cancelling them
+    map.off("popupopen");
+    map.off("popupclose");
+
+    // console.log("ready map", map);
+
+    window.AwesomeMap = new AwesomeMap(map, config);
+    window.AwesomeMap.loadControllers();
+  });
+});