Mobile Age - Component - Map

A component to display a map inside a div

How to create a map

  1. Use HTML code to specify a container with a unique id
    <div id="unique_id"> ... some html used if JS doesn't work ... </div>
  2. Use a JavaScript array to initialize your map with the desired options, e.g. zoom level or center position etc.
    <script> var options = { tileserver_url: window.location.protocol + '//' + 'geo.mobile-age.eu/tiles/', fullsize: false, centerLng: 8.96767, centerLat: 53.06184, zoom: 15 }; <script>
  3. Create a new map object, where as first parameter is the selector specifing the html container. The second parameter is the array of the actually used options.
    <script> var map = new MobileAge.Component.Map("unique_id", options); <script>

Example 1: A simple map

This example is the simplest way to include a map using Mobile Age's map style on a page. The size is determined by the size of the elements where the map is applied.

Code

<div id="example_map_1" style="width: 100%;height: 20em;"> ... unobtrusive code ... </div> <script> var options_1 = { centerLng: 8.96767, centerLat: 53.06184 }; var map = new MobileAge.Component.Map("example_map_1", options_1); </script>

Result

Example 2: A map using a different tile-server

The customized tiles are currently provided only for

  • Bremen (Germany)
  • South Lakeland (UK)
  • Zaragoza (Spain)
  • and the region of Central Macedonia (Greece)
If you want to use a different tile-server, you could just provide a sufficient URI. Please note, that also the attribution was changed here.

Code

<div id="example_map_2" style="width: 75%;height: 20em;"> ... unobtrusive code ... </div> <script> var options_2 = { tileserver_url: 'c.tile.openstreetmap.org/', centerLng: 8.96767, centerLat: 53.06184, attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA' }; var map_2 = new MobileAge.Component.Map("example_map_2", options_2); </script>

Result

Options

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