I have setup a view with a list of nodes. The title is a link that opens the full node which contains a leaflet map. When it loads the map I get the following error in the console:

Uncaught Error: Map container is already initialized.

If i close the Ajax modal (colorbox node or auto-dialog) I can not reload / open that particular link without a full refresh of the page. I can remove the map from the display of the node and it loads and reloads fine (also the map loads fine on a normal page).

About a third of the time when a modal window is opened the error message will rapidly repeat to well over 200 time within a few seconds.

The center and bounds are not reset for each map. (marker is sometime loaded outside of the map window with only a portion of tiles showing)

I am using the leaflet 1.0 version.

Is there a way to get this working?

CommentFileSizeAuthor
#14 leaflet-ajax-error-2808957-14.patch466 bytesblasoliva
#12 Capture-geofield.PNG7.26 KBldwyer
#6 leaflet-ajax-error-2808957-6.patch441 byteselimw
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kenton.r created an issue. See original summary.

kenton.r’s picture

kenton.r CreditAttribution: kenton.r commented

I have found some references to AJAX calling multiple calls for the one page load. Therefore JSs can be processed multiple times and cause errors. This might be why the "map container is already being initialized."

This is what I found at http://codekarate.com/blog/drupal-7-prevent-duplicating-javascript-behav...:

Drupal 7 integrates the Jquery Once plugin into Drupal 7 core. This plugin adds a simple class to the HTML element to ensure that the behavior is only processed one time. Here is how we would modify our JavaScript to work with the Jquery Once plugin.

(function ($) {
  Drupal.behaviors.myCustomJS = {
    attach: function(context, settings) {
      $('h3.slider-trigger').once('myslider', function() {
        $('h3.slider-trigger').click(function(){
          $('.slider').slideToggle();
        });
      });
    }
  };
})(jQuery);

This JavaScript will now add a myslider-processed class to the h3 slider-trigger element to ensure the Jquery Click handler is only added one time.

where can I add this to the leaflet.drupal.js

$("#leaflet-map").once('map', function() {

Any help with this?

kenton.r’s picture

kenton.r CreditAttribution: kenton.r commented

Any help with understanding what is happening with this error?

aprogs’s picture

aprogs CreditAttribution: aprogs commented

Confirming the bug. I have the page with the map and some links that make AJAX requests. The error appears when the user clicks the link. It seems that the map gets initialized multiple times when AJAX framework attaches Drupal behaviours.

Tested with Leaflet 1.0.1.

facettenreich’s picture

facettenreich CreditAttribution: facettenreich commented

Had same issue. The change of container._leaflet in container.leaflet_id in file leaflet_markercluster.drupal.js (same lines are used in leaflet.drupal.js) worked for me.

        // skip to the next iteration if the map already exists
        var container = L.DomUtil.get(this.mapId);
        if (!container || container._leaflet_id) {
          return false;
        }

Maybe it helps you, too.

elimw’s picture

elimw CreditAttribution: elimw commented
Status: Active » Needs review
FileSize
leaflet-ajax-error-2808957-6.patch441 bytes

Hi guys,

I've just created a patch for this issue and it works for me.

Can somebody please review it?

aprogs’s picture

aprogs CreditAttribution: aprogs commented

@ewong-dh, thanks for the patch, it has been successfully applied and the bug was solved for me.

ericdsd’s picture

ericdsd CreditAttribution: ericdsd commented

I had the same issue when re submitting exposed filter on my leaflet view,
the patch leaflet-ajax-error-2808957-6.patch + manually applying the same modifications to leaflet_markercluster.drupal.js fixed the issue

Thanks a lot

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer at flink commented

This patch is already part of 7.x-1.x-dev.
It was applied 13 Jan: https://www.drupal.org/node/1222714/commits
It is also in Leaflet Markercluster 7.x-1.x-dev

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer at flink commented
Assigned: Unassigned » RdeBoer
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ldwyer’s picture

ldwyer CreditAttribution: ldwyer as a volunteer commented
FileSize
Capture-geofield.PNG7.26 KB

Hello - this appears to still be an issue even with the patch.

I have a calendar view that opens events in a colorbox. The colorbox displays the [rendered_entity] of the event content type.

I get two of these errors: Uncaught Error: Map container is already initialized.

Once when the calendar view loads and once when I try to open an event in the colorbox.

I am using Drupal 7.5.6, Libraries Leaflet 1.0.2 and Leaflet Marker Cluster 1.1.0 and the latest modules of both Leaflet and Leaflet Marker Cluster (patch is already there).

Attached is how the map renders on first load.

Any light anyone can shed on this would be greatly appreciated. Thanks in advance.

zorax’s picture

zorax
Primary language French
Location Monoblet
CreditAttribution: zorax commented

I have the same error message.
I have two views in the same page.
When I change a contextual filter in my first view here is the console error message :
leaflet.js?p3w10x:6 Uncaught Error: Map container is already initialized.
at e._initContainer (leaflet.js?p3w10x:6)
at e.initialize (leaflet.js?p3w10x:6)
at new e (leaflet.js?p3w10x:6)
at Object. (leaflet.drupal.js?p3w10x:20)
at Function.each (jquery.js?v=1.8.3:611)
at $.fn.init.each (jquery.js?v=1.8.3:241)
at Object.attach (leaflet.drupal.js?p3w10x:6)
at Object. (drupal.js?p3w10x:76)
at Function.each (jquery.js?v=1.8.3:605)
at Object.Drupal.attachBehaviors (drupal.js?p3w10x:74)
_initContainer @ leaflet.js?p3w10x:6
initialize @ leaflet.js?p3w10x:6
e @ leaflet.js?p3w10x:6
(anonymous) @ leaflet.drupal.js?p3w10x:20
each @ jquery.js?v=1.8.3:611
each @ jquery.js?v=1.8.3:241
attach @ leaflet.drupal.js?p3w10x:6
(anonymous) @ drupal.js?p3w10x:76
each @ jquery.js?v=1.8.3:605
Drupal.attachBehaviors @ drupal.js?p3w10x:74
insert @ ajax.js?v=7.56:570
Drupal.ajax.success @ ajax.js?v=7.56:428
success @ ajax.js?v=7.56:189
options.success @ jquery.form.js?v=4.2.1:267
fire @ jquery.js?v=1.8.3:974
fireWith @ jquery.js?v=1.8.3:1084
done @ jquery.js?v=1.8.3:7803
callback @ jquery.js?v=1.8.3:8518
XMLHttpRequest.send (async)
send @ jquery.js?v=1.8.3:8434
ajax @ jquery.js?v=1.8.3:7986
$.fn.ajaxSubmit @ jquery.form.js?v=4.2.1:326
Drupal.ajax.eventResponse @ ajax.js?v=7.56:279
(anonymous) @ ajax.js?v=7.56:206
dispatch @ jquery.js?v=1.8.3:3058
eventHandle @ jquery.js?v=1.8.3:2676
trigger @ jquery.js?v=1.8.3:2941
(anonymous) @ jquery.js?v=1.8.3:3599
each @ jquery.js?v=1.8.3:611
each @ jquery.js?v=1.8.3:241
trigger @ jquery.js?v=1.8.3:3598
jQuery.fn.(anonymous function) @ jquery.js?v=1.8.3:3652
triggerSubmit @ auto-submit.js?p3w10x:42
(anonymous) @ auto-submit.js?p3w10x:55
dispatch @ jquery.js?v=1.8.3:3058
eventHandle @ jquery.js?v=1.8.3:2676
ListPicker._handleMouseUp

I just install the dev version....

blasoliva’s picture

blasoliva CreditAttribution: blasoliva commented
FileSize
leaflet-ajax-error-2808957-14.patch466 bytes

Last patch does not work for me and the page is still not redirecting. I added a third condition for the iteration when the map already exists.