# Veiblikk
## Eksempel på web-applikasjon
- [Veiblikk](https://sverres.net/veiblikk)
- [programkode på Github](http://github.com/sverres/veiblikk)
Laget ved hjelp av
- html
- css
- javascript
- flere javascript-biblioteker
## Funksjonalitet ut over Mapbox-webkart
- adressesøk
- ruteberegning
- utvalg og visning av webkamerabilder
Oppdeling av javascript-kode i flere moduler:
## Javascript-bibliotek for geodata-håndtering
- [Mapbox GL JS](https://www.mapbox.com)
- [Proj4js](http://proj4js.org/)
- [Turf](https://turfjs.org/)
## jQuery og AJAX
- [jQuery](https://jquery.com/) - "write less, do more". [w3schools-eksempler](https://www.w3schools.com/jquery/jquery_examples.asp)
- ajax: Asynchronous JavaScript And XML. Se figur: [How AJAX works](https://www.w3schools.com/xml/ajax_intro.asp)
## Designvalg
- Open Layers eller Mapbox?
- ruteplan i UTM33
- Mapbox snakker GeoJSON - det gjør også Turf.js - slipper å transformere mellom ulike format
- Mapbox har vektor-tiles. Rask opptegning - ujevn kvalitet på kartgrunnlag.
- Løsning - vise topo 2 når man zoomer inn.
## Adresse-søk
- kall (siste linjen er med adressen behandlet av encodeURI-funksjonen):
```ini
https://www.norgeskart.no/ws/adr.py? + Storgata 10, Gjøvik
https://www.norgeskart.no/ws/adr.py?Storgata%2010%2C%20Gj%C3%B8vik
```
- ajax-kall:
```javascript
$.ajax({
type: 'POST',
url: 'https://www.norgeskart.no/ws/adr.py?' + encodeURI(start_address),
timeout: 10000, // ms
success: get_starting_point_success,
error: get_starting_point_error
});
```
## Ruteplan
- ruteplan-kall:
```ini
https://www.vegvesen.no/ws/no/vegvesen/ruteplan/routingService_v1_0/routingService?
stops=279181,6729895;265515,6747637&
returnDirections=false&
returnGeometry=true&
route_type=best&
format=json
```
Returnerer geodata på JSON-format, men det er ikke GeoJSON. Lager javascript-objekter ut fra JSON, plukker ut koordinatene, transformerer til geografiske koordinater og oppretter GeoJSON-objekt:
```javascript
var directions = $.parseJSON(directions_JSON);
var vertices = [];
$(directions.routes.features[0].geometry.paths[0])
.each(function (index, vertice) {
vertices.push(proj4_25833_to_4326(vertice[0], vertice[1]));
});
route = turf.lineString(vertices);
```
## Utvalgte funsjoner i Turf
[turf.lineString](https://turfjs.org/docs#lineString)
```javascript
var linestring1 = turf.lineString([
[-21.964416, 64.148203],
[-21.956176, 64.141316],
[-21.93901, 64.135924],
[-21.927337, 64.136673]
]);
```
[turf.buffer](https://turfjs.org/docs#buffer)
```javascript
var route_buffer = turf.buffer(route, 50, { units: 'meters' });
```
[turf.booleanPointInPolygon](https://turfjs.org/docs#booleanPointInPolygon)
```javascript
if (turf.booleanPointInPolygon(webcam_point, route_buffer)) {
// put webcam image on page
};
```
[turf.nearestPointOnLine](https://turfjs.org/docs#nearestPointOnLine)
```javascript
var webcam_snapped = turf.nearestPointOnLine(route, webcam_point, { units: 'kilometers' });
```
## Koordinatsystemer i bruk
- UTM32
- UTM33
- Geografiske koordinater
Transformasjon mellom disse uføres ved hjelp av Proj4js-funksjoner.
## DOM-scripting
Deler av websiden blir konstruert ved hjelp av javacript-kode.
Før ruteberegning og webkamerabilde-innhenting:
Etter ruteberegning og webkamerabilde-innhenting (3 nye div'er er opprettet):
Programkode som oppretter html-elementer (jQuery append-funksjon):
```javascript
$('#webcams').append('
');
```