Wednesday, March 10, 2021

Advanced Static Route Maps With OpenStreetMap

When using the Tesoro choosedataset/routemap feature - which generates a static map using the Leaflet library for OpenStreetMap - you can draw multiple routes on a single map just by using the Choose File menu more than once without refreshing the web page.

The default properties used by Tesoro for route maps gives the route a color of red and a weight (pixel width) of 3.0, where these are both properties supported by the Leaflet polyline API. This is what you saw in the images in A Static Route Map Display Using OpenStreetMap.   

You can override this for all routes on the same map by specifying Leaflet polyline options (including color, weight, and others) as keyword=value pairs in URL query parameters. When you do this, your URL will look something like this example, which specifies a yellow polyline with a weight of 3.

http://tesoro/tesoro/choosedataset.html?color=yellow&weight=3

You can also specify options for a specific route by including the Leaflet polyline options as properties in the original dataset, just as its PATH property contains the array of coordinate pairs. When you do this, your dataset will look something like this example (but probably a lot longer), which specifies a blue polyline with a weight of 6.

{

  "color": "blue",

  "weight": 6.0,

  "PATH": [

      [ 39.7943158, -105.1533988 ]

    , [ 39.7943148, -105.1533981 ]

    , [ 39.7943140, -105.1533973 ]

    , [ 39.7943136, -105.1533960 ]

  ]

}

You can use both together, generating multiple polylines on the same map, some with your modified default options, some with more specific options.

Below is a map with two routes, one yellow, one blue, each defined with its own dataset, each imported by its own Choose Dataset dialog. The yellow route was colored using the URL query parameters which changed the default color from red to yellow. The blue route was specified by a color property inside the dataset itself for blue.

Screen Shot 2021-03-10 at 11.50.10 AM

The properties in the dataset will override the URL query properties. The order in which you choose the datasets may also be important for your specific application, since successive routes will be rendered on top of prior routes. Changing the weight you use for each route can improve the readability of a multi-route map. Changing the color property of a route can also make it more readable on a specific map, depending on the background colors used in the map.

No comments: