- Issue created by @ludo.r
- 🇮🇹Italy itamair
Complex (depending on the Leaflet plugin to add) ... but not impossible, I guess.
I didn't try so far such a thing ...First of all I wouldn't say "replace" but simply implement the Leaflet Popup plugin you want, probably in the following way:
1. don't enable any Leaflet Popup throughout this Leaflet View (or Formatter) settings ...
2. use the 'leafletMapInit' (or the same 'leaflet.map') event, defined here:
and available once the Leaflet Map is loaded, to interact with the Leaflet Map itself (data.lMap) and its markers (data.markers) adding your code (and new Leaflet Popup plugin or whatever else) the way you prefer ...Of course you should be able to properly manage Leaflet JS library and its js coding practices ...
As further hint, something similar (additional interaction with loaded Leaflet Map, and its markers) is being done in the Leaflet module demo map itself, here: https://www.geodemocracy.com/drupal_geofield_stack_demo/web/geoplaces-ma...
to make the list of right sidebar Locations interacting with the main Leaflet map in the page.
Check out the instructions below the righter itself and in particular look at the additional js file implementing all that (throughout the Drupal.behaviors.geofieldMapLeafletMapInteraction) from here:
https://www.geodemocracy.com/drupal_geofield_stack_demo/web/modules/cust...Hope all this helps (to better help yourself and find your specific way).
- 🇧🇪Belgium ludo.r Brussels
Thanks for the help, I managed to do it by extending the leaflet prototype:
/** * @file JavaScript */ (function ($, Drupal, drupalSettings, L) { Drupal.behaviors.MapLeafletInteraction = { attach: function (context, settings) { if (typeof Drupal.Leaflet !== 'undefined' && typeof Drupal.Leaflet.prototype.create_feature !== 'undefined') { // Save the original function that we will override. var originalCreateFeature = Drupal.Leaflet.prototype.create_feature; // Override the original create_feature function. Drupal.Leaflet.prototype.create_feature = function (feature) { // Call the original function. var lFeature = originalCreateFeature.call(this, feature); // Add sidebar to the lFeature. this.feature_bind_sidebar(lFeature, feature); return lFeature; }; /** * Add sidebar feature to the Leaflet Feature. * * @param lFeature * @param lFeature * The Leaflet Feature * @param feature * The Feature coming from Drupal settings. */ Drupal.Leaflet.prototype.feature_bind_sidebar = function(lFeature, feature) { let entity_id = feature.entity_id; lFeature.on('click', function(e) { loadNodeContent(entity_id); }); }; } } }; function loadNodeContent(entity_id) { const endpoint = `/ajax-view/node/${entity_id}/overview/en?_wrapper_format=drupal_ajax`; const ajaxSettings = { url: endpoint, event: 'click', // This event type is required but won't be used progress: { type: 'throbber' }, wrapper: '#map-sidebar' // Target div selector }; // Create a new Drupal.ajax instance and execute it immediately. const ajax = new Drupal.ajax(ajaxSettings); ajax.execute(); } })(jQuery, Drupal, drupalSettings, L);
And I have a custom controller that returns the response.
Automatically closed - issue fixed for 2 weeks with no activity.