Hand cursor for canvas paths

This commit is contained in:
snkashis 2013-02-17 14:17:44 -05:00
parent b94a4ea27b
commit baeeddb078
2 changed files with 27 additions and 5 deletions

View File

@ -14,11 +14,16 @@
<script> <script>
L_PREFER_CANVAS = true; L_PREFER_CANVAS = true;
$(document).ready(function() { $(document).ready(function() {
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = L.map('map', { var map = L.map('map', {
minZoom: 1, minZoom: 1,
maxZoom: 19, maxZoom: 19,
center: [51.505, -0.09], center: [51.505, -0.09],
zoom: 9 zoom: 9,
layers: [cloudmade]
}); });
var polygons = new L.FeatureGroup(); var polygons = new L.FeatureGroup();
@ -27,10 +32,11 @@
polygons.addLayer( polygons.addLayer(
new L.Polyline( new L.Polyline(
points, { points, {
weight: 2, weight: 10,
opacity: 1, opacity: 1,
smoothFactor: 1, smoothFactor: 1,
color: 'red' color: 'red',
clickable:true
})); }));
polygons.on('click', function(m) { polygons.on('click', function(m) {
@ -43,6 +49,8 @@
}); });
</script> </script>
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script> <script src="../leaflet-include.js"></script>
</head> </head>
<body> <body>

View File

@ -123,8 +123,8 @@ L.Path = (L.Path.SVG && !window.L_PREFER_CANVAS) || !L.Browser.canvas ? L.Path :
_initEvents: function () { _initEvents: function () {
if (this.options.clickable) { if (this.options.clickable) {
// TODO hand cursor // TODO mouseout, dblclick
// TODO mouseover, mouseout, dblclick this._map.on('mousemove', this._onMouseMove, this);
this._map.on('click', this._onClick, this); this._map.on('click', this._onClick, this);
} }
}, },
@ -138,6 +138,20 @@ L.Path = (L.Path.SVG && !window.L_PREFER_CANVAS) || !L.Browser.canvas ? L.Path :
originalEvent: e originalEvent: e
}); });
} }
},
_onMouseMove: function (e) {
if (this._containsPoint(e.layerPoint)) {
this._ctx.canvas.style.cursor = 'pointer';
this.fire('mouseover', {
latlng: e.latlng,
layerPoint: e.layerPoint,
containerPoint: e.containerPoint,
originalEvent: e
});
} else {
this._ctx.canvas.style.cursor = '';
}
} }
}); });