Hello,
we are drawing a kind of graph on top of the map. We are currently trying to draw some text as well and we have gotten it to work kind of.
At the end I am going to include a small script to show how we are doing it right now and also show what the problem is.
We not only need to draw these things but they need to be clickable too. currently we use geojson with an id that allows us to reference the data behind a geojson point.
with the text we are cheating a bit because we interscept and prevent the default shape from being created and append it's dataItem to our new shape which makes it clickable. the problem is it isnt cleaned up well and it will be drawn over if the data changes. in the worst case if the location changes the new shape will be drawn in the new location but the previously drawn ones in the old location are not cleaned up.
Would be lovely if anyone has a tip on how to do in a nice way.
if you execute the fillowing code you will see the text is drawn on top of the previous text while you cannot see the same effect with the native Geojson Lines
function Guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function rand() {
return Math.random()*360 - 180;
}
function onMarkerClick(e) {
console.log(e);
}
function createMap() {
var datasrc = new kendo.data.DataSource({
type: "geojson",
data: []
});
var datasrc1 = new kendo.data.DataSource({
type: "geojson",
data: []
});
var map = $("#map").kendoMap({
center: [0, 0],
zoom: 12,
layers: [{
type: "tile",
urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
},
{
type: "shape",
dataSource: datasrc,
},{
type: "shape",
dataSource: datasrc1,
}],
markerClick: onMarkerClick,
markerCreated: onMarkerCreated,
shapeCreated: onShapeCreated,
}).data("kendoMap");
let arr = [];
let arr1 = [];
for (var i = 0; i < 20; i++) {
arr.push({type: "Feature", id: Guid(), geometry: {type: "Point", coordinates: [0,0-i*0.005]}})
datasrc.data(arr)
}
for (var i = 0; i < 30; i++) {
arr1.push({type: "Feature", id: Guid(), geometry: {type: "LineString", coordinates: [[-5,0.08 - i * 0.002], [5,0.08- i * 0.002]]}})
datasrc1.data(arr1)
}
}
$(document).ready(createMap);
function onMarkerCreated(e) {
e.preventDefault()
}
function onShapeCreated(e) {
if (e.shape.dataItem.geometry.type == "Point") {
console.log("creating shape")
var bbox = e.shape.bbox();
var center = bbox.center()
var label = new kendo.drawing.Text("Lorem Ipsum");
var labelCenter = label.bbox().center()
label.position([
center.x - labelCenter.x,
center.y - labelCenter.y
])
label.dataItem = e.shape.dataItem;
e.layer.surface.draw(label);
e.preventDefault();
} else {
console.log("creating line")
}
}