Maps SDK for Web - L.RouteOnMap

Class L.RouteOnMap

The RouteOnMap view allows you to display a route on the map.

This widget requires route data to work correcly. For more information please refer to our Routing example.

Constructor

L.RouteOnMap([options])

Parameters

Name	Description	Required	Type/Values	Default
options	Options to be passed to the routing view	No	Object	None
options.generalMarker	General marker options that applies on all markers	No	Object	None
options.generalMarker.icon	Default icon for every marker	No	L.Icon	default
options.generalMarker.draggable	Determines default drag behaviour for every marker	No	Boolean	false
options.startMarker	Marker options for starting marker	No	Object	None
options.startMarker.icon	Icon for start marker	No	L.Icon	default
options.startMarker.draggable	Determines whether start marker should be draggable	No	Boolean	false
options.waypointMarker	Marker options for markers between start and end points	No	Object	None
options.waypointMarker.icon	Icon for markers between start and end points	No	L.Icon	default
options.waypointMarker.draggable	Determines whether start marker should be draggable	No	Boolean	false
options.endMarker	Marker options for end marker	No	Object	None
options.endMarker.icon	Icon for end marker	No	L.Icon	default
options.endMarker.draggable	Determines whether end marker should be draggable	No	Boolean	false
options.position		No	"topleft" \| "topright" \| "bottomleft" \| "bottomright"	"topleft"
options.routeStyle	A style object used for drawing the polyline route. All the L.Path options are accepted.	No	Object	{color: '#00d7ff', opacity: 0.8}
options.alternativeStyles	If the option to display alternatives is passed to the service options then there is a need to pass array of L.Path style's options for each alternative route	No	Object[]	[{color: '#ff00d2', opacity: 0.8}, {color: '#b922ff',opacity: 0.8}]
options.routingDelay	Determines the time in milliseconds that within routing service will be called. Used when user is dragging a marker	No	Number	1000
options.onEachFeature	A function that will be called for each feature, it takes feature and layer as the attributes. Can be used in example to bind popup to the route	No	Function	None
options.serviceOptions	Options to be passed to the routing service. For details check routingService documentation	No	Object	None

Example

var routeOnMapView = new L.RouteOnMap({
  generalMarker: {
    draggable: true
  },
  startMarker: {
    background: {
      iconSize: [30, 36],
      iconAnchor: [15, 36],
      icon: 'marker'
    },
    icon: {
      iconSize: [30, 30],
      iconAnchor: [0, 0],
      icon: 'flag-white'
    },
  },
  waypointMarker: {
    icon: L.icon({
      iconUrl: 'waypoint.png',
      iconSize: [30, 30],
      iconAnchor: [15, 15]
    })
  },
  endMarker: {
    icon: L.icon({
      iconUrl: 'end.png',
      iconSize: [30, 30],
      iconAnchor: [15, 15]
    })
  },
  routeStyle: {
    color: "#00d7ff",
    opacity: 0.8
  }
});
routeOnMapView.addTo(map);

Methods

clear( )

The method to clear a route and markers.

Example

var routeOnMapView = (new L.RouteOnMap(optionsForRouteOnMapView)).addTo(map);
routeOnMapView.clear();

clearMarkers( )

Method that clears shown route.

clearMarkers( )

Method that removes all markers.

createMarkers(points)

Method used to create markers on a map, basing on given points.

Parameters

Name	Description	Required	Type/Values	Default
points	List of points to create markers onto	Yes	Object[]	None

createRoute(points)

Draws a route on the map between given points.

This method executes TomTom Routing Service to get a route. If a route is found, it will draws it on the map. If not, a proper notification will be show.

Parameters

Name	Description	Required	Type/Values	Default
points	List of points to create a route between. The format expected is: ["52.37245,4.89406", "51.37245,5.89406"] "52.37245,4.89406:51.37245,5.89406" Read the Routing Service documentation to get more information about this property format options.	Yes	String[] \| String	None

draw(points)

The method to draw a route between two or more points.

Parameters

Name	Description	Required	Type/Values	Default
points	Array of geographical locations that between route will be drawn. There are multiple formats supported (see more at e.g. Search page in center method). This method also fires the L.RouteOnMap.Events.Draw event that announces that route is drawn.	Yes	Object[]	None

Example

var startPoint = {lat: 49.29917, lon: 19.94902};
var waypoint = {lat: 42.25917, lon: 19.98902};
var endPoint = {lat: 52.23498, lon: 21.00849};
var points = [startPoint, waypoint, endPoint];
var routeOnMapView = (new L.RouteOnMap()).addTo(map);
routeOnMapView.draw(points);

drawRoute(points)

Method that takes care of redrawing markers and a route.

Parameters

Name	Description	Required	Type/Values	Default
points	List of points to draw a route between. The format expected is: ["52.37245,4.89406", "51.37245,5.89406"] "52.37245,4.89406:51.37245,5.89406"	Yes	String[] \| String	None

drawRouteWithGeoJson(geoJson)

Method that draws a route basing on a passed geoJson. Fires the L.RouteOnMap.Events.RouteChanged event.

Parameters

Name	Description	Required	Type/Values	Default
geoJson	Represents geoJson data of a route	Yes	Object	None

fitMapBoundsToRoute( )

Method that fits map to the drawn route.

onDrag(points)

Method executed when the user drag a marker.

Allows to look for routes while dragging a marker and within delay equal to the value passed in the option routingDelay.

Parameters

Name	Description	Required	Type/Values	Default
points	List of points to create a route within. This value will be passed to createRoute for create the new route.	Yes	String[] \| String	None

onDragEnd(points, index)

Method executed when the user drops a marker (equal to dragEnd event).

Redraws route according to given points and executes TomTom Reverse Geocode Service to get human-readable location when marker was dropped. That fires the L.RouteOnMap.Events.MarkerDragEnd event with service's call result and index of a marker.

Parameters

Name	Description	Required	Type/Values	Default
points	List of points. The expected format is: ["52.37245,4.89406", "51.37245,5.89406"] "52.37245,4.89406:51.37245,5.89406"	Yes	String[] \| String	None
index	Index of the marker that was dropped	Yes	Number	None

Events

All the class events are keys of the Events static member.

To learn more about how to listen events please refer to this documentation.

Draw

Event that is fired after drawing a route on a map.

Properties

Name	Description	Type/Values	Default
type	Event's name	String	"draw"
target	Event's target	Element	None

Example

var routeOnMapView = (new L.RouteOnMap()).addTo(map);
routeOnMapView.on(L.RouteOnMap.Events.Draw, function(eventObject) {
     console.log(eventObject);
});

MarkerDragEnd

Event that is fired after dropping the marker. Contains information about marker's position.

Properties

Name	Description	Type/Values	Default
object	Information of dropped marker's position (got from reverse geocode service)	Object	None
markerIndex	Index of the marker on a map	Number	None
type	Event's name	String	"markerDragEnd"
target	Event's target	Element	None

Example

var routeOnMapView = routeOnMap().addTo(map);
routeOnMapView.on(L.RouteOnMap.Events.MarkerDragEnd, function(eventObject) {
     console.log(eventObject);
});

RouteChanged

Event that is fired when route was changed.

Properties

Name	Description	Type/Values	Default
object	Route summary that contains arrival time, departure time, route length, traffic and travel time.	Object	None
type	Event's name	String	"routeChanged"
target	Event's target	Element	None

Example

var routeOnMapView = (new L.RouteOnMap()).addTo(map);
routeOnMapView.on(L.RouteOnMap.Events.RouteChanged, function(eventObject) {
     console.log(eventObject);
});