FacilMap/API

From OpenStreetMap Wiki
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.

Contents

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:

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 "http://wiki.openstreetmap.org/wiki/FacilMap/API"
Personal tools
Namespaces
Variants
Actions
site
Toolbox