Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Welcome to the workshop: Webmapping for beginners!
Maptime, time for making maps!
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.
This workshop will start with a presentation to introduce the basic concepts that are needed to do this workshop.
Short outline of the workshop
- First we will introduce Leaflet in the Introduction Leaflet.
- If you are not comfortable with HTML and CSS the Making a Web Page tutorial will get you started.
- In Leaflet step 1 we will set up the basics to show a standard background map with Leaflet.
- In Leaflet step 2 we will add markers, circles and polygons to our map.
- In Leaflet step 3 we will add a GeoJSON file containing geo-spatial data to our map.
- Get familiar with D3 in Introduction D3.
- In D3 step 1 we will set up the basics to show a simple world map with D3.
- In D3 step 2 we will add extra data from a GeoJSON file to our map and style it based on data attributes.
- In D3 step 3 we will add a data-driven legend to our webpage.
- Eventually we will put our maps online, with Hosting on Github
- Do you have time left? Have a look at the Leaflet Advanced or D3 Advanced exercises.
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.
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
Start with reading the Introduction Leaflet