Bij deze workshop hoort een presentatie. Hier worden de basis concepten uitgelegd die je nodig hebt voor deze workshop.

De meeste online kaarten worden deze dagen aangestuurd door JavaScript. In deze workshop zullen we 2 mapping libraries behandelen: Leaflet.js en de ArcGIS JavaScript API. De workshop begint van het begin. Als je nog nooit een lijn code hebt geschreven? Maak je geen zorgen! We leggen hier alles uit. Hoe ziet de workshop eruit:

1. Als je nog nooit gewerkt hebt met HTML en CSS, helpt de Making a web page tutorial je op weg.

2. In Leaflet deel 1 maken we onze eerst basis achtergrond kaart in Leaflet.

3. In Leaflet deel 2 zetten we onze kaart om naar de Nederlandse standaard projectie RD new.

4. In Leaflet deel 3 voegen we custom data lagen toe (WMS) van de Provincie Zuid-Holland zelf.

5. In ArcGIS deel 1 maken we onze eerst basis achtergrond kaart in ArcGIS JS.

6. In ArcGIS deel 2 voegen we custom data lagen toe (WMS) van de Provincie Zuid-Holland .

7. Uiteindelijk zetten we onze kaart online, met Hosting op Github

Aan het einde van deze workshop heb je je eigen werkende web pagina met een interactieve kaart. De kaart bevat de officiële Nederlandse achtergrondkaart van PDOK én een WMS laag van GIS afdeling. Dit allemaal in de Nederlandse RijksDriekhoekstelsel projectie.

Een computer met:

• een web browser, zoals Firefox, Chrome of Safari.
• een goede text editor, zoals Visual Studio Code of Notepad ++. Zorg ervoor dat je goed Syntax Highlighting hebt!
• een Github account. Maak er gratis een op 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.

Volg de links. Aan het einde van elke stap is de link naar de volgende stap. De stappen kan je ook zien in de inhoudshopgave aan de rechterkant van het scherm.

➡️ Ga naar de volgende stap.

▶️ Dit zijn de dingen die jij moet uitvoeren! Aan de slag!

ℹ️ Dit is uitleg over een stukje code.

De code staat in blokken of in de tekst, dit is in-line code

<h1> Dit is een blok code </h1>

Wat achtergrond informatie, of extra uitlet, debugging en tips worden in het grijs weergegeven:

Dit is achtergrond informatie of wat extra uitleg Lees ons dus goed!

▶️ Maak een folder aan voor deze workshop, waar je alle bastanden in kan zetten die je maakt vandaag. Bijvoorbeeld:

/home/niene/Documents/MyFirstWebMap_Leaflet

Het is belangrijk deze bestanden goed op te slaan indezelfde folder. We verwijzen in deze workshop naar deze folder als jouwWerkFolder.

➡️ Als je nog nooit met HTML en CSS gewerkt heb begin dan met Making a web page

➡️ Ken je wel al HTML en CSS begin dan direct met Leaflet deel 1