1 | ### OSM Changeset Viewer on a GL Map
|
2 |
|
3 | ![](https://cloud.githubusercontent.com/assets/126868/24163445/a88728d4-0e90-11e7-9d02-d755b7845c00.png)
|
4 |
|
5 | Very experimental work in progress. The idea being that you can pass a changeset id and a container HTML element where you want the map rendered, and this plugin should render details of changes made by that changeset in the specified HTML element on a MapboxGL map.
|
6 |
|
7 | Heavily inspired by the ACHAVI Changeset Viewer: http://wiki.openstreetmap.org/wiki/Achavi
|
8 |
|
9 | ### Use as a module
|
10 |
|
11 | Create a container div to hold the UI.
|
12 |
|
13 | ```html
|
14 | <div id='container'></div>
|
15 | ```
|
16 |
|
17 | ```js
|
18 | // es6 modules
|
19 | import {getChangeset, query, propsDiff, render} from 'changeset-map';
|
20 |
|
21 | // commonjs
|
22 | var changesetMap = require('changeset-map');
|
23 | var render = changesetMap.render;
|
24 |
|
25 | var container = document.getElementById('container');
|
26 | var changesetMapControl = render(container, changesetID, { width: '1000px', height: '1000px' });
|
27 |
|
28 | // binding events
|
29 | changesetMapControl.on('load', function () {
|
30 | changesetMapControl.emit('selectFeature', 'node|way', featureId);
|
31 | changesetMapControl.emit('clearFeature');
|
32 | changesetMapControl.on('hashchange', function(geometryType, featureId) {
|
33 | // update hash.
|
34 | });
|
35 | })
|
36 | ```
|
37 |
|
38 | For a custom overpass instance, set a `overpassBase` key in the options object. Default instance is https://overpass-api.de/api/interpreter.
|
39 |
|
40 | ### Setup
|
41 |
|
42 | - Install dependencies using `npm install`.
|
43 |
|
44 | ### Build
|
45 | - Build the plugin by `npm run build`.
|
46 | - Build the website by `npm run build:website`, the websites html can be found in `public` folder. The javascript code to run changeset map can be found in `www` folder.
|
47 |
|
48 | ### Test Locally
|
49 |
|
50 | Run `npm run start` to start a server. Go to the browser at the port where the webserver is running. eg. `http://localhost:8080`
|
51 |
|