osmlab / Changeset Map
Licence: isc
Visualise a changeset on a map
Stars: ✭ 27
Programming Languages
javascript
184084 projects - #8 most used programming language
OSM Changeset Viewer on a GL Map
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.
Heavily inspired by the ACHAVI Changeset Viewer: http://wiki.openstreetmap.org/wiki/Achavi
Use as a module
Create a container div to hold the UI.
<div id='container'></div>
// es6 modules
import {getChangeset, query, propsDiff, render} from 'changeset-map';
// commonjs
var changesetMap = require('changeset-map');
var render = changesetMap.render;
var container = document.getElementById('container');
var changesetMapControl = render(container, changesetID, { width: '1000px', height: '1000px' });
// binding events
changesetMapControl.on('load', function () {
changesetMapControl.emit('selectFeature', 'node|way', featureId);
changesetMapControl.emit('clearFeature');
changesetMapControl.on('hashchange', function(geometryType, featureId) {
// update hash.
});
})
For a custom overpass instance, set a overpassBase
key in the options object. Default instance is https://overpass.maptime.in/api/interpreter.
Setup
- Install dependencies using
npm install
.
Build
- Build the plugin by
npm run build
. - Build the website by
npm run build:website
, the websites html can be found inpublic
folder. The javascript code to run changeset map can be found inwww
folder.
Development
-
nvm use 8.15.1
# Use node 8.15, nvm is recommended -
yarn add react react-dom
# Install those packages manually -
yarn install
# Install packages -
yarn start
# To get going …
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].