Mobile Age - Component - Map - Polygon
A component to display a polygon on a given map
How to add a polygon 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 polygon with the desired options,
e.g. source data, image to be used etc.
<script> var options = { color: 'red', weight: 10, data: any array[] }; <script>
- Add the polygon to the map.
<script> new MobileAge.Layer.Polygon(map, options); <script>
Example 1: Data provided during initialisation
This example is the simplest way to add a polygon by directly providing data.
Code
<div id="example_map_1" style="width: 75%;height: 20em;">
... unobtrusive code ...
</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: 1,
data: '[[53.063197, 8.963348561],[53.058814, 8.9299724],[53.068, 8.94]]'
};
new MobileAge.Layer.Polygon(map_1, options);
</script>
Result
Example 2: Using a reference to show and remove the polygon
This example uses the polygon-object to toggle it, if the map is clicked.
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: 15,
data: '[[53.063197, 8.963348561],[53.058814, 8.9299724],[53.068, 8.94]]'
};
polygon_2 = new MobileAge.Layer.Polygon(map_2, options);
map_2.getMap().on('click', function() {
if(polygon_2.shown) {
polygon_2.remove();
} else {
map_2.addLayer(polygon_2);
}
});
</script>
Result
Example 3: Calling an internal platform service
This example uses data provided from an instance of https://go.openrouteservice.org/ that calculates isochrones of reachability based on given parameters.
Code
var options_3 = {
centerLng: 8.934593,
centerLat: 53.05928
};
var map_3 = new MobileAge.Component.Map("example_map_3", options_3);
var options = {
debug: true,
color: 'blue',
weight: 1,
fitBounds: true,
xhrSource: window.location.protocol + '//' + 'geo.mobile-age.eu/ors/isochrones',
xhrQuery: {
attributes:'area|reachfactor',
format: 'json',
interval: 420,
location_type: 'start',
locations: '8.934593,53.05928',
profile: 'foot-walking',
range: 3720,
range_type: 'time'
}
};
polygon_3 = new MobileAge.Layer.Polygon(map_3, options);
map_3.getMap().on('click', function() {
if(polygon_3.shown) {
polygon_3.remove();
} else {
map_3.addLayer(polygon_3);
}
});
</script>
Result
Options
For a full list of available options, please refer to the Documentation for Polygon