How to add a route to a static map
In this topic, you'll learn how to add a route to a static map using Amazon Location Service. You'll go through the steps to obtain a route using the CalculateRoutes API and then visualize it on a static map using GeoJSON and custom styling for points and lines.
Steps to add a route
-
Get routes from the
CalculateRoutesAPI. Remove coordinates that fall on the same straight line to optimize the LineString, preventing the query string from reaching its limit. -
Create a GeoJSON object based on the optimized set of coordinates.
-
Take the first and last points of the LineString and add Point geometries to mark the start and end locations.
-
Style the points and the LineString according to your business needs, adjusting properties like color, size, and labels.
Add a route using compact style
In this example, you will add a route with start and end points to the line created in How to add a line to a static map. The route will be defined with custom styling, including color, size, and labels for the start and end points.
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-123.11813, 49.28246], [-123.11967, 49.28347], [-123.12108, 49.28439], [-123.12216, 49.28507], [-123.12688, 49.28812], [-123.1292, 49.28964], [-123.13216, 49.2916], [-123.13424, 49.29291], [-123.13649, 49.2944], [-123.13678, 49.29477], [-123.13649, 49.29569], [-123.13657, 49.29649], [-123.13701, 49.29715], [-123.13584, 49.29847], [-123.13579, 49.29935], [-123.13576, 49.30018], [-123.13574, 49.30097] ] }, "properties": { "color": "#000000", "width": "20m", "outline-color": "#a8b9cc", "outline-width": "2px" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.11813, 49.28246] }, "properties": { "label": "Pacific Centre", "icon": "bubble", "size": "large", "color": "#34B3A4", "outline-color": "#006400", "text-color": "#FFFFFF" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-123.13574, 49.30097] }, "properties": { "label": "Stanley Park", "icon": "bubble", "size": "large", "color": "#B3346D", "outline-color": "#FF0000", "text-color": "#FFFFFF" } } ] }
