From OpenStreetMap Wiki
< FacilMap(Redirected from Cdauth’s map/API)
Jump to: navigation, search

The project used to be called cdauth’s map. See /Migration guide from cdauth’s map for an overview of what has changed.

Developer resources are collected on http://dev.facilmap.org/.

There are two branches of the API, a stable and a beta branch. The stable branch is available on http://api.facilmap.org/ and the beta branch on http://beta.facilmap.org/api/. Updates are not guaranteed to be backwards compatible, so if you require high reliability, place a copy of FacilMap on your webspace or include a specific build from http://api.facilmap.org/builds/ or http://beta.facilmap.org/api/builds/.

FacilMap relies on OpenLayers and jQuery and should thus support all browsers that both of the libraries support ([1], [2]). Internet Explorer 6 is not supported.

A demo is available on http://api.facilmap.org/demo.html and http://beta.facilmap.org/api/demo.html.

Basic map

To use FacilMap, you have to include these two JavaScripts at least:

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://api.facilmap.org/facilmap.js"></script>

If you want to use XML APIs like the NameFinder or GPX layers, be sure to include the ajax-proxy before facilmap.js:

<script type="text/javascript" src="http://api.facilmap.org/ajax-proxy/ajax-proxy.js"></script>

To create a map on your web page, use the following code then:

<div id="map"></div>
<script type="text/javascript">
var map = new FacilMap.Map("map"); // "map" is the id of the div

Adding layers

You can either add your desired layers in your desired order or add all available base layers at once. Use this command to add a specific layer:

map.addLayer(new FacilMap.Layer.OSM.Mapnik("Mapnik"));

With this code, you add all available layers:


These layers are available:

  • OpenStreetMap layers
    • FacilMap.Layer.OSM.Mapnik: OpenStreetMap Mapnik rendering.
    • FacilMap.Layer.OSM.Osmarender: OpenStreetMap Osmarender rendering.
    • FacilMap.Layer.OSM.CycleMap: OpenStreetMap CycleMap rendering from [3].
    • FacilMap.Layer.OSM.OpenStreetBrowser: Rendering from OpenStreetBrowser ([4]).
    • FacilMap.Layer.OSM.Wanderkarte: „OSMC Reit- und Wanderkarte“ rendering of bridle- and hiking paths ([5]).
    • FacilMap.Layer.OSM.HikeAndBike: „Hike & Bike Map“ rendering of hiking and biking features ([6]).
    • FacilMap.Layer.OSM.OpenPisteMap: OpenPisteMap from [7].
    • FacilMap.Layer.OSM.OPNVKarte: ÖPNV-Karte rendering of PSV routes ([8]).
    • FacilMap.Layer.OSM.MapSurfer.Road: MapSurfer Road map from [9].
    • FacilMap.Layer.OSM.MapSurfer.Topographic: MapSurfer Topographic map from [10].
    • FacilMap.Layer.OSM.Kybl3DMap: Isometric 3D map of the Czech Republic from [11]
    • FacilMap.Layer.OSM.OOMLabels: OpenOrienteeringMap labels overlay from [12]
    • FacilMap.Layer.OSM.OOMStreets: OpenOrienteeringMap streets overlay from [13] (useful in combination with satellite images)
    • FacilMap.Layer.OSM.OpenPTMap: Openptmap transport overlay from [14]
  • Google layers: Get a Google Maps key from [15] and include http://maps.google.com/maps?file=api&v=2&key=[Your key] for these layers to work.
    • FacilMap.Layer.Google.Maps: Google Maps
    • FacilMap.Layer.Google.MapsSatellite: Google Satellite
    • FacilMap.Layer.Google.MapsHybrid: Google Hybrid (Satellite with streets overlay)
    • FacilMap.Layer.Google.MapsTerrain: Google Terrain
    • FacilMap.Layer.Google.MapMaker: Google MapMaker ([16])
    • FacilMap.Layer.Google.MapMakerHybrid: Google MapMaker Hybrid (Satellite with MapMaker overlay)
  • Yahoo layers: Include http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=facilmap (or any other appid) for these to work.
    • FacilMap.Layer.Yahoo.Maps: Yahoo Maps
    • FacilMap.Layer.Yahoo.Satellite: Yahoo Satellite
    • FacilMap.Layer.Yahoo.Hybrid: Yahoo Hybrid (Satellite with street overlay)
  • FacilMap.Layer.other.Relief: Relief overlay
  • FacilMap.Layer.CoordinateGrid: Coordinate grid
  • FacilMap.Layer.other.OSStreetView: Ordnance Survey Street View layer from [17]

Search panel

You can add a panel to your map that enables the user to search for places, display GPX files and calculate routes. Use the following code for that:

map.addControl(new FacilMap.Control.Search());

Permalink markers

You can create a layer that allows adding markers at specified positions that list Permalinks to other web-based maps:

var layerMarkers = new FacilMap.Layer.Markers.LonLat("Markers");
layerMarkers.addLonLatMarker(new OpenLayers.LonLat(11.54321, 48.12345), "Title (optional)");

If you want a marker to be created automatically when clicking on the map, use the following code:

var markersControl = new FacilMap.Control.createMarker(layerMarkers);


To show a GPX, KML, OSM or GML file on the map, use the following code:

map.addLayer(new FacilMap.Layer.XML("Example OSM file", "http://www.openstreetmap.org/api/0.6/relation/80049", { colour : "blue" }));

“Example OSM file” is the layer name. If you do not provide a colour, a random one will be chosen.

Example: Map with all layers and two markers

Remember to insert your Google Maps key ([18]).

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[your key]"></script>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&amp;appid=facilmap"></script>
<script type="text/javascript" src="http://api.facilmap.org/facilmap.js"></script>
<div id="map"></div>
<script type="text/javascript">
var map = new FacilMap.Map("map");
var layerMarkers = new FacilMap.Layer.Markers("Markers");
layerMarkers.createMarker(new OpenLayers.LonLat(11.12345, 48.54321), "<strong>This popup will be opened initially.</strong>", true);
layerMarkers.createMarker(new OpenLayers.LonLat(10.12345, 48.12345), "<strong>This popup will be closed initially.</strong>", false);

Documentation of advanced features