Kinetic JS Fire Paths events

Question

I have developed an interactive map using Kinetic JS based on the great tutorial here.

What I would like to achieve is to have below the map a list of staff located on the map, then have an event that if a visitor clicks the person's name from the list of names then the staff members location on the map is highlighted.

I have been working on this for a few hours trying to find the best solution, now I would settle for a working solution.

I have added an event listener to the li items, which fires correctly:

document.getElementById(stfArr[i]).addEventListener('click', function () { alert("true"); }, false);

But I cannot think of how I can call the path object.

I came across this post mentioning stage.find(), however when I use this it doesn't seem to find any items from my map.

var room = stage.Find("#Room1")[0];

I have a JSON which is an object of objects and this is processed through a for loop, each location in the JSON file is processed:

var path = new Kinetic.Path({
  data: c,
  fill: '#fff',
  stroke: '#555',
  strokeWidth: 1
});

And each path has a few events:

path.on('mouseover', function () {
  this.setFill('#008000');
  this.setOpacity(1);
  mapLayer.drawScene();
});

path.on('mouseout', function () {
  this.setFill('#fff');
  // this.setAlpha(0.1);
  mapLayer.drawScene();
  tooltipBackground.hide();
  tooltip.hide();
  tooltipLayer.drawScene();
});

Then the path is added to the map layer:

mapLayer.add(path)

I have created a JSFiddle (this is my first time, so hopefully it works!).

Answer 1

First, a capitalization typo:

stage.find  // not stage.Find

When you use the hashtag (#) within a .find key, KineticJS searches for a node id.

So when you create each path (room) you should assign it a node id (eg "Room1"):

var path = new Kinetic.Path({
  id:"Room1",
  data: c,
  fill: '#fff',
  stroke: '#555',
  strokeWidth: 1
});

Then your .find will succeed:

var room = stage.find("#Room1")[0];