Hey guys!
I have a problem with a functionality we'd like to achieve. We have a map with two FeatureLayers (Streets of a Country, Streetsnumber). Streets of a country has a SimpleRenderer and displays lines on a 2D Map containing the streets in that country and the Streetsnumber has a UniqueValueRenderer displaying a png image with the street number in it somewhere on the streets.
What I'd like to achieve is that the png image gets increased in size whenever the user hovers over the exact image AND if the user hovers somewhere over the street the image represents. For example if the user hovers the Route 66, the png (which is located somewhere on the Route 66) shoult increase in size and decrease if the hover is over.
Right now we've made it to the point that the streets gets highlighted and the street png as soon as the user hovers it, but it should increase before it gets hovered - right when the street itself is hovered. See attachments.
flnumber -> feature layer with the numbers on the map
flstreets -> freature layer with the street lines on the map
using JS API 4.15
view
.when()
.then(function () {
return flstreets.when();
})
.then(function (layer) {
return view.whenLayerView(layer);
})
.then(function (layerView) {
view.on("pointer-move", eventHandler);
function eventHandler(event) {
view.hitTest(event).then(getGraphics_Move);
}
var highlight, currentName;
function getGraphics_Move(response) {
var graphic_railway, name, targetnum, graphic_number;
var tooltip = document.getElementById("nametooltip");
if (response.results.length) {
try {
graphic_railway = response.results.filter(function (result) {
return result.graphic.layer === flstreets;
})[0].graphic;
console.log(graphic_railway)
name = graphic_railway.attributes.Bezeichnun;
targetnum = indexrenderer.indexOf(name);
try {
graphic_number = response.results.filter(function (result) {
return result.graphic.layer === flnumber;
})[0].graphic;
var rend = graphic_number.layer.renderer.clone();
for (var r = 0; r < rend.uniqueValueInfos.length; r++) {
if (rend.uniqueValueInfos[r].label === name) {
rend.uniqueValueInfos[r].symbol.width = 33;
rend.uniqueValueInfos[r].symbol.height = 33;
graphic_number.layer.renderer = rend;
break;
}
}
} catch {
console.log("info: no number graphic");
}
function controlTooltip(name, e) {
if (currentName == name) {
var name = name;
tooltip.style.top = "" + e.y + "px";
tooltip.style.left = "" + e.x + "px";
tooltip.style.display = "inline-block";
tooltip.style.visibility = "visible";
tooltip.style.position = "absolute";
tooltip.style.backgroundColor = "#fff";
tooltip.style.padding = "10px";
tooltip.style.borderRadius = "5px";
tooltip.style.fontFamily = "sans-serif";
tooltip.style.fontWeight = "bold";
tooltip.style.boxShadow = "2px 2px 1px #88888888";
tooltip.innerHTML = name;
currentName = name;
}
}
controlTooltip(name, response.screenPoint);
} catch {
console.log("Info: graphic is " + typeof graphic);
}
if (highlight && currentName !== name) {
flnumber.renderer = newrenderer;
tooltip.style.display = "none";
tooltip.style.visibility = "hidden";
highlight.remove();
highlight = null;
return;
}
if (highlight) {
return;
}
var query = layerView.createQuery();
query.where = "Bezeichnun = '" + name + "'";
layerView.queryObjectIds(query).then(function (ids) {
if (highlight) {
highlight.remove();
}
highlight = layerView.highlight(ids);
currentName = name;
});
} else {
if (highlight) {
flnumber.renderer = newrenderer;
tooltip.style.display = "none";
tooltip.style.visibility = "hidden";
highlight.remove();
highlight = null;
}
}
}
});