locked
Unable to draw route to a map with exisiting route RRS feed

  • Question

  • I wish to draw a route on a map with an existing route after clearing out the previous route. Do not wish to load the map again. 

    Instantiated the map

    map = new atlas.Map("map", {
            "subscription-key": MapsAccountKey
        });

    Created a line route (after obtaining route data from API call) as follows:

    function createRoute(route){
    var routeLinesLayerName = "routes"; map.addLinestrings([], { name: routeLinesLayerName, color: "#2272B9", width: 5, cap: "round", join: "round", before: "labels" }); var routeCoordinates = []; for (var leg of route.legs) { var legCoordinates = leg.points.map((point) => [point.longitude, point.latitude]); routeCoordinates = routeCoordinates.concat(legCoordinates); } var routeLinestring = new atlas.data.LineString(routeCoordinates); map.addLinestrings([new atlas.data.Feature(routeLinestring)], {name: routeLinesLayerName});

    }

    Now, on calling the above with a different route object, the route does not seem to be getting added. 
    Do we need to clear/remove the layer "routes" before plotting a new route. If yes, I tried using removeLayers(routeName), but doesn't seem to work as I expected.

    If not the entire layer, do we need to remove just the old route array somehow from the layer? and add the new data to it? I also checked out the overwrite: true property but not sure if that is what is needed
    Please advice! Thanks


    • Edited by rodgenixon Tuesday, August 7, 2018 9:41 AM
    Tuesday, August 7, 2018 9:30 AM

Answers

  • Hello rodgenixon,

    It seems no method to overwrite the previous route. But you can remove the previous route using map.removeLayers() and add a new route with new data without reload the map.

    				map.removeLayers(["truck-route"]);
    				
    				var truckRouteLayerName = "truck-route";
    				map.addLinestrings([], {
    					name: truckRouteLayerName,
    					color: "#2272B9",
    					width: 9,
    					cap: "round",
    					join: "round",
    					before: "labels"
    				});
    				
    				var routeLinestring = new atlas.data.LineString(routeCoordinates);
    				map.addLinestrings([new atlas.data.Feature(routeLinestring)], {
    					name: truckRouteLayerName
    				});

    I put my demo here.

    Please let me know if it helps.

    Best regards,

    Rita


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by rodgenixon Friday, August 10, 2018 1:33 PM
    Friday, August 10, 2018 7:59 AM

All replies

  • Hello rodgenixon,

    >>>Do we need to clear/remove the layer "routes" before plotting a new route.

    Here is a tutorial of adding multiple routes on a map. But it doesn't work for me. It can only display one route. It creates two route layers for two route. You can have a try instead of using the same route layer name "routes" in your code to see if it helps.

    About multiple routes issue I add comment to the document for help and I'll update here if there is any update.

    Best regards,

    Rita


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, August 8, 2018 8:57 AM
  • Hey! 

    I did try out the tutorial you've mentioned. Unfortunately that doesn't serve my purpose as it does not discuss how to remove the old route without having to replot the map. It only plots the new route along with an existing one. 

    I tried using the reusing the same layer "routes" to plot the second route as well (hoping it would maybe overwrite the previous route) but that doesn't work either. Second route doesn't show up on the map, and first remains. 

    Thanks for the help though. Let me know in case you find out!
    Thursday, August 9, 2018 1:07 PM
  • Hello rodgenixon,

    It seems no method to overwrite the previous route. But you can remove the previous route using map.removeLayers() and add a new route with new data without reload the map.

    				map.removeLayers(["truck-route"]);
    				
    				var truckRouteLayerName = "truck-route";
    				map.addLinestrings([], {
    					name: truckRouteLayerName,
    					color: "#2272B9",
    					width: 9,
    					cap: "round",
    					join: "round",
    					before: "labels"
    				});
    				
    				var routeLinestring = new atlas.data.LineString(routeCoordinates);
    				map.addLinestrings([new atlas.data.Feature(routeLinestring)], {
    					name: truckRouteLayerName
    				});

    I put my demo here.

    Please let me know if it helps.

    Best regards,

    Rita


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by rodgenixon Friday, August 10, 2018 1:33 PM
    Friday, August 10, 2018 7:59 AM
  • Hey, this worked. Able to plot the new route now without having to reload! Thanks for the help.

    Regards
    • Edited by rodgenixon Friday, August 10, 2018 1:35 PM
    Friday, August 10, 2018 1:35 PM