Mobile Age - Component - Map - Polygon

A component to display a polygon on a given map

How to add a polygon 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 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>
  3. 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