ol2
ol2 copied to clipboard
Published
20 hours ago •
openlayers
openlayers
SVG.js and Canvas.js - style.labelSelect = true - No cursor change over label
With style.labelSelect = true and a different cursor specified for the select style, the drawtext method in bot SVG.js and Canvas.js do not show the changed cursor over a style.label.
<!DOCTYPE HTML>
<head>
<title>OpenLayers Highlight (Cursor Change) Example</title>
<style type="text/css">
#map {
width: 500px;
height: 300px;
}
</style>
<script type="text/javascript" src="OpenLayers-2.11/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var vectorLayer;
var alignment = "lb";
function init(){
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var defaultStyle = {
pointRadius: "10",
fillColor: "#ffcc66",
strokeColor: "#ff9933",
strokeWidth: 2,
cursor: 'default',
label: "Various Occupiers",
labelAlign: "${getLabelAlign}",
fontColor: "black",
fontSize: "22px",
fontFamily: "'Times New Roman'",
fontWeight: "bold",
labelSelect: true
// labelOutlineColor: "#FFFFC0",
// labelOutlineWidth: 3
};
var selectStyle = {
cursor: 'pointer'
};
var context = {
getLabelAlign: function(feature) {
return alignment;
},
};
var myStyle = new OpenLayers.Style(defaultStyle, {context: context});
var myStyleSelect = new OpenLayers.Style(selectStyle);
vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({'default': myStyle, 'select': myStyleSelect}),
renderers: renderer
});
map.addLayer(vectorLayer);
map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point);
vectorLayer.addFeatures(pointFeature);
highlightControl = new OpenLayers.Control.SelectFeature([vectorLayer], {
hover: true,
highlightOnly: true
});
map.addControl(highlightControl);
highlightControl.activate();
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Highlight (Cursor Change) Example</h1>
<div id="map"></div>
<p>Mouseover point and label - Cursor should change to Pointer from default</p>
<ul>
<li>VML.js - Working
<li>SVG.js - Working on point only - Not working on label
<li>Canvas.js - Not working on either point or label
</ul>
</body>
</html>
I tested this with 2.14-dev and it is still an issue. the mouse pointer does not change when you use a Canvas renderer.
This is because cursors are set using DOM styles for VML and SVG. This is not possible for Canvas, because it is not based on DOM elements. To achieve this, hit detection would need to be used.
