Bing Maps call infobox from outside table

Question

I have a map on the left and a table on the right. I would like hoverover the table cell and it to pop up the infobox on the map. I have the map mouseover working but don't know how to call it from outside the Map.

I am using MVC.

The table has 50 or so entries and the map has the corresponding pins I want to show the infobox for that pin when the table cell or text his mouse over.

You can use javascript - have `onmouseover` call a function that handles your popup — Chronicle, Jul 19 '18 at 18:07
Yes but how. How do you find the correct pin and launch the event. — Beachmat, Jul 19 '18 at 18:47

score 0 · Accepted Answer · answered Jul 20 '18 at 18:48

Assume that you already have or can manually create some unique id for each pushpin/table cell pair. Then after you create each pushpin, you can assign this info to its metadata:

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpin.metadata = { id: "Some Id" };
// ......
// Other work like binding infobox and mouseover event

Now Let's say you eventually add the pushpins to map like this:

var pushpins = [....];
var layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);

And on the table side, bind the same id to a custom data attribute of the table cell:

<td data-pushpinId="Some Id">Cell A</td>

When you hover on the table cell, get its data-pushpinId and find the corresponding pushpin on the layer, then invoke its mouse over event.

var pushpinId = tableCell.getAttribute("data-pushpinId");
var pushpin = layer.getPrimitives().find((pushpin) => pushpin.metadata.id === pushpinId);
pushpin && pushpin.mouseover.invoke();

Bing Maps call infobox from outside table

1 Answers1