A fully-featured OpenStreetMap-based map where markers and lines can be added with live collaboration.

Go to file

Candid Dauth 670a8dd56b Fix error when updating objects on some platforms On some platforms. Sequelize.update() returns 0 even if the rows were found, if no fields have been changed.		2016-12-27 15:25:02 +01:00
artwork	Add artwork to separate folder	2016-12-27 13:56:11 +01:00
frontend	Add artwork to separate folder	2016-12-27 13:56:11 +01:00
server	Fix error when updating objects on some platforms	2016-12-27 15:25:02 +01:00
.gitignore	Restructure: Only one package.json and bower.json in main directory	2016-10-18 13:37:33 +03:00
Dockerfile	Rebrand to FacilMap	2016-10-18 21:27:57 +03:00
LICENSE.md	…
README.md	Add new features to README	2016-11-01 20:17:17 +03:00
bower.json	Set version number 2.1.0	2016-12-27 12:39:50 +01:00
config.js	Change links from pad.facilmap.org to facilmap.org	2016-10-19 13:41:16 +03:00
gulpfile.js	Restructure: Only one package.json and bower.json in main directory	2016-10-18 13:37:33 +03:00
package.json	Set version number 2.1.0	2016-12-27 12:39:50 +01:00

README.md

FacilMap is an online map that aims to bring together many useful functions in a usable and pretty way onto an open-source map based on OpenStreetMap. Features include:

Different map styles: OpenMapSurfer, Mapnik, OpenCycleMap, Hike & Bike map.
Public Transportation and hillshading overlays.
Search and calculate routes. Routes are fully draggable. (Uses Nominatim, Mapbox, OSRM.)
Show GPX/KML/OSM/GeoJSON files on the map (use Tools → Import File, type a URL into the search field, or simply drag and drop a file onto the map)
Show additional information about places (for example opening hours or a link to the website). Press the map for 1 second somewhere to show information about what is there. (Uses Nominatim.)
Zoom to the location of your device and follow it. (Uses leaflet-locatecontrol.)
Create a collaborative map under a custom link where you and others can add markers, draw lines, save routes and import GPX/KML/OSM/GeoJSON files
- Every map has two links, a read-only one and one where it can be edited. Everyone who has the link can access the map (similar to Etherpad, just for maps).
- Live collaboration. All changes to the map are immediately visible to everyone who is looking at it (using socket.io.
- Markers and lines can have a name and description, which will be visible in a popup when clicking on it.
- Custom types of markers and lines can be defined, where in addition to the name and description, more text fields, dropdowns and checkboxes can be added to be filled out. Custom dropdown fields can modify the style (colour and width) of the markers and lines automatically, and a legend is generated automatically to explain what the different styles stand for.
- The current map view can be saved for others to open.
- Map objects that do not fit a certain filter expression can be hidden (using Filtrex)
- There is a modification history and changes can be undone
Can be easily run on your server or embedded into your website (see below).

On the client side, FacilMap relies heavily on AngularJS, Leaflet and Bootstrap. On the server side, it uses https://nodejs.org/, Sequelize and socket.io.

Embedding into a website

Using an iframe

It is perfectly fine to embed a map from facilmap.org into an iframe.

<iframe style="height: 500px; width: 100%; border: none;" src="https://facilmap.org/mymap"></iframe>

Directly into a page

Include all.js and all.css (which includes all dependencies) or app.js and app.css (if you want to include the dependencies yourself, see bower.json) into you page. If you want to build those files yourself, check out this repository, run npm run build and find them in frontend/build/.

Now include socket.io, and, if you want to use a different server than https://facilmap.org/, set the server URL:

<script src="https://facilmap.org/socket.io/socket.io.js"></script>
<script>
    FacilPad.SERVER = "https://facilmap.org/";
</script>

Now, if your page uses angular, simply add the facilmap module as a dependency to your application:

angular.module("myapp", [ "facilmap" ]);

Otherwise, add the ng-app attribute to your html element:

<!DOCTYPE html>
<html ng-app="facilmap">

Now, anywhere on your page, you can add a facilmap element:

<facilmap id="map" fm-map-id="mymap"></facilmap>

fm-map-id is the map ID as it would appear on https://facilmap.org/mymap. It can be a read-only or read-write ID.

Running the server

Using docker

FacilMap is available as facilmap/facilmap2 on Docker Hub. Here is an example docker-compose.yml:

facilmap:
    image: facilmap/facilmap2
    ports:
        - 8080
    external_links:
        - mysql_mysql_1
    environment:
        USER_AGENT: My FacilMap (https://facilmap.example.org/, facilmap@example.org)
        DB_TYPE: mysql
        DB_HOST: mysql_mysql_1
        DB_NAME: facilmap
        DB_USER: facilmap
        DB_PASSWORD: password
    restart: on-failure

Or the same using docker create:

docker create --link=mysql_mysql_1 -p 8080 --name=facilmap -e "USER_AGENT=My FacilMap (https://facilmap.example.org/, facilmap@example.org)" -e DB_TYPE=mysql -e DB_HOST=mysql_mysql_1 -e DB_NAME=facilmap -e DB_USER=facilmap -e DB_PASSWORD=facilmap --restart on-failure facilmap/facilmap2

See below for the available config options.

Both the FacilMap server and the frontend will be available via HTTP on port 8080. It is recommended to use a reverse proxy, such as rankenstein/https-proxy-letsencrypt, to make it available over HTTPS.

Standalone

To run the FacilMap server by hand, follow the following steps:

Make sure that you have a recent version of Node.js and a database (MariaDB, MySQL, PostgreSQL, SQLite, Microsoft SQL Server) set up. (Note that only MySQL has been tested so far.)
Check out this repository (git clone https://github.com/FacilMap/facilmap2.git)
Customise config.js (see options below)
Run npm install mysql, npm install pg, npm install sqlite3, or npm install tedious (for MSSQL), depending on which database you want to use.
Run npm start

Config

The config can be set either by using environment variables (useful for docker) or by editing config.js.

`config.js` value	Environment variable	Meaning
`userAgent`	`USER_AGENT`	Will be used for all HTTP requests (search, routing, GPX/KML/OSM/GeoJSON files). You better provide your e-mail address in here.
`host`		The ip address to listen on.
`port`		The port to listen on.
`db.type`	`DB_TYPE`	The type of database. Either `mysql`, `postgres`, `mariadb`, `sqlite`, or `mssql`.
`db.host`	`DB_HOST`	The host name of the database server (default: `localhost`).
`db.port`	`DB_PORT`	The port of the database server (optional).
`db.database`	`DB_NAME`	The name of the database (default: `facilmap`).
`db.user`	`DB_USER`	The username to connect to the database with (default: `facilmap`).
`db.password`	`DB_PASSWORD`	The password to connect to the database with.