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.");
});
};
