dynmeth / raphaellayer Goto Github PK

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.

http://dynmeth.github.io/RaphaelLayer/

On console

Refused to execute script from 'https://raw.github.com/dynmeth/RaphaelLayer/master/dist/rlayer.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 

You should provide the file in the gh-pages branch..

I found that the event handlers for Raphael objects, such as the click, hover, mouseover, etc., do not work with leaflet 1.x.
I found that the reason for this is the style in leaflet.css:
/* marker & overlays interactivity */ .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; }

The style below corrects this error:
.leaflet-overlay-pane > svg path { pointer-events: auto; }

Hi,

I've been using your plugin with Leaflet. I love your work, but it could be better if markers can bind with Popup. I tried to bind the Popup like this:

var point = new L.LatLng(-34.93027490891421, 138.603875041008);
var marker = new R.Marker(point, {'fill':'red','stroke':'blue'});
m.bindPopup("Hello").openPopup();

But it doesn't work. Hope this issue could be solved

Thank you

When I added L.Polyline and R.Marker two SVG containers - each for every layer - are put inside <div class="leaflet-overlay-pane"></div> (called overlayPane)

• file: RaphaelLayer / src / layer / vector / Layer.Raphael.js
  • method _updateRaphaelViewport writes position changes (after e.g. drag&drop on map) to overlayPane
• file: Leaflet / src / layer / vector / canvas / Path.Canvas.js
  • method _updateSvgViewport writes position changes to appropriate SVG container

In this situation when I move my view, my polyline looses it's position.

I have suppressed this issue by changing line 69 in Layer.Raphael.js from root = this._raphaelRoot; to root = this._raphaelRoot.firstChild; in my project.

There are a couple of layers that use
includes: L.Mixin.Events,

but most such as Marker don't. Is that an oversight or by design?

I try to set his on R.Marker and R.PolyLine and the click doesn't work. There are no errors in my debug console, but also no handlers get set for click events on either the marker or Polyline

I'm using the R.GeoJSON object to create some paths, to which I attach some hover event handlers. The hover events are handled perfectly, until you change the zoom level, at which point it looks like the handlers have been lost.

example: http://jsfiddle.net/PnysZ/1/

Markers created with circleMarker behave oddly before and after RaphaelLayer Features are used.

It can be reproduced inside the demo by placing this little script into the index.js file:

(function() {
    var map = new L.Map('map');
    var tiles = new L.TileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '',
        maxZoom: 18
    });

    L.circleMarker([-34.810835031000003, 138.516159968000011],
                   {radius: 10,
                    color: '#0f0',
                    opacity: 1,
                    weight: 2,
                    fillColor: '#0f0',
                    fillOpacity: 0.5}).addTo(map);

    var adelaide = new L.LatLng(-34.93027490891421, 138.603875041008);
    map.setView(adelaide, 10).addLayer(tiles);

    // comment this out and the circleMarker will be visible again
    var m = new R.Marker(adelaide);
    map.addLayer(m);
})();

I just plugged in the debug demo code below into a minimal map where L.geoJson() layers already exist, to try out rlayer.

On pan both existing L.geoJson() layer's position gets reset to the center.
(this shouldn't be happening.)

Then tried to replace L.geoJson() with R.GeoJSON() and got a leaflet-side id error.

using Leaflet-Leaflet-v0.5.1-0-gc1d410f.zip.

var adelaide = new L.LatLng(-34.93027490891421, 138.603875041008);
var points = [];
map.on('click', function(e) {
points.push(e.latlng);

if(points.length == 4) {
    var p = new R.Polygon(points);
    map.addLayer(p);
    p.hover(function() {

    },
    function() {
        p.animate({opacity: 0}, 1000, function() { map.removeLayer(p); });

    });

    points = [];
}


var b = new R.BezierAnim([adelaide , e.latlng], {}, function() {
    var p = new R.Pulse(
            e.latlng, 
            6,
            {'stroke': '#2478ad', 'fill': '#30a3ec'}, 
            {'stroke': '#30a3ec', 'stroke-width': 3});

    map.addLayer(p);
    setTimeout(function() {
        map.removeLayer(b).removeLayer(p);
    }, 3000);
});

map.addLayer(b);

});

Hi all.

I followed examples, so I have included raphael-min.js, leaflet and rlayer.js

But, when I want to add marker to the map

var marker = new R.Marker(latLng,{'fill': '#fff', 'stroke': '#000'});

rlayer.js breaks at line 38:

this._map._initRaphaelRoot();
this._map._initRaphaelRoot is not a function

Did I missed some dependency or what?

Hi,
i've been trying to have the example working without success !

is there any tricks ?

before i link this plugin to the new leaflet version, i would like to see it working with the provided lib...

please help !

The current version is not updated for a long time and is incompatible with current leaflet 1.x.
When using this version of leaflet there are errors and warnings that do not allow working with the plugin.
I was able to start it in the work as follows:
in source file rlayer-src.js find the line

R.Layer = L.Class.extend({
	includes: L.Mixin.Events,

and replace it with

R.Layer = (L.version < "1.0" ? L.Class : L.Layer).extend({
	includes: (L.version < "1.0" ? L.Mixin.Events : []),

After that the plugin worked without problems.

I tried to make 'path' with this library. I had strings like 'M0,0L10,10,L10,0Z' and other kinds of curves with with C in strings.
https://github.com/CloudMade/Leaflet/issues/1029
In that issue more information with code I added into libraries.
But It still don't works well. If I put Marker in [0,0] it's right in position with Lat/Lon as [0,0]. But if I make 'path' with start at [0,0] it's in another position with Point[0,0] instead Lat/Lon. Also it doesn't change it's position if I zoom map as it R.Marker does.

got a decision by adding:

var r = Raphael.pathBBox(this._pathString);
var p = this._map.latLngToLayerPoint([r.x+r.width/2,r.y+r.height/2]);
var curZoom = 1/Math.pow(2,map.getMaxZoom() - map.getZoom());

and:

.transform('t'+p.x+','+p.y+'s'+curZoom+','+curZoom+',0,0')

@dbhowell The resource from “https://raw.githubusercontent.com/dynmeth/RaphaelLayer/master/dist/rlayer.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).