dynmeth / raphaellayer Goto Github PK
View Code? Open in Web Editor NEWRaphael overlay for Leaflet maps
License: MIT License
Raphael overlay for Leaflet maps
License: MIT License
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)
_updateRaphaelViewport
writes position changes (after e.g. drag&drop on map) to overlayPane_updateSvgViewport
writes position changes to appropriate SVG containerIn 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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.