dynmeth / RaphaelLayer

Raphael overlay for Leaflet maps
MIT License
80 stars 25 forks source link

Problems with geoJSON & Raphael objects in IE 7/8 VML fallback mode #7

Open Sa-Lat opened 11 years ago

Sa-Lat commented 11 years ago

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.