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.maptime.in/api/interpreter.
|
39 |
|
40 | ### Setup
|
41 |
|
42 | - Install dependencies using `npm install`.
|
43 |
|
44 | ### Build
|
45 |
|
46 | - Build the plugin by `npm run build`.
|
47 | - 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.
|
48 |
|
49 | ### Development
|
50 |
|
51 | - `nvm use 8.15.1` # Use node 8.15, [nvm](https://github.com/nvm-sh/nvm) is recommended
|
52 | - `yarn add react react-dom` # Install those packages manually
|
53 | - `yarn install` # Install packages
|
54 | - `yarn start` # To get going …
|