Home

Welcome to the workshop: Webmapping for beginners!

Workshop 2020 - Wageningen Universtity

Presentation

This workshop will start with a presentation to introduce the basic concepts that are needed to do this workshop.

Short outline of the workshop

JavaScript powers most on-line maps these days. During this workshop we'll cover the two primary mapping libraries D3.js and Leaflet.js. This workshop will start from the very beginning! Never written a line of code before? Don't worry! This workshop will help get you started. Therefore we'll start off with a brief introduction into making web pages in general. To eventually spend most of our time on learning the tools of the trade.

1. First we will introduce Leaflet in the Introduction Leaflet.
2. If you are not comfortable with HTML and CSS the Making a Web Page tutorial will get you started.
3. In Leaflet step 1 we will set up the basics to show a standard background map with Leaflet.
4. In Leaflet step 2 we will add markers, circles and polygons to our map.
5. In Leaflet step 3 we will change the projection to RDNew(EPSG:28992) and add a WMS service from the CBS.
6. In Leaflet step 4 we will set up a local server and add a GeoJSON file containing geo-spatial data to our map.
7. Eventually we will put our maps online, with Hosting on Github

Optional:

5. Get familiar with D3 in Introduction D3.
6. In D3 step 1 we will set up the basics to show a simple world map with D3.
7. In D3 step 2 we will add extra data from a GeoJSON file to our map and style it based on data attributes.
8. In D3 step 3 we will add a data-driven legend to our webpage.

Goal

At the end of this workshop, you will have your own web page with an interactive map! Including some custom data and different background maps, zoomed in on the area you want to show! Your web page will be hosted on Github, so you can immediately share your progress of the day with all your family and friends!

Beginners

You need to know a little about: HTML, CSS & JS.

🔗 If you are not that comfortable with HTML, CSS and JavaScript yet, this Making a Web page tutorial will help you along!

🔗 Or do some online courses like the ones on Code Academy

What do you need?

Your laptop with:

• a web browser, like Firefox, Chrome or Safari.
• a proper text editor, like Visual Studio Code , Nodepad ++, SublimeText or Brackets with Syntax Highlighting.
• Internet

Syntax Highlighting

Syntax highlighting is a feature of text editors that are used for programming, scripting, or mark-up languages, such as HTML. It displays text, especially source code, in different colours and fonts according to the category of terms to make them more visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.

Preparation

▶️ On your computer create a directory for yourself, where we can work in today. For example:

/home/niene/Documents/MyFirstWebMap_Leaflet

We'll save everything we make and download today in this directory. During this workshop it is referred to as 📂yourDirectory.

How does this tutorial work?

Just follow the links. At the bottom of each step is the link to the next step. All the steps can also be seen in the Table of Contents on the right.

➡️ Takes you to the next step

▶️ This are the things that you should do, execute, get working! Hands on!

ℹ️ Indicates an explanation about the code blocks.

Code is shown in code blocks or in-line. this is in-line code

<h1> This is block code </h1>

Some background information, extra information or debug tips are shown in grey :

This is some additional information or Some extra explanation

So:

➡️ Start with reading the Introduction Leaflet