Cross-wired zoom and layer issues on inline maps

[jywarren]

Hi, sorry, i'm just noticing some oddness with the unearthing layer here:

https://publiclab.org/wiki/onecranston#location

It seems that the zooming and layer loading are a little cross-wired. Like, i zoom but the unearthing layer doesn't. Could this have something to do with this PR, or something else we recently changed? cc @crisner as well -- thank you!

Originally posted by @jywarren in #7371 (comment)

[crisner]

The unearthing layer zooms well when I zoom on the map. However, I had issues with zooming the map. It is because two baselayers are loaded on the tile pane causing conflict.
One from here,

plots2/app/assets/javascripts/leaflet_helper.js

Line 98 in 3bffa3b

L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png').addTo(map) ;

And one from within LEL which defaults to using a default baselayer if one is not passed in.

plots2/app/assets/javascripts/leaflet_helper.js

Lines 105 to 107 in 3bffa3b

	L.LayerGroup.EnvironmentalLayers({
	include: layers,
	}).addTo(map);

We could remove line 98 from the leaflet_helper.js file and let LEL default to the baselayer within it. But there is an issue with relying on the default baselayer when using multiple maps in a page in the version of LEL used here. The next version has the fix. The other fix is passing in the baselayers as done here:

plots2/app/views/map/map.html.erb

Lines 92 to 104 in 3bffa3b

	var baseLayer = L.tileLayer(
	"https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png",
	{
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}
	).addTo(map);
	L.LayerGroup.EnvironmentalLayers({
	// baseLayers: {
	// 'Gray-scale': baselayer
	// },
	// include: layersname,

P.S: The lines are commented out because the correct variable name for the baselayer was not passed in causing a reference error.

[crisner]

This is a gif of the issue on localhost which is what I encountered when I checked out the inline map in https://publiclab.org/wiki/onecranston#location. This is the same as issue#376.

Depending on how we decide to proceed with this we could use this fix below until we bump LEL. Here's the gif after the fix:

Changing the lines:
1)

plots2/app/assets/javascripts/leaflet_helper.js

Line 98 in 505e13f

L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png').addTo(map) ;

to

var baselayer = L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png').addTo(map) ;

plots2/app/assets/javascripts/leaflet_helper.js

Lines 105 to 107 in 505e13f

	L.LayerGroup.EnvironmentalLayers({
	include: layers,
	}).addTo(map);

to

L.LayerGroup.EnvironmentalLayers({
        baseLayers: {
          'Gray-scale': baselayer
        },
         include: layers,
      }).addTo(map);

plots2/app/assets/javascripts/leaflet_helper.js

Lines 132 to 134 in 505e13f

	L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map) ;

to

var baselayer = L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

plots2/app/assets/javascripts/leaflet_helper.js

Lines 141 to 143 in 505e13f

	L.LayerGroup.EnvironmentalLayers({
	hash: !!sethash,
	}).addTo(map);

to

L.LayerGroup.EnvironmentalLayers({
        baseLayers: {
         'Gray-scale': baselayer
        },
          hash: !!sethash,
      }).addTo(map);

@nstjean, was looking over the baselayer issue and has confirmed that her changes work with the new LEL version. publiclab/leaflet-environmental-layers#376 (comment)

[nstjean]

Yes, we will be removing those baselayers in plots2 as soon as the newest LEL version is in plots2!

[jywarren]

Hi all, what do you think our schedule is for a new LEL? We could push one through by mid-day today? cc @emilyashley on this fix, just so you see the full lifecycle of a bug => fix => publication, which should be pretty fast!

Thanks, all!

[jywarren]

Great, is this closed now?

[nstjean]

Should be fixed with the new LEL, not sure if you want to close it now or wait!

[nstjean]

This is all fixed with LEL updated!