Leaflet – Addressing and Solving the Multiverse Issue in Leaflet

leaflet

I hope someone can lend some insight here. My customer is complaining about what he calls the "multiverse" issue in Leaflet.

I apologize if I'm not using the right words to describe the problem.

As everyone knows, in leaflet you can scroll right/left on the map giving the appearance that you are "scrolling around the world"…however, each world map to the left and right are actually independently mapped using a continuum of longitudes…

For example, this picture shows (roughly) three earths:

The left one from -540 to -180, middle from -180 to 180, right from 180 to 540.

And note the pin on the middle earth doesn't show on the left or right earths.

Is there any reasonable way to eliminate the "multiverse" feature (shy of replicating all of the elements N number of times)?

Best Answer

There are some options mentioned in the options for the Map object.

Set maxBounds with a longitude range of -180, 180
- maxBoundsViscosity can be used to control the behaviour of panning at the edges
Set worldCopyJump to True

Related Solutions

[GIS] Using Google Tiles on LeaftLet

As such we don't answer Legal questions, but here is some history which might help you see how Google sees these things.

OpenLayers too, shows the Google Map in a similar way. The OpenLayers code acts as a wrapper around the Google Maps API, and shows the layer in a appropriate way.

Google's Employees reached out to the OpenLayers developers and gave express permission for this.

You have to ask yourself, if Google felt that this wasn't against the T&C, why did they write:

...consider this email the "written consent" that you need from us to continue using the Google Maps APIs in OpenLayers.

My reading of this whole exchange is that Google considers that these kinds of things break their T&C and unless they give a similar written permission to the LeafLet plugin, you really aren't in the clear.

[GIS] Change marker color based on GeoJSON filter in Leaftlet

here is a rough, general approach, with a few code examples (using jQuery/javascript):

Set up a couple of color styles for the markers (using circle markers here)

var blueMarker = {
  radius: 8,
  fillColor: "#0000ff"
};

var redMarker = {
  radius: 8,
  fillColor: "#ff0000"
}

Add the geojson features as L.circleMarkers, keeping track of each as a layer for color change. (Assuming here your feature properties have a "name" attribute; change as needed)

var layerlist = {};  
L.geoJson(data, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, blueMarker);
  },
  onEachFeature: function(feature, layer) {  
    layerlist[feature.properties.name]=layer;  
  }
}).addTo(map);

Get the feature name from the input text box (not a plugin here, just regular html form input)
```
// on change or submit
var name = $(input).val();
```
Remove the layer by name
```
map.removeLayer(layerlist[name]);
```

Add the layer by name, and restyle

layerlist[name].addTo(map).setStyle(redMarker);

Best Answer

Related Solutions

[GIS] Using Google Tiles on LeaftLet

[GIS] Change marker color based on GeoJSON filter in Leaftlet

Related Question