thurti / nlgamap

JavaScript library for creating interactive thematic maps based on Leaflet.

NLGAMap

NLGAMap is a javascript project based on http://leafletjs.com/. It was designed to make the creation of choropleth maps easier.

Please note that we cannot offer extensive support. Please check the examples in the documentation.

Getting Started

Please see https://www.apps.nlga.niedersachsen.de/tools/NLGAMap for usage instructions and examples.

Prerequisite

• Leaflet
• base map in GeoJSON or TopoJSON format like this for example

Usage

Download the bundled package files

NLGAMap Bundled

Include stylesheets

<link rel="stylesheet" type="text/css" href="path/to/leaflet/leaflet.css">

Include scripts

<!-- Polyfills are optional for better browser support. You can use your own, if you like -->
<script src="path/to/NLGAMap/nlga.polyfills.min.js"></script>

<script src="path/to/leaflet/leaflet.js"></script>
<script src="path/to/NLGAMap/NLGAMap.min.js"></script>

Create a map container div with width and height set through css or html attribute.

<div id="myMap" width="600" height="500"></div>

Create new NLGAMap object and call the render() function.

var map = new NLGAMap({
    id: 'myMap',
    map: {
        center: [lon, lat],
        zoom: 10
    },
    baseLayer: {
        json: 'path/to/my/geo.json'
    },
    layers: {
        choropleth: {
            layerName: 'myLayer',
            title: 'My Data',
            data: {
                geoId: value,
                ...
            }
        }
    }
});

map.render();

Needed Polyfills

• fetch
• Promise
• Object.assign
• classList support (including svg support)

Load as ES6 module

Since NLGAMap is written in ES6 it should be possible to import it as a module in your own ES6 projects (I've never tried it though). Clone the repository and make sure you have installed all the production dependencies from the package.json.

import {NLGAMap} from 'NLGAMap/src/NLGAMap/NLGAMap';

var map = new NLGAMap({...});
map.render();

Development

//clone repository
git clone https://github.com/nlga/NLGAMap.git

//install dependencies
npm install

//start webpack development server http://localhost:8080/dev/
npm start

Built With

• lodash
• geostats
• TopoJSON Client
• colorbrewer
• RainbowVis-JS
• Leaflet.fullscreen
• Font Awesome by Dave Gandy
• innersvg-polyfill
• promise-polfyfill
• whatwg-fetch

Docs are build with ESDoc. Packaging is done with Webpack and Babel.

Contribute

You are very welcome to contribute to NLGAMap. Please see the our contribution guidelines.

Versioning

We use SemVer for versioning.

License

This project is licensed under the BSD 3-Clause License - see the LICENSE.md file for details.

Known Bugs & ToDos

• reduce filesize (drop IE11 support?, use native functions, ...)

• add tests

• fullscreen is not working when the map is loaded in an iframe

• classes legend: marker is not working working for custom colors

• patterns are not printed in chrome

• printing is not consistent accross different browsers

• Refactor

  • prefix timeline css with "nlga_map-..."
  • prefix symbols css with "nlga_map-..."
  • seperate packages as leafelt plugins (eg. Timeline, TimelineControl, ArrowMarker, BarsMarker, CircleMarker)
  • export utils as seperate functions instead of static class methods

• Features

  • SVG, PNG export
  • WFS Layer integration
  • multiple choropleth layers
  • choropleth: add props from data object to popup template
  • add histogram to legend