Highlight Map Shapes by ID
Environment
| Product | Progress® Kendo UI® Map for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I highlight the shapes of the Kendo UI for jQuery Map by their specified IDs?
Solution
The following example demonstrates how to highlight the Map shapes by a specified ID.
<div id="map"></div>
<script>
function createMap() {
$("#map").kendoMap({
center: [30.2681, -97.7448],
zoom: 3,
layers: [{
type: "shape",
dataSource: {
type: "geojson",
transport: {
read: "https://output.jsbin.com/zuguhajiye.js"
}
},
style: {
fill: {
color: "white",
opacity: 0.7
}
}
}],
shapeCreated: onShapeCreated,
shapeMouseEnter: toggleShape,
shapeMouseLeave: toggleShape,
reset: onReset
});
}
var shapesById = {};
function onReset() {
shapesById = {};
}
function onShapeCreated(e) {
var id = e.shape.dataItem.id;
shapesById[id] = shapesById[id] || [];
shapesById[id].push(e.shape);
}
function toggleShape(e) {
var id = e.shape.dataItem.id;
var shapes = shapesById[id];
if (shapes) {
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
if (shape.options.fill.color === "white") {
shape.fill("blue");
} else {
shape.fill("white");
}
}
}
};
$(document).ready(createMap);
</script>