Historia

Candid Dauth 16b7ae18fa Publish v2.4.0		2017-03-30 16:17:01 +02:00
..
app	Add adminId (fixes #12 )	2017-03-30 16:01:46 +02:00
assets/font	Split into 3 reusable modules and document them (#34 ), bump version to 2.3.0	2017-02-22 03:45:35 +01:00
common	Restructuring, move some files to static/, outsource common frontend functions	2017-03-01 19:52:50 +01:00
index	Restructuring, move some files to static/, outsource common frontend functions	2017-03-01 19:52:50 +01:00
static	Restructuring, move some files to static/, outsource common frontend functions	2017-03-01 19:52:50 +01:00
table	Make table columns resizable (does not work very well)	2017-03-01 20:21:28 +01:00
.npmignore	Split into 3 reusable modules and document them (#34 ), bump version to 2.3.0	2017-02-22 03:45:35 +01:00
README.md	Document accessing a non-existing map ID (#65 )	2017-03-30 15:41:00 +02:00
entry.js	Use yarn and webpack for building (#44 )	2017-02-09 12:45:42 +01:00
gulpfile-icons.js	Add option to control marker size and symbol	2016-10-24 03:57:21 +03:00
gulpfile.js	Use bluebird for long stack traces	2017-03-04 20:35:26 +01:00
package.json	Publish v2.4.0	2017-03-30 16:17:01 +02:00
webpack-duplicates.js	Detect duplicate yarn dependencies in webpack build	2017-02-09 18:48:36 +01:00
webpack.config.js	Render table as static html under fixed URL (fixes #58 )	2017-03-01 20:02:57 +01:00
yarn.lock	Publish v2.4.0	2017-03-30 16:17:01 +02:00

README.md

Embedding FacilMap 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>

If you use a map ID that does not exist yet, the “Create Collaborative Map” dialog will be opened when accessing the map.

Directly into a page

Install facilmap-frontend as a dependency using npm or yarn:

npm install --save facilmap-frontend

yarn add facilmap-frontend

or load the client directly from facilmap.org:

<script src="https://facilmap.org/frontend.js"></script>

If you application is using Webpack, require the dependency like this:

import 'facilmap-frontend';

Note that for this you will have to look into the webpack.config.js file and configure your loaders in a similar way. To include the whole bundle with all the dependencies, use this instead:

import 'facilmap-frontend/build/frontend';

Now, if your web application is already using Angular JS, add facilmap as a dependency:

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

Otherwise, bootstrap FacilMap like this:

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

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

<facilmap id="map" fm-server-url="https://facilmap.org/" 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.

Development

Make sure to have yarn installed. Install the dependencies using yarn run deps and bundle the JavaScript by running yarn run build.

A better way to develop the frontend is to start facilmap-server in dev mode. It will set up a webpack-dev-server that automatically recompiles the frontend when a file changes, and even delays reloads until compilation has finished.