Mobile Age - Component - Map - Marker

A component to display markers on a given map

How to add a marker to a map

  1. Assuming a map exists
    <script> var options = { tileserver_url: window.location.protocol + '//' + 'geo.mobile-age.eu/tiles/', fullsize: false, centerLng: 8.96767, centerLat: 53.06184, zoom: 15 }; var map = new MobileAge.Component.Map("unique_id", options); <script>
  2. Use a JavaScript array to initialize your markers with the desired options, e.g. source data, image to be used etc.
    <script> var options = { iconUrl: '../assets/images/amenity/toilets.png', zindexoffset: 1000, alt: 'Toilet', category: 'amenity', type: 'toilets', queryService: 'Overpass', dataPath: 'elements', xhrSource: 'http://overpass-api.de/api/interpreter' }; <script>
  3. Add the markers to the map.
    <script> new MobileAge.Layer.Marker(map, options); <script>

Example 1: Data provided during initialisation

This example is the simplest way to add Markers 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 = { iconUrl: '../assets/images/amenity/toilets.png', iconWidth: 64, iconHeight: 51, data: '{"name":"NetteToiletten","type":"FeatureCollection","features":[\n\ {"type":"Feature", "geometry":{"type":"Point","coordinates":[8.963348561,53.063197,0]},\n\ "properties":{"Name":"Dallas Bistro","Strasse":"Kaiserslauterner Straße 9"}},\n\ {"type":"Feature","geometry":{"type":"Point","coordinates":[8.9299724,53.058814,0]},\n\ "properties":{"Name":"Esso-Tankstelle","Strasse":"Osterholzer Heerstraße 83"}}\n\ ]}' }; new MobileAge.Layer.Marker(map_1, options); </script>

Result

Example 1: Different data structures

In this example data in another format is provided. In that case the entry-point as well as a data mapping can be provided. Additionally an info window is attached that displays the data using a template, if the marker 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 = { iconUrl: '../assets/images/amenity/bench.png', iconWidth: 64, iconHeight: 51, dataPath: 'data', dataLatLonMapping: { 'lon': 'longitude', 'lat': 'latitude' }, templateInfoWindow: '<div style="font-size: 1.4em">\n\ <table>\n\ <tr><td colspan="2" style="font-size: 1.8em"><strong><%tags.Name%></strong></td></tr>\n\ <tr><td><strong>Street / No.:</strong></td><td><%tags.Strasse%></td></tr>\n\ </table>\n\ </div>', data: '{"data":[\n\ {"longitude":8.963348561,"latitude": 53.063197,\n\ "tags":{"Name":"Dallas Bistro","Strasse":"Kaiserslauterner Straße 9"}},\n\ {"longitude":8.9299724,"latitude": 53.058814,\n\ "tags":{"Name":"Esso-Tankstelle","Strasse":"Osterholzer Heerstraße 83"}}\n\ ]}' }; new MobileAge.Layer.Marker(map_2, options); </script>

Result

Example 3: Data from a web service

In this example the data is retrieved by the public Overpass-API http://overpass-api.de/api/interpreter Also here an info window is attached that displays the data using a template, if the marker is clicked. To avoid a huge amount of markers, they are normally clustered by default. For demonstration purposes it is disabled here.

The Overpass-API provides all kinds of map features. Which type shall be retrieved can be set by providing a category and a type. The number of requests is limited per IP/time and may result in 429 (To many requests).

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 = { debug: true, iconUrl: '../assets/images/amenity/toilets.png', iconWidth: 64, iconHeight: 51, category: 'amenity', type: 'toilets', templateInfoWindow: '<div style="font-size: 1.4em">\n\ <table>\n\ <tr><td colspan="2" style="font-size: 1.8em"><strong><%tags.description%></strong></td></tr>\n\ <tr><td><strong>Street / No.:</strong></td><td><%tags.addr:street%> <%tags.addr:housenumber%></td></tr>\n\ <tr><td><strong>Zip / City:</strong></td><td><%tags.addr:postcode%> <%tags.addr:city%></td></tr>\n\ <tr><td><strong>Opening Hours:</strong></td><td><%tags.opening_hours%></td></tr>\n\ </table>\n\ </div>', clustered: false, queryService: 'Overpass', xhrMethod: 'GET', dataPath: 'elements' }; new MobileAge.Layer.Marker(map_3, options); </script>

Result

Example 3a: Data from a Zaragoza web service

In this example the data is retrieved by the public API of Zaragoza https://www.zaragoza.es/api/recurso/mapas-colaborativos/579.geojson?srsname=wgs84; the corresponding front end can be found at https://www.zaragoza.es/sede/servicio/mapa-colaborativo/ Also here an info window is attached that displays the data using a template, if the marker is clicked. To avoid a huge amount of markers, they are clustered by default. For demonstration purposes it is disabled here.

Code

<div id="example_map_3a" style="width: 75%;height: 20em;"> </div> <script> var options_3a = { centerLng: -0.9050622, centerLat: 41.66697 }; var map_3a = new MobileAge.Component.Map("example_map_3a", options_3a); var options = { debug: true, iconUrl: '../assets/images/amenity/architektur.png', iconWidth: 64, iconHeight: 51, templateInfoWindow: '<div style="font-size: 1.4em">\n\ <table>\n\ <tr><td style="font-size: 1.8em"><strong><%properties.title%></strong></td></tr>\n\ <tr><td><%properties.description%></td></tr>\n\ </table>\n\ </div>', // clustered: false, xhrSource: 'https://www.zaragoza.es/api/recurso/mapas-colaborativos/579.geojson?srsname=wgs84', xhrMethod: 'GET' }; new MobileAge.Layer.Marker(map_3a, options); </script>

Result

Example 4: Data from OSCPSEP

In this example pharmacies are queried from OSCPSEP.

Code

<div id="example_map_4" style="width: 75%;height: 20em;"> </div> <script> var options_4 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_4 = new MobileAge.Component.Map("example_map_4", options_4); var options = { iconUrl: '../assets/images/amenity/pharmacy.png', iconWidth: 64, iconWeight: 51, queryService: 'MobileAge', dataPath: 'results', dataLatLonMapping: { 'lon': 'longitude', 'lat': 'latitude' }, templateInfoWindow: '<div style="font-size: 1.4em">\n\ <table>\n\ <tr><td colspan="2" style="font-size: 1.8em"><strong><%name%></strong></td></tr>\n\ <tr><td><strong>Street / No.:</strong></td><td><%street%> <%house_number%></td></tr>\n\ <tr><td><strong>Zip / City:</strong></td><td><%post_number%> <%post_name%></td></tr>\n\ <tr><td><strong>Phone:</strong></td><td><%phone_number%></td></tr>\n\ </table>\n\ </div>' }; new MobileAge.Layer.Marker(map_4, options); </script>

Result

Example 5: Marker styling

In this example some differently styled markers are added. Please note that the toilet markers are always on top, because their z-index is set to 1000. The ordering will NOT work with clustered markers, so you will have to explicitely set 'clustered: false'.

Code

<div id="example_map_5" style="width: 75%;height: 20em;"> </div> <script> var options_5 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_5 = new MobileAge.Component.Map("example_map_5", options_5); // START: Generate some data data = []; for(var i = 0; i<10;i++) { data.push([53.06 + ((Math.random() - 0.5) * 2 * 0.025), 8.96 + ((Math.random() - 0.5) * 2 * 0.05)]); } // END: Generate some data var options = { iconUrl: '../assets/images/amenity/toilets.png', iconWidth: 127, iconHeight: 102, clustered: false, zIndex: 1000, alt: 'Toilet', data: JSON.stringify(data) }; new MobileAge.Layer.Marker(map_5, options); // START: Generate some data data = []; for(var i = 0; i<10;i++) { data.push([53.06 + ((Math.random() - 0.5) * 2 * 0.025), 8.96 + ((Math.random() - 0.5) * 2 * 0.05)]); } // END: Generate some data var options = { iconUrl: 'https://image.flaticon.com/icons/png/512/119/119058.png', iconWidth: 64, iconHeight: 64, clusterIconUrl: 'https://image.flaticon.com/icons/png/128/119/119060.png', clusterIconScaleFactor: 1.5, clusterIconCss: 'outline: 2px solid black;', clusterShowNumber: false, data: JSON.stringify(data) }; new MobileAge.Layer.Marker(map_5, options); // START: Generate some data data = []; for(var i = 0; i<10;i++) { data.push([53.06 + ((Math.random() - 0.5) * 2 * 0.025), 8.96 + ((Math.random() - 0.5) * 2 * 0.05)]); } // END: Generate some data var options = { iconWidth: 100, iconHeight: 100, data: JSON.stringify(data) }; new MobileAge.Layer.Marker(map_5, options); </script>

Result

Example 6: Performance

In this example 10000 random markers are set and clustered.

Code

<div id="example_map_6" style="width: 75%;height: 20em;"> </div> <script> var options_6 = { centerLng: 8.963348561, centerLat: 53.063197 }; var map_6 = new MobileAge.Component.Map("example_map_6", options_6); data = []; for(var i = 0; i<10000;i++) { data.push([53.06 + ((Math.random() - 0.5) * 2 * 0.01), 8.96 + ((Math.random() - 0.5) * 2 * 0.01)]); } var options = { templateInfoWindow: '<div style=&quot;font-size: 1.4em&quot;>\n\ <table>\n\ <tr><td><strong>Latitude:</strong></td><td><%0%></td></tr>\n\ <tr><td><strong>Logitude:</strong></td><td><%1%></td></tr>\n\ </table>\n\ </div>', data: JSON.stringify(data) }; new MobileAge.Layer.Marker(map_6, options); </script>

Result

Options

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