Skip to content
Workshop voor DataViz Festival https://www.vizualism.com/festival/
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
d3-js
data
leaflet-js
mapbox-gl-js
presentation
README.md
aarbevingen_gem.csv
index.html

README.md

Geo Visualisaties voor het Web

By: Niene Boeijen, Webmapper

Workshop for DataViz Festival 8-2-2017 > https://www.vizualism.com/festival/

Presentation

The presentation can be found here: https://nieneb.github.io/geo_visualisatie_workshop/

Workshop

How to run

Clone this repository from Github: git clone https://github.com/NieneB/geo_visualisatie_workshop

Some of these examples can be viewed by simply opening the file in your web browser. But for some a proper web server is required. The two simplest options are:

  1. if you have Python installed, you can run python -m SimpleHTTPServer from the root of the repository. Then browse to the address it provides and add the name of the file you want to see, e.g. http://localhost:8000/leaflet-js/01_basemap.html
  2. if you have NodeJS installed, you can run the live-server module which also has live-reload capabilities: it will refresh your browser when you make changes. Install it with npm install -g live-server and run it with live-server in the project root. Then you can open http://localhost:8080/leaflet-js/01_basemap.html in your browser, for example.

Data

The geoJSON and topoJSON files used are available in /data. See data/README.md for the methods used to create them. The data preparation has already be done for you.

D3.js

See d3-js/README.md

What will you do:

Topics covered:

  • Projections
  • GeoJSON
  • Time

Leaflet.js

See leaflet-js/README.md

What will you do:

  • Basic Base map
  • Projections EPSG:3857 and EPSG:28992
  • WMS overlay
  • Adding a GeoJSON
  • TopoJSON
  • Interactivity

Topics covered:

  • Interactive map
  • Webmap / slippy maps
  • adding WMS
  • adding GeoJSON/TopoJSON
  • Projections
  • Using Dutch Geo Data

MapboxGL.js

see mapbox-gl-js/README.md

What will you do:

  • Load basic Mapbox Map
  • Load Custom Vector Tiles
  • Adding GeoJSON
  • Fonts
  • Extrusion

Topics covered:

  • Vector Tiles
  • PDOK data
  • Adding GeoJSON
  • Styling options
You can’t perform that action at this time.