-
Notifications
You must be signed in to change notification settings - Fork 25
Description
Hey,
i'm using leaflet in combination with rlayer and raphael to display some piecharts (example from http://raphaeljs.com/pie.html) and other custom drawings (e.g. circles with numbers) on my map. I draw the map with the rlayer geoJSON function.
IE 7/8 don't support SVG so raphael and leaflet are changing in a vml fallback mode causing some bad behaviours. I don't really don't know if this is a rlayer, leaflet or raphael problem. But i see, that the example is not working with IE 7/8.
The piecharts/markers are displaced and jumping arround while dragging the map. It's really annoying because i have no idea where the problem is located. (Except using the Internet Explorer :D)
part of my plugin:
var layer = new R.GeoJSON(geoJson);
this.layergroup.addLayer(layer);
this.layergroup.addTo(this.map);
bounds = L.geoJson(geoJson).getBounds();
this.map.setMaxBounds(bounds);
this.map.setView(bounds.getCenter(), 8);
layer = new R.Pie(marker.latLng, size, series.values[i], series.labels, "#FFFFFF", thisObj.options.colors, styleOptions);
this.layergroup.addLayer(layer);extended rlayer.js
R.Pie = R.Layer.extend({
initialize: function(latlng, r, values, labels, stroke, colors, options) {
R.Layer.prototype.initialize.call(this, options);
this._latlng = latlng;
this._r = r;
this._values = values;
this._labels = labels;
this._stroke = stroke;
this._options = options;
this._colors = colors;
},
projectLatLngs: function() {
var pie;
if (this._pie) this._pie.remove();
var p = this._map.latLngToLayerPoint(this._latlng);
var zoom = this._map.getZoom();
var minZoom = this._map.getMinZoom();
var dif = (zoom - minZoom) + 1;
if (dif > 1) {
dif = dif - 0.5;
}
pie = this._paper.pieChart(p.x, p.y, this._r * dif, this._values, this._labels,this._colors, this._stroke, this._options);
pie.toFront();
this._pie = pie;
this._set.push(this._pie);
}
});Unfortunately i'm not allowed to show you my page.