Mobile Age - Component - Map - Path

A component to display a path on a given map

How to add a path to a map

  1. Assuming a map exists
    <script> var options = { centerLng: 8.96767, centerLat: 53.06184 }; var map = new MobileAge.Component.Map("unique_id", options); <script>
  2. Use a JavaScript array to initialize your path with the desired options, e.g. source data, image to be used etc.
    <script> var options = { color: 'red', weight: 10, fitBounds: true, data: any array[] }; <script>
  3. Add the path to the map.
    <script> new MobileAge.Layer.Path(map, options); <script>

Example 1: Data provided during initialisation

This example is the simplest way to add a path by directly providing data.

Code

<div id="example_map_1" style="width: 75%;height: 20em;"> </div> <script> var options_1 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_1 = new MobileAge.Component.Map("example_map_1", options_1); var options = { color: 'red', weight: 5, fitBounds: true, data: '{"name":"Any Path Collection","type":"FeatureCollection","features":[\n\ {"type":"Feature", "geometry":{"type":"LineString","coordinates":[[8.963348561,53.063197,0],[8.9299724,53.058814,0]]},\n\ "properties":{"Strasse":"Property1"}},\n\ {"type":"Feature","geometry":{"type":"LineString","coordinates":[[8.963,53.02,0],[8.9294,53.044,0]]},\n\ "properties":{"Strasse":"Property2"}}\n\ ]}' }; new MobileAge.Layer.Path(map_1, options); </script>

Result

Example 2: Using a reference to show and remove the path

This example uses the path-object to toggle it, if the map is clicked. Please note that now the data is provided as a simple array of coordinates with in lat/lng-order. This is different to the order of coordinates in GeoJSON, but conforms ISO 6709.

Code

<div id="example_map_2" style="width: 75%;height: 20em;"> </div> <script> var options_2 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_2 = new MobileAge.Component.Map("example_map_2", options_2); var options = { color: 'blue', weight: 20, fitBounds: true, data: '[[53.063197, 8.963348561],[53.058814, 8.9299724]]' }; path_2 = new MobileAge.Layer.Path(map_2, options); map_2.getMap().on('click', function() { if(path_2.shown) { path_2.remove(); } else { map_2.addLayer(path_2); } }); </script>

Result

Example 3: Retrieve a route path

This example requests a route from an internal instance of https://go.openrouteservice.org/. Additionally markers were defined to point on the start- and end-point of the route.

Code

<div id="example_map_3" style="width: 75%;height: 20em;"> </div> <script> var options_3 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_3 = new MobileAge.Component.Map("example_map_3", options_3); var options = { color: 'green', weight: 4, fitBounds: true, startIconUrl: '../assets/images/amenity/start.png', startIconWidth: 64, startIconHeight: 51, startIconAlt: 'Starting Location', endIconUrl: '../assets/images/amenity/end.png', endIconWidth: 128, endIconHeight: 102, endIconAlt: 'Target Location', xhrSource: window.location.protocol + '//' + 'geo.mobile-age.eu/ors/routes', xhrQuery: { profile:'foot-walking', coordinates: '-2.78737717639159,54.0088818|-2.7877131,54.0045839', geometry_format: 'geojson' } }; path_3 = new MobileAge.Layer.Path(map_3, options); map_3.getMap().on('click', function() { if(path_3.shown) { path_3.remove(); } else { map_3.addLayer(path_3); } }); </script>

Result

Options

For a full list of available options, please refer to the Documentation for Path