none
Assign ID to individual Pushpins? RRS feed

  • Question

  • Hi all,

    Is there an easy way to retrieve a pushpin via javascript? I assume there is a way to assign an individual id to each pushpin I just can't seem to find it.

    What I'm doing is placing pushpins on a map then placing all the data about those points into a table. When a user clicks a row in the table the map reacts by zooming in on the connected pushpin. Here is a the method that gets called when the user clicks an item in the list. Currently the map zooms into the correct lat/lng point but obviously does not fire the event yet.

     function centerMapOnMarker(map, latLngsStr)
        {
            var strArr = latLngsStr.split(',');
            var floatArr = [];
            for (i = 0; i < strArr.length; i++)
                floatArr.push(parseFloat(strArr[i]));
            map.setView({
                zoom: 18,
                center: new Microsoft.Maps.Location(floatArr[0], floatArr[1])
    
            })
    
            var pushpin = map.entities.getElementById('some ID')
    
            map.fireEvent('click', {
                latlng: latLngs,
                layerPoint: map.latLngToLayerPoint(latLngs),
                containerPoint: map.latLngToContainerPoint(latLngs)
            });
        }


    @foreach (var x in Model.Events)
            {
                string str = "var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(" + x.Latitude + ", " + x.Longitude + "), { color: 'blue', enableHoverStyle: true });";
                @Html.Raw(str);
                str = "pushpin.id = " + x.EventKey + ";"; //TODO set ID for each pushpin
                str += "pushpin.metadata = {  title: '',";
                str += @"description: ' <div class = ""infobox"">Log Time: <b> " + x.LogTime.ToLocalTime() + " </b><br> Device: <b> " + x.DeviceKey + "(" + x.UserID + ")" + " </b><br> Location: <b> " + x.Latitude + ", " + x.Longitude + " </div>' }; \n";
                @Html.Raw(str);
                @Html.Raw("Microsoft.Maps.Events.addHandler(pushpin, 'click', pushpinClicked); \n");
                @Html.Raw("map.entities.push(pushpin); \n");
            }

    Thanks,

    Ryan


    Wednesday, March 28, 2018 10:30 PM

Answers

  • Add any custom properties you have to the metadata of the pushpin. This will ensure that your custom property doesn't override any undocumented properties in the map control and break it. 

    As for retrieving a pushpin from the map by a metadata property, there are a couple options. One is to simply loop through all data in the map until you find the pushpin with the id that you are looking for. The other is to use the Filter class to do the same thing. Here is a code sample of the first method:

    function getShapeByProperty(mapOrLayer, metadataPropertyName, value){
    	var i, r, s, len;
    
    	//Check entity collections (legacy feature).
    	if(mapOrLayer.entities && mapOrLayer.entities.getLength){
    		len = mapOrLayer.entities.getLength();
    		for(i=0;i<len;i++){
    			s = mapOrLayer.entities.get(i);
    			if(s.entities && s.entities.getLength){
    				r = getShapeByProperty(mapOrLayer.entities, metadataPropertyName, value);
    				if(r){
    					return r;
    				}
    			} else if (s.metadata && s.metadata[metadataPropertyName] == value){
    				return s;
    			}
    		}
    	} 
    
    	//Check data layers.
    	if (mapOrLayer.getPrimitives) {
    		var shapes = mapOrLayer.getPrimitives();
    		for(i=0;i<shapes.length;i++){
    			if(shapes[i].metadata && shapes[i].metadata[metadataPropertyName] == value){
    				return shapes[i];
    			}
    		}
    	} 
    
    	//Check map.layers.
    	if (mapOrLayer.layers){
    		for(i=0;i<mapOrLayer.layers.length;i++){
    			r = getShapeByProperty(mapOrLayer.layers[i], metadataPropertyName, value);
    			if(r){
    				return r;
    			}
    		}
    	}
    
    	return null;
    }


    [Blog] [twitter] [LinkedIn]

    Thursday, March 29, 2018 4:11 AM