Plots2: Sidebar map layers not working

[crisner]

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

The sidebar map can't seem to find the overlay maps.

What did you expect to see that you didn't?

Expected to see layer data on the map. It throws the following error instead:
Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at stamp (LeafletEnvironmentalLayers.js:12112) at NewClass.removeLayer (LeafletEnvironmentalLayers.js:18597) at NewClass.onRemove (LeafletEnvironmentalLayers.js:29442) at NewClass.removeLayer (LeafletEnvironmentalLayers.js:18602) at NewClass._onInputClick (LeafletEnvironmentalLayers.js:17205) at HTMLInputElement.handler (LeafletEnvironmentalLayers.js:14320)

Please show us where to look

https://publiclab.org/notes/warren/11-16-2019/mashapaug-pond

What's your PublicLab.org username?

christie_reni

This can help us diagnose the issue:

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[crisner]

@nstjean, do you have any idea what the problem could be? The other maps in the page seem to be working.

[nstjean]

I wonder if it is also caused by this issue:
https://github.com/publiclab/plots2/issues/7346

[crisner]

I wonder. The issue was reported on 25th. The map was working fine then.

[nstjean]

Hmm. Maybe it was because I moved the map dependencies to the header? I'll take a look and see if I can narrow it down.

[crisner]

Great! We also seem to be missing these scripts from the header:

<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>

I am assuming we are getting the following error because of that:
Uncaught ReferenceError: HeatmapOverlay is not defined

[nstjean]

So it looks like it's not (just) the sidebar maps, the same error is with inline maps too: https://stable.publiclab.org/wiki/inline-maps

I'll add those references to the map dependencies. I'm not sure how we weren't getting the error before!

[crisner]

The layers seem to be working fine in the inline maps though. It is only throwing the 'HeatmapOverlay' error.

[nstjean]

Oh wow. I added them and I'm getting a Cannot read property '_layerAdd' of undefined and it's loading everything in the maps at once.

[nstjean]

The layers seem to be working fine in the inline maps though. It is only throwing the 'HeatmapOverlay' error.

Oh I see what you're saying. I checked, I can get the layers to load in the sidebar on that page?

[crisner]

The inline maps are set to add everything at once. We can turn that off by not using include. We would have options to turn that off when we bump LEL version here. Not sure why we are getting the 'undefined' error.

[crisner]

So the sidebar works for you?

[nstjean]

Ahh ok.

It does... sort of. It's showing the layers but throwing a lot of errors. There is definitely something weird interacting, and I suspect it's the popup() error. I'll have to take the code apart to tell. I'll dig into it.

[crisner]

This is what I am getting. The markers don't show up for me.

You may be right. It could be the popup() error interfering.

[nstjean]

Now it's not working for me either. Very odd.

[crisner]

By the way, it doesn't look like all the layers on these maps in https://github.com/publiclab/plots2/issues/7381#issuecomment-579776828 were included. It shouldn't load all the layers.

[nstjean]

I'll take a closer look at that too.

[nstjean]

Ok I'm ignoring the heatmap includes right now, because that causes more errors that need fixing.

The popover error seems to be affected by where in the layout the mapDependencies are included... specifically this dependency for LEL:
https://github.com/publiclab/plots2/blob/fdc44a4d06ff605cd8d8d5435b56e6ecea2fdbc4/app/views/map/_mapDependencies.html.erb#L6

Here is the line in the code that seems to be the breaking point:
https://github.com/publiclab/plots2/blob/fdc44a4d06ff605cd8d8d5435b56e6ecea2fdbc4/app/views/wiki/show.html.erb#L41
If I include the dependencies above that line I get popover errors in this line of code:
https://github.com/publiclab/plots2/blob/fdc44a4d06ff605cd8d8d5435b56e6ecea2fdbc4/app/views/like/_like.html.erb#L205-L207

But if I include the dependencies below that point the sidebar map works perfectly with no errors.

I'm going to continue to pull it apart.

[nstjean]

Traced the issue down to setupInlineLEL, these lines:
https://github.com/publiclab/plots2/blob/027b7c293edfbf3688146820361f2ff7cfc83e83/app/assets/javascripts/leaflet_helper.js#L105-L107

[nstjean]

Digging into LEL code...
The error happens on this line:
https://github.com/publiclab/leaflet-environmental-layers/blob/c69ad9a84b99734dc394b9ad34b6c23b3b67fb47/src/AllLayers.js#L220
And specifically only with toxicReleaseLayer (so far that I can tell) and only when it is on the screen. If that layer triggers whatever-it-is error, then no other maps will work right either, including sidebar maps.

I will take a look at why that particular layer is different from the others.

[crisner]

Some layers seem to be creating a script tag with jquery('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') as its source and this is being appended to the head of the HTML file the source lives in. This seems to be creating a conflict here in plots2 just as the mapDependencies did. Here are the lines from one of the layers:
https://github.com/publiclab/leaflet-environmental-layers/blob/c69ad9a84b99734dc394b9ad34b6c23b3b67fb47/src/pfasLayer.js#L44-L46

Addressing this issue would solve the jquery related errors popping up in pages that contain maps.

The layers that create a new script tag for jquery are:

• pfasLayer.js
• toxicReleaseLayer.js
• osmLandfillMineQuarryLayer.js
• googleSpreadsheetLayer.js

[crisner]

The issue with the layers in the sidebar map seems to be because the map dependencies were removed. Adding it back seems to work but is not an option as we would encounter the same issues for which it was removed to begin with. Looking for ways to make it work.

[crisner]

So, it looks like the people map and the side map have no issues with adding layers to the view when they are the only maps on the page.

• https://publiclab.org/notes/joyofsoy/10-04-2019/introduction-to-cranston-print-works
• https://stable.publiclab.org/people#lat=22.9&lon=-77.7&zoom=2&layers=Grey-scale

But when there are multiple maps they can't seem to get the map dependencies.

• https://publiclab.org/notes/warren/11-16-2019/mashapaug-pond
• https://stable.publiclab.org/wiki/inline-maps

It throws the following error.

LeafletEnvironmentalLayers.js:12112 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined
at stamp (LeafletEnvironmentalLayers.js:12112)
at NewClass.removeLayer (LeafletEnvironmentalLayers.js:18597)
at NewClass.onRemove (LeafletEnvironmentalLayers.js:29442)
at NewClass.removeLayer (LeafletEnvironmentalLayers.js:18602)
at NewClass._onInputClick (LeafletEnvironmentalLayers.js:17205)
at HTMLInputElement.handler (LeafletEnvironmentalLayers.js:14320)

The dependencies are global now. So, it is weird that it is not working.

[crisner]

I have created this issue #372 to address the jquery related errors that are coming from duplicate script tags that link to a jquery source. I am not getting errors when using LEL in an HTML file even though the script tags are duplicated. Are we getting the errors here because Ruby doesn't like source file links to be repeated? or could it be some other plugin that has issues with this? @jywarren would like your thoughts on this issue as well.

I think we shouldn't be having the same script repeated in LEL anyway. My approach at fixing this would be to check if jquery exists and let the layer dynamically append the script only if it does not find the script linking to the source. What do you think?

[nstjean]

Nice catch!! I think we do need to address this in LEL like you posted.

Why are layers adding dependencies anyways? Shouldn't that be something that is added globally in LEL? We'd still have to do the check if it already existed, but I feel like it shouldn't be something that the layers themselves are doing.

[nstjean]

LeafletEnvironmentalLayers.js:12112 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined

Because the sidebar maps are working when there's no inline maps I feel pretty confident that when we fix the dependency error in LEL it will also fix this. At the very least I think we should wait until the other issue is fixed.

[crisner]

Yes. I am working on the fix in LEL.

[crisner]

We are having the same issues on top maps as well. Check here: https://publiclab.org/wiki/onecranston#location
I guess they are connected.
https://github.com/publiclab/plots2/blob/dee871eb20eedf78cf6b01a5e9c7b2c5446de9eb/app/views/sidebar/_related.html.erb#L46-L50

[nstjean]

I'm not surprised, they are all using the same code. Hopefully this fix will solve it all.

[nstjean]

LEL has been updated to 2.2.1 and bad news... still getting errors on map pages on local:

I'll be digging into it to see what's going on.

[crisner]

😟 The jQuery errors are because the fix is not in the published version yet. Not sure about the blurred location. About the toxic release layer, there is some issue with their API. We can ignore TRI for now.

[nstjean]

Ok. I'm making small changes to make everything work properly from 2.2.1. Obviously we're going to have to make another new version of LEL soon to make sure we get the rest of those fixes! But it's looking good on my computer. PLpeople is throwing some errors, but it is mostly working which is lovely!

[nstjean]