Mobile Age - Component - Map - Marker
A component to display markers on a given map
How to add a marker to a map
- 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>
- 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>
- 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="font-size: 1.4em">\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