2

I'm using meteor.js and leaflet.js to build a simple application that displays kml polygons on an openstreetmaps layer. I can get the polygons to display fine, but during a zoom operation the polygons move, which is particularly disorienting for users on a mobile pinch-to-zoom device.

Single points do not have this issue. Can anyone point me in the right direction?

A copy of my code is running at newmaps.meteor.com

Please be patient, the dev meteor server is slow to load. You will see a map with a polygon and a marker, note the difference in behaviour between polygon and marker during a zoom operation.

EDIT: replaced site with a non-minified version. map.js is as follows:

    // on startup run resizing event

Meteor.startup(function () {
    $(window).resize(function () {
        $('#map').css('height', window.innerHeight - 44);
    });
    $(window).resize(); // trigger resize event
});


var numMaps;
var currentMapLayer;
var map;

var info;
Session.set("mapName", "Map01");

Template.map.onRendered(function()
{
    $(window).resize(); // trigger resize event
    map.invalidateSize();
});



function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: 'blue' //getColor(feature.properties.density)
    };
}

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);
}

function resetHighlight(e) {
    currentMapLayer.resetStyle(e.target);
    info.update();
}

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: function(e){resetHighlight(e);highlightFeature(e);}
        //click: zoomToFeature
    });
}

Template.map.rendered = function () {
    L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images';


    //var map = L.map('map', {
    //    doubleClickZoom: false,
    //}).setView([-27.974467340930417, 153.36855959147215], 14);

    map = L.map('map').setView([-27.974467340930417, 153.36855959147215], 14);

    console.log("RENDER");

    L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);


    // control that shows state info on hover
    info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>Details</h4>' + (props ?
            '<b>' + props.name + '</b><br />' + props.description
                : 'Tap on a property');
    };

    info.addTo(map);

    //polygon.getBounds().getCenter();

    /*
     geojson = L.geoJson(statesData, {
     style: style,
     onEachFeature: onEachFeature
     }).addTo(map);
     */



    Meteor.startup(function () {

        if(currentMapLayer) map.removeLayer(currentMapLayer);

            map.setView([51.505, -0.09], 13);

            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

            L.circle([51.508, -0.11], 500, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
            }).addTo(map).bindPopup("I am a circle.");

            L.polygon([
                [51.509, -0.08],
                [51.503, -0.06],
                [51.51, -0.047]
            ]).addTo(map).bindPopup("I am a polygon.");



    });

};
3
  • The code running on your website has been bundled up into a big ball that's pretty hard to decipher. It might be useful to post your original script (or at least the Leaflet portion of it) here so we can help you better. Oct 22, 2015 at 15:51
  • Agreed with @nathansnider. Might also be something with the 1.0-dev version of leaflet you're using? Oct 23, 2015 at 17:38
  • Thanks nathan and Derek. I have re-uploaded the site without minifying, the file that handles the maps is map.js
    – mp035
    Oct 24, 2015 at 0:52

2 Answers 2

2

It might be too late, but it looks like the CSS does not match the JS version?

Your JS says "Leaflet 1.0-dev (46d2d6a) … version: '1.0-dev'" which matches Leaflet 1.0 beta 1.

Your CSS seems to correspond to Leaflet 0.7.4 (e.g. it does not have .leaflet-map-pane svg or .leaflet-map-pane canvas

1
  • 1
    I can confirm this behavior. This happened to me when I mixed tutorials using different version, using the out-of-date CSS can be a cause of moving layers during pan and zoom. Jan 17, 2017 at 15:24
0

The code handling positioning of vector renderers has gone through several modifications very recently, see e.g. https://github.com/Leaflet/Leaflet/issues/3919.

Your best bet is to update your webpage to use Leaflet 1.0.0-beta2 instead of a your beta1 build.

1
  • Beta 2 did not fix it, but I modified the package to downgrade to leafletjs 0.7.4 which solved the problem.
    – mp035
    Nov 4, 2015 at 2:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.