multiple custom map webparts single page

kyle shapiro asked on April 22, 2015 21:40

I apologize in advance; This question is very long and probably has an equally long answer. I created a wonderful custom bing map web part from scratch and hooked it into Kentico. It works beautifully, I am very proud of it. My problems begin when I tried to place two instances of the map on a single page. I was not thinking about multiple map instances on a single page while developing this control, but it is a requirement for my page. The way it currently works, is that the .ascx contains <div ID="myMap"></div> and a part map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions); So I know that "myMap" div not being unique is a problem. The current behavior is that each subsequent map added will be placed in the first maps' creation location, "myMap"div, and all of the maps' pin click events will work, but the mouse enter and mouse out event handlers only work on the most recently created map. How can I have each instance of this custom control create a unique element with unique ID? Should I be using placeholders instead of Divs? I can't really tell how the built in Kentico webparts handle such a situation. I am currently using the onPageLoad method, and I have been told that's probably not right, and I should be using OnContentLoaded, but I don't really know how to do that properly either. Any examples, suggestions, advice, or resources would be greatly appreciated. If it would help, I can also post all of my code here.

Correct Answer

kyle shapiro answered on May 18, 2015 17:38

I found some time to revisit this item, and was able to find a solution. Some key components are as follows:

Unique divisions (or whatever container you use to place the maps into) are required. There are multiple ways to do this, but Charles' method works well. "...in the map web part properties, I created a property for MapID. Then I grab the property in the code behind and assign it to the div during the control setup and any reference code..." - Charles Matvchuk<div ID="myMap<%=MapID%>"></div>map = new Microsoft.Maps.Map(document.getElementById("myMap"+<%=MapID%>), mapOptions);
In my solution, infoboxes are created upon mouse-over of a pin and destroyed on mouse-out. Because the new infoboxes added by mouse-over are the last entity for that map, I use this code for the mouse-out event: map.entities.removeAt(map.entities.getLength()-1);
This is the part that tripped me up most. If you have a script element with the ecn.dev.virtualearth.net src occur AFTER a map has already been created, then it will break the hover event listener of those previous maps. This means that there should be one and only one of these script elements. I achieve this with the following code:
```
//opening script tag
if (typeof testForScript == 'undefined') {
    document.write('\x3Cscript type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">\x3C/script>');
    var testForScript = 0;
}
//closing script tag
```
\x3C I am told is the hexadecimal representation of < and is the most reliable method of writing a script element to the page using document.write. I first attempted to create a document node, but it wasn't working. This works because the script looks for a variable that doesn't exist, when it is not found, creates the script element we need, and then sets that variable to something besides undefined so that no future script elements will be created.

The GetMap functions and the map variable name don't need to be unique. It should also be noted that upon creation of the pushpins, I the value of what I want the infobox to display on the pushpin object. pushpin.infoBoxValue = whatever; And then when I create the infobox, I use that to be the title property. title: e.target.infoBoxValue. InfoBoxValue of course is a property I made up, and could be anything. Title is a infobox option property.

I hope this helps somebody down the line. Thank you again Charles for your continued help. This is a great community, and I hope to eventually contribute as much or more than I have been helped myself.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Charles Matvchuk answered on April 23, 2015 00:14 (last edited on April 23, 2015 00:18)

What I did, and I ran into the same problem, is in the map web part properties, I created a property for MapID. Then I grab the property in the code behind and assign it to the div during the control setup and any reference code, dynamic JavaScript as well. Think about dynamically creating your markup from code behind.

I then give every map that I drop on the page a different ID in the web part configuration.

Feel free to post your code if you like.

1 votesVote for this answer Mark as a Correct answer

kyle shapiro answered on April 23, 2015 21:46

Thank you Charles, I have added that MapID web part property. All my pins have unique ID's, but I don't know how to modify the event handler to use this new property. My mouseover event handler is pushpinMouseOver = Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', openPopUp); It is inside of a function named PlacePin() that executes once per longitude value I pass in. The function openPopUp looks like this

function openPopUp(e)
{
    var infoboxOptions = { visible: true, title: e.target.ID, offset: new Microsoft.Maps.Point(13, 45), showPointer: false, width:200, height:30 };
    infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(e.target.getLocation()), infoboxOptions);
    map.entities.push(infobox);
}

each pin has a unique ID that can be viewed with alerts on the click event pushpin.ID = i + "00" + mapID; I am still getting the behavior of all the click events work correctly, but the mouseover events are only working for the last map created on the page. I don't understand why the click event works for all maps, but the mouseover only works for the last created map.