Home

Welcome to the workshop: Webmapping for beginners!

Maptime, time for making maps!

The team from Webmapper developed this workshop in the context of Maptime to share their hands-on experience in web cartography and geographic web application development.

Webmapper is a cartographic development and consultancy company based in Utrecht, the Netherlands. They make geographic applications for the web with special attention for web-cartography.

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 add a GeoJSON file containing geo-spatial data to our map.
6. Get familiar with D3 in Introduction D3.
7. In D3 step 1 we will set up the basics to show a simple world map with D3.
8. In D3 step 2 we will add extra data from a GeoJSON file to our map and style it based on data attributes.
9. In D3 step 3 we will add a data-driven legend to our webpage.
10. Eventually we will put our maps online, with Hosting on Github
11. Do you have time left? Have a look at the Leaflet Advanced or D3 Advanced exercises.

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!

What do you need?

Your laptop with:

• a web browser, like Firefox, Chrome or Safari.
• a proper text editor, like SublimeText or Brackets with Syntax Highlighting.
• a Github account. Create one at www.github.com.
• 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.

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