Mobile Age - Component - Map - Path
A component to display a path on a given map
How to add a path to a map
- Assuming a map exists
<script>
var options = {
centerLng: 8.96767,
centerLat: 53.06184
};
var map = new MobileAge.Component.Map("unique_id", options);
<script>
- 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>
- 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