HSFM09 - Webcartografie

Les 2. JavaScript en web mapping

CSS class vs id

						
#id {

}	

.class{

}

Default CSS settings

						* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Inspringing!

Auto indent in VS code

						On Windows Shift + Alt + F
On Mac Shift + Option + F
On Ubuntu Ctrl + Shift + I

What is a web map?

Analogue paper maps

Digital maps	VS	Web Maps
Data		Tiles, styles and servers
On the computer		View in a browser
Calculate, analyze		scroll, pan, zoom

Making a web map

Javascript in onze websites

Maak een bestand aan: /js/main.js

						<script src="/path/to/script.js">
<script src="/js/main.js">

Visual studio code met Syntax highlighting

en auto complete ! :D

Structuur

Code wordt gelezen van boven naar beneden!

comments

						// Dit is een comment
alert('Hello, world!'); // This comment follows the statement

						// Onze eerste JavaScript code 
alert('Hello, world!');
console.log('Hello world!');

Variable : Let

Variabelen worden gebruikt om informatie op te slaan

named storage

Object based programming

let message;
message = 'Hello'; // store the string 'Hello' in the variable named message
alert(message); // shows the variable content

Variable : Constants

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!

Data types

typeof undefined // "undefined"

typeof 1 // "number"

typeof true // "boolean"

typeof "hello" // "string"
								
typeof {} // "object" 

typeof alert // "function"  

typeof [0,1,2] // "object"

Operators

+ addition
	 6 + 9;
	'Hello ' + 'world!';

- * /  substraction, multiply, division

= assingment  
	let myVariable = 'niene';

=== Strict equality
								
!== Does not equal

Events

Event in the browser

Click, hover, scroll

						document.querySelector('html')
	.addEventListener('click', function() {
		alert('Ouch! Stop poking me!');
	});

Array

						const array = [];
const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];

Objects

						const object = {};
const person = {
	name: ['Bob', 'Smith'],
	age: 32,
	bio: function() {
	  console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
	},
	introduceSelf: function() {
	  console.log(`Hi! I'm ${this.name[0]}.`);
	}
  };
  

person.name
person.name[0]
person.age
person.bio()
person.introduceSelf()

Loops

						const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];

for (const cat of cats) {
	console.log(cat);
}

for (let i = 0; i < cats.length; i++) {
	console.log(cats[i]);
}

Vergelijkingen/Conditionals

						if () { }
else { }

statement ? true : false ;

						let greeting;

if (hour < 18){ greeting = "Good day" } 
else { greeting = "Good evening"};

greeting = (hour < 18) ? "Good day" : "Good evening" ;

alert(greeting);

Leaflet quickstart

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

<div id="mapid" style="width: 400px; height: 180px;"></div>

let map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

Adding data layers

// ADD a WMS layer
let cbs = L.tileLayer.wms('https://service.pdok.nl/cbs/wijkenbuurten/2022/wms/v1_0', {
	'layers': 'buurten',
	'styles':
		'default',
	'srs': 'EPSG:28992',
	'format': 'image/png',
	'transparent': true,
	'opacity': 0.5
}).addTo(leafletMap);

Quickstart

link

https://openlayers.org/download/


<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css">

const openLayersMap = new ol.Map({
    target: 'openLayersMap',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([5.2213, 51.7160
        ]),
        zoom: 8
    })
});

<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.26/"></script>

require(["esri/config", "esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {

	esriConfig.apiKey = "yourKey";

	const arcGisMap = new Map({
		basemap: "arcgis-topographic" // Basemap layer service
	});

	const view = new MapView({
		map: arcGisMap,
		center: [5.2213, 51.7160], // Longitude, latitude
		zoom: 8, // Zoom level
		container: "arcGisMap" // Div element
	});
});