api bing maps - multi layer (line and pic) on one point

Question

api bing maps - multi layer (line and pic) on one point

487 views Asked by user2586778 At 09 June 2015 at 14:27

I can't create multiple layers (images and lines) on the same coordinates. Does anyone know how you can handle it?

example code:

for (; index_array < array_trip.length; index_array++) {
    latVal = array_trip[index_array].latitude;
    longVal = Microsoft.Maps.Location.normalizeLongitude(array_trip[index_array].longitude);
    map.setView({ center: new Microsoft.Maps.Location(latVal, longVal) });
    var pushpinOptions = { icon: path + 'car.png', width: 50, height: 50 };
    var pushpin = new Microsoft.Maps.Pushpin({ latitude: latVal, longitude: longVal }, pushpinOptions);   
   map.entities.push(pushpin);
}

Original Q&A

There are 2 answers

**rbrundritt** · Answer 1 · 2015-06-09 18:25:17

First off, don't set the map view in an array. This will only cause issues. Secondly, ensure that the URL to the pushpin icon is correct. Perhaps try removing that option for now until you see the default pushpins displayed on the map, then try adding a custom icon.

If you want to separate your data into layers you should use EntityCollection's: https://msdn.microsoft.com/en-us/library/gg427616.aspx

Here is a good blog post on layering: https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/

**Vadim Gremyachev** · Answer 2 · 2015-06-09 20:12:09

Use could initialize EntityCollection object to add multiple entities to the map at one time.

Example

function GetMap() {

    var locations = [
        new Microsoft.Maps.Location(60.173783, 24.941068),
        new Microsoft.Maps.Location(59.338575, 18.065823),
        new Microsoft.Maps.Location(59.922602, 10.749411),
        new Microsoft.Maps.Location(55.675817, 12.570452)
    ];

    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "Bing Maps Key" });

    //1. Add pushpins
    for (var i = 0; i < locations.length; i++) {
        var pin = new Microsoft.Maps.Pushpin(locations[i]);
        // Add the pushpin
        map.entities.push(pin);
    }


    //2. Add a polyline
    var line = new Microsoft.Maps.Polyline(locations);
    map.entities.push(line);


    //3. Add a polygon 
    var polygoncolor = new Microsoft.Maps.Color(100, 100, 0, 100);
    var polygon = new Microsoft.Maps.Polygon(locations, { fillColor: polygoncolor, strokeColor: polygoncolor });
    map.entities.push(polygon);

    var bestview = Microsoft.Maps.LocationRect.fromLocations(locations);
    map.setView({ bounds: bestview });
}

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<body onload="GetMap();">
    <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>

TechQA.

api bing maps - multi layer (line and pic) on one point

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in BING-MAPS

Related Questions in BING-API

Popular Questions

Popular Tags

Trending Questions