- Displays geoJSON Points
- Clustering via PruneCluster
- Popup with image display, special support for Mediawiki storage
- Filtering system, builds filter menu out of RDF graph provided by Wikibase
To embed the TransforMap-Viewer into your own website, the simplest way is via an iframe:
<iframe width="1200" height="500" src="https://susy-mapviewer.github.io/transformap-viewer/"></iframe>
You can change the background layer via the param "background" (e.g. src="http://viewer.transformap.co/?background=mapnik#5/51.166/10.451"). Currently 4 layers are supported:
- background=stamen_terrain_bg : Default, only terrain without any labels, roads or buildings.
- background=stamen_terrain : terrain with (a few) labels, roads and buildings later
- background=mapnik : Default OpenStreetMap 'Mapnik'/'OSM-Carto' style
- background=hot : Humanitarian OSM style. Temperate colors, very detailed.
If you want to change anything else, e.g. color scheme or the displayed data, fork it and embed it from your fork's gh-pages.
Translation for the filter-menu are directly fetched from Wikibase. All other strings are are handled via weblate.transformap.co. You can help translating, just sign up! It stores its translations here: https://github.com/TransforMap/transformap-viewer-translations.
Note: The English translations are handled in the source repository directly.
To add new strings, you have to add them currently manually to scripts/map.js and in the translation repository, to each of the language files in json/*.json.
This service relies heavily on different linked data backends, see flowchart:
Is created via less.
Do not edit the CSS file in styles/css/style.css, edit styles/less/style.less and compile to css.
Install node less compiler to convert the stylesheet to less css:
aptitude install node-less
npm install less -g
Compile it via :
lessc styles/less/style.less styles/css/style.css
Install bower from npm:
[sudo] npm install -g bower
Debian: install npm:
[sudo] aptitude install npm nodejs-legacy
Fetch external dependencies:
The site can be viewed at https://susy-mapviewer.github.io/transformap-viewer/. Just push the branch gh-pages to update the site.
Notes: for libraries used with bower, add a static copy of the files to the gh-pages branch to its location in bower_components/ (and add an exception to the .gitignore-file).
build concatenated and minified js/css
npm install once to install needed development dependencies.
npm run build each time js and/or css has been changed to update the content in the
Coding Style guide
We use spaces (2) instead of tabs, please also use this convention.
Currently, there are 3 "branches" of development: