🎩 What? Why?

There are several problems when trying to override the maps currently:

• The core map assets are loaded after the map element has been created but this is problematic because additional map assets can be added during that block as per the map customization documentation.
• The Leaflet package is loaded several times causing issues with the Here provider with the map customizations. Every time the Leaflet package is loaded, it adds a local version of that library to the file where it is loaded to causing the Here tile layer not to be available in the global L constant.
• The Here tile layer package is not loaded within the Here provider but within the drag_markers.js map controller which is incorrect as we do not want this file to be included for non-Here providers.

This PR fixes the problems by fixing the map assets and the order of inclusion when the map element is created.

In this PR I am also adding a custom map factory within the decidim-dev gem because this file does not need to be bundled to the production applications, this is why I added it to decidim-dev. This is only used to test that the map factory can be customized and is working correctly. This has to be tested end-to-end why it needs its own asset pack.

This fix should be also backported but it is not straight forward as the map inclusion strategy has changed due to Shakapacker. I can work on the backports once this is merged.

📌 Related Issues

• Related to
  • Migrate to Webpacker #7464
  • Fix / Expose createMapController properly to let overriding #9425
  • Switch away from Webpacker to Shakapacker  #10389

Testing

To see the loading error:

• Checkout develop and make sure your development app is up to date
• Within the decidim-dev gem add the following files from this PR:
  • decidim-dev/app/packs/entrypoints/decidim_dev_test_custom_map.js
  • decidim-dev/app/packs/src/decidim/dev/test/custom_map_factory.js
• Register this new pack within the assets.rb configuration of the decidim-dev gem (as in this PR)
• Configure your application to use Here maps
  • config.maps = { provider: :here, api_key: "12345" } within the Decidim initializer
• Add the following snippet (see below) to the index page of proposals and visit that page
• See errors in the developer console

The snippet to use the custom map within the proposals index page (for instance):

<%= dynamic_map_for type: "custom", markers: [{ title: "Test 1", latitude: 41.385063, longitude: 2.173404 }], popup_template_id: "custom-popup" do %>
  <% append_javascript_pack_tag("decidim_dev_test_custom_map") %>
  <template id="custom-popup">
    <div>
      <h3>${title}</h3>
    </div>
  </template>
<% end %>

After this error is solved as per this PR, reload that page and see the map working correctly without errors. Note that you may have to adjust the content security policy depending on your map configuration.

Also after this PR is applied, you should see a couple of paragraphs of text added to the bottom of the page where the map is added to indicate that the map customization is working correctly. There is a spec added in this PR to test that for both OSM and Here.

The added system spec to the decidim-dev gem is testing this exact case for both OSM and Here.

📷 Screenshots

This is a screenshot of the developer console when trying to load the custom map:

In text format for easier searching:

jquery.js:3783 Uncaught TypeError: L.TileLayer.HERE is not a constructor
    at push.../decidim-core/app/packs/src/decidim/vendor/leaflet-tilelayer-here.js.L.tileLayer.here (leaflet-tilelayer-here.js:211:1)
    at HTMLDivElement.<anonymous> (here.js:13:1)
    at HTMLDivElement.dispatch (jquery.js:5135:1)
    at elemData.handle (jquery.js:4939:1)
    at Object.trigger (jquery.js:8619:1)
    at HTMLDivElement.<anonymous> (jquery.js:8697:1)
    at Function.each (jquery.js:383:1)
    at jQuery.fn.init.each (jquery.js:205:1)
    at jQuery.fn.init.trigger (jquery.js:8696:1)
    at HTMLDivElement.<anonymous> (map.js:29:1)