javascript: WMS-kall

## On programming

A program is a building of thought. It is costless to build, it is weightless, and it grows easily under our typing hands.

But without care, a program’s size and complexity will grow out of control, confusing even the person who created it.

Keeping programs under control is the main problem of programming. When a program works, it is beautiful.

The art of programming is the skill of controlling complexity.

Marijn Haverbeke, in Eloquent JavaScript

Delvis fungerende eksempel:

https://folk.ntnu.no/sverrsti/GEO2311-H2019/docs/wms-kall-problem.html


const compose_wms = function () {

	...

}

<button id="btn" onclick=
    "document.getElementById('wms_kall').innerHTML = 
        compose_wms()">
    Lag komplett WMS-kall
</button>

  let x = Number(document.getElementById("x").value);
  let y = Number(document.getElementById("y").value);
  let x_size = Number(document.getElementById("x_terreng").value);
  let y_size = Number(document.getElementById("y_terreng").value);

  console.log("x-verdi: " + x);
  console.log("x-verdi: " + y);
  console.log("x_size-verdi: " + x_size);
  console.log("y_size-verdi: " + y_size);

 /* 
  * Her må du legge til kode som beregner de fire koordinatverdiene
  * som inngår i BBOX-parameteren. For å beregne dette trenger du
  * x, y, x_size og y_size.
*/

  let x1 = x - x_size / 2;
  let y1 = y - y_size / 2;
  
  let x2 = x + x_size / 2;
  let y2 = y + y_size / 2;

 /*
  * Linjen nedenfor må forandres slik at du får lagt til de fire
  * parametrene som du skal beregne ovenfor.
 */

  let bbox = "&BBOX="

let bbox = `&BBOX=${x1},${y1},${x2},${y2}`;

Legg merke til 'back-tics' tegnene ved start og slutt av teksten' samt ${ .. } - konstruksjonen. Verdien av variabelen inne i klammeparantesen skrives ut.

Til slutt: innholdet i to tekst-bokser samt bbox-verdien slåes sammen og returneres fra funksjonen:

  return document.getElementById("url").value.trim() +
    "\n" +
    document.getElementById("wms_parameters").value.trim() +
    "\n" +
    bbox

value.trim() fjerner blanke tegn (mellomrom eller tab) foran og bak teksten

Funksjon som åpner et nytt nettleservindu med det komplette WMS-kallet:

  const get_wms_img = function () {
    window.open(document.getElementById("wms_kall").value);
  }

  <button id="btn" onclick=
    "document.getElementById('wms_img').innerHTML = 
    get_wms_img()">Vis WMS-bilde
  </button>

HTML-kode for knapp og funksjonskall:

Ferdig løsning:

https://folk.ntnu.no/sverrsti/GEO2311-H2019/docs/wms-kall.html

Bruk Ctrl + U i nettleseren for å se hele løsningen samlet.