Overview

The Leaflet components of FacilMap are classes that you can use to show FacilMap data on a Leaflet map.

The Leaflet components are only useful in combination with a FacilMap client instance. Most components either require an object created by the client as an argument, or require the client instance itself and render the available map data automatically.

Components

• BboxHandler automatically calls updateBbox() when the position of the map changes.
• Layers provides the layers that FacilMap offers by default and helpers to show them.
• Markers shows the markers of a collaborative map.
• Lines shows the lines of a collaborative map.
• Route allows showing a calculated route on the map.
• Search renders search results.
• Overpass shows amenities and POIs in the current map bounds using the Overpass API.
• Icons provides methods to draw marker icons and shapes.
• HashHandler hooks up the location hash to the current map view.
• Views allow controlling the map view and handling saved views.
• Filter expressions can be used to control which markers/lines are visible on the map.
• Click listener is a helper to ask the user to click somewhere on the map.

Setup

The Leaflet components are published on npm as facilmap-leaflet. The recommended way to use them is to install the package using npm or yarn:

npm install -S facilmap-leaflet

import L from "leaflet";
import Client from "facilmap-client";
import { BboxHandler } from "facilmap-leaflet";

const map = L.map('map');
const client = new Client("https://facilmap.org/");
new BboxHandler(map, client).enable();

However, a build to use the components directly in the browser is also available. The build contains all the dependencies except Leaflet, including the FacilMap client. The components are available in the global L.FacilMap object.

<script src="https://unpkg.com/leaflet@1"></script>
<script src="https://unpkg.com/facilmap-leaflet@3/dist/facilmap-leaflet.full.js"></script>
<script>
	const map = L.map('map');
	const client = new FacilMap.Client("https://facilmap.org/");
	new L.FacilMap.BboxHandler(map, client).enable();
</script>

Example

An example that shows all the Leaflet components in actions can be found in example.html (demo).