FacilMap/Version 1/API

From OpenStreetMap Wiki
Jump to navigation Jump to 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
</script>

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: 

map.addAllAvailableLayers();

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");
map.addLayer(layerMarkers);
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);
map.addControl(markersControl);
markersControl.activate();

GPX/KML/OSM/GML files

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");
map.addAllAvailableLayers();
var layerMarkers = new FacilMap.Layer.Markers("Markers");
map.addLayer(layerMarkers);
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);
map.zoomToExtent(layerMarkers.getDataExtent());
</script>

Documentation of advanced features

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=FacilMap/Version_1/API&oldid=1360822"