Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Misalignment on Dynamic layers using layers control with layers initially turned off #141

Closed
traderboy opened this issue Sep 24, 2013 · 3 comments · Fixed by #142
Closed

Misalignment on Dynamic layers using layers control with layers initially turned off #141

traderboy opened this issue Sep 24, 2013 · 3 comments · Fixed by #142
Milestone
Release Candidate 2

Comments

@traderboy
Copy link

I added 10 Dynamic Layers to a layer control (as overlays) with each layer turned off initially. If I don't pan the map when I first open it, turn on a layer, it's displayed correctly. However, if I open the map page, pan the basemap, then turn on a dynamic layer, the points/polygons are shifted over to the left. Panning/zooming snaps the layer back into the correct place.

If I then turn off the layer, then pan, turn the layer back on, it displays correctly. So it appears to only occur the first time.
@traderboy
Copy link
Author

Here's an example to demonstrate the problem. I tried using leaflet-0.5.1, leaflet-0.6.1 and get the same problem. Open page, pan to the east, then turn on the fire overlay layer. The points are not aligned until you pan or zoom again. I'm using the esri-leaflet.js from the dist folder.

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Layers Control Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body, #map{width: 100%; height: 100%}
</style>
</head>
<body>
    <div id="map" ></div>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src="esri-leaflet.js"></script>
    <script>
        var baseLayer = L.esri.basemapLayer("Streets");
        var map = L.map('map', {
        center: [33.73, -120.99],
        zoom: 8,
        layers: [baseLayer]
        });
        var baseLayers = {
            "Street": baseLayer,
        };
        var fire = L.esri.dynamicMapLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer", {
          opacity : 0.7,
          layers: "0"
        });
        var overlays = {
            "Fire" : fire
        };
        L.control.layers(baseLayers, overlays).addTo(map);
    </script>
</body>
</html>

@patrickarlt
Copy link
Contributor

I'll work on fixing this. Thanks for the example code.

@patrickarlt patrickarlt mentioned this issue Oct 7, 2013
Merged
@patrickarlt
Copy link
Contributor

Closing this since it is fixed in #142.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
Release Candidate 2
Development

Successfully merging a pull request may close this issue.

DynamicMapLayer and identify improvements patrickarlt/esri-leaflet
2 participants
@patrickarlt @traderboy