Refreshing a Map with new route and custom markers

6 posts / 0 new
Last post
jvondolteren
Refreshing a Map with new route and custom markers

We have a process where a user can select upto 20 waypoints, along with a start and end point. We then create the map ( a global object ) using 'L.mapquest.map(element, options)', 'L.mapquest.directions().route(options, callback)' and 'L.mapquest.directionsLayer(options)'.  At any point, the user can then select a different set of waypoints and/or start point and/or end point and start the map creation process once again. We use map.remove() (where map is the global object ) as outlined in leaflet documentation to remove the map so that we do not get the error about the map already being initialized. Unfortunatley, we end up with a map where the 'map' tiling disappears and the zoom level maxes out to 20.

Our question is pretty straight forward: what is the correct process for re-using an existing map object?

We are attaching code used with the exception of showing our key.Thank you for your help.

Jim Von Dolteren

 

        // create waypoint array and
        // route start/end objects
        // --------------------------
        var waypoints = [] ,
            tank_count = route_data.tank.length ;           
            
        for ( var count = 0; count < tank_count; count++ ) {
          var tank_desc = route_data.tank[ count ].tank_desc ,
              latLng = { latLng: { lat: route_data.tank[ count ].lat, 
                                   lng: route_data.tank[ count ].lng } } ; 
          switch( tank_desc ) {
            case "route_start" : 
              var start = latLng ;
              break ; 
            case "route_end" :
              var end = latLng ;
              break ;
            default :
              waypoints.push( latLng ) ;
          }     
        }
        
        
        // mapquest api for optimized route
        // with callback function to create interactive map
        // -------------------------------------------------
        L.mapquest.key = 'KEY';
        L.mapquest.open = true ;
        L.mapquest.directions().route( {
          waypoints: waypoints,
          start: start,
          end: end,
          optimizeWaypoints: true
        }, displayMap ) ;
      }

=====

//-------------------------------------------------------  
  function displayMap( error, response ) {
//-------------------------------------------------------  

    if ( response && response.route ) {
    
      // remove existing map object
      // ---------------------------

     if( map != null){

       map.remove() ;

      } 
      
      map = L.mapquest.map( 'route-map', {
        center: L.mapquest.util.getCenterFromBoundingBox( response.route.boundingBox ),
        layers: L.mapquest.tileLayer( 'map' ),
        zoom: L.mapquest.util.getZoomFromBoundingBox( response.route.boundingBox )
      } ) ;
  
      map.addControl( L.mapquest.locatorControl() ) ; 
      
      var custom_markers = L.mapquest.DirectionsLayer.extend( {
      
        createStartMarker: function( location ) {
          return L.mapquest.textMarker( location.latLng, {
            text: '',
            type: 'marker',
            icon: {
              primaryColor: '#009000',
              secondaryColor: '#009000',
              size: 'sm'
            }
          } ) ;
        },
  
        createWaypointMarker: function( location, stop_number ) {
          return L.mapquest.textMarker( location.latLng, {
            draggable: true,
            text: '',
            type: 'marker',
            icon: {
              primaryColor: '#820024',
              secondaryColor: '#ffffff',
              size: 'sm',
              symbol: stop_number - 1
            }
          } ) ;
        },
  
        createEndMarker: function( location ) {
          return L.mapquest.textMarker( location.latLng, {
            text: '',
            type: 'marker',
            icon: {
              primaryColor: '#900000',
              secondaryColor: '#900000',
              size: 'sm'
            }
          } ) ;
        }
      } ) ;
  
      var directionsLayer = new custom_markers( {
        directionsResponse: response
      } ).addTo( map ) ;
        
    }
  }

 


Thomas.Horacek
I believe you would just need
I believe you would just need to remove your directionsLayer from the map not remove the entire map object. https://leafletjs.com/reference-1.3.0.html#map-removelayer I would use css to hide and show the map element if you don't want it to be visible.

jvondolteren
Thank you for your response,

Thank you for your response, Thomas. I did attempt to use the removeLayer function, but I removed all layers. I will attempt this once again, except this time I will only remove the directions Layer.

Jim Von Dolteren

 


MQBrianCoakley
Here is (a quick and dirty)

Here is (a quick and dirty) how I did it.

 

var L, map, dirlayer;

 

window.onload = function() {

"use strict";

var directions;

L.mapquest.key = "KEY";

directions = L.mapquest.directions();

 

// let's get to routing

directions.route({

start: "Denver, CO",

end: "Golden, CO"

},

 

// directions.route callback function

function(err, data) {

var bounds, c, z;

if (err.message) {

console.log(err);

} else {

 

// get route bounds to set center and zoom

bounds = data.route.boundingBox;

c = L.mapquest.util.getCenterFromBoundingBox(bounds);

z = L.mapquest.util.getZoomFromBoundingBox(bounds);

 

// let's make a map given the bounds

map = L.mapquest.map("map", {

center: c,

zoom: z,

layers: L.mapquest.tileLayer("map")

});

 

// add route ribbon

dirlayer = L.mapquest.directionsLayer({

directionsResponse: data,

fitBounds: false

}).addTo(map);

}

});

};

 

...

 

<button onclick="map.removeLayer(dirlayer);">remove</button>


jvondolteren
Thank you for your

Thank you for your suggestions, Brian. What you outlined is basically what I had coded as well. My big mistake was removing all layers from the map. I've corrected that function to only remove the directions layer and everything is working as expected. Again, thanks to both you and Thomas for your quick responses and assistance.

Jim Von Dolteren


MQBrianCoakley
Glad that worked. You're
Glad that worked. You're welcome.