Formålet med denne veiledning er å lage et simpelt kart på en webside og legge data om trafikkulykker fra Vegvesenet på.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
data
img
js
.gitignore
README.md
eksempel01.html
eksempel02.html
eksempel03.html
index.html
package.json
pages.sh
projeksjoner.md
srv.js
testserver.md

README.md

Veiledning nr 1

Formålet med denne veiledning er å lage et simpelt kart på en webside og legge data om trafikkulykker fra Vegvesenet på.

Nødvendig kode og filer er tilgjengelig på github. Du kan bygge opp filstrukturen selv eller bruke filene i denne veiledning. Se også live demo på github pages.

Følge evt denne instruks hvis du vil sette opp lokal test-server.

Eksempel 1

Lag et kart med LeafletJS

Last ned leafletjs og legg filene et passende sted under "doc root" på ditt site - her er valgt å legge javascript filer unde js/ og ccs filer under css/. Lag en html fil - se eksempel01.html som linker til leaflet filene og andre ressurser.

<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<script type="text/javascript" src="js/vendor/leaflet.js"></script>
<script type="text/javascript" src="js/eks01.js"></script>

eller bruk alternativt hosted versjon av filene:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type="text/javascript" src="js/eks01.js"></script>

Html dokumentet skal inneholde et element som kartet renderes i, her <div class="map" id="map"></div>, deretter lages et kart med 3 lag - se js/eks01.js:

var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var watercoler = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {
    attribution: '&copy; <a href="http://maps.stamen.com">Stamen</a>'
});
var posi = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
  subdomains: 'abcd'
});
var map = app.map = L.map('map', {
    center: [59.91235, 10.7357]
  , zoom: 11
  , layers: [posi]
})

Hvis du tester siden i din nettleser nå, vil du se, at bare laget 'positron' er synlig. For å kunne skiftet mellom lagene, tilføyes et verktøy til å skifte lag:

var baseMaps = {
    "Open Street Map": osm
  , "Vannfarge": watercoler
  , "Positron": posi
};
var overlays = {};
L.control.layers(baseMaps, overlays).addTo(map);

Voila, du har nå et simpelt kart på siden din som ser slik ut:

eks01a

Eksempel 2

Legg på data fra NVDB

Vegvesenet har en service med data fra NVDB - servicen har et REST API og man kan hente ut data fx på denne mådten:

Dette er et datasett med trafikkulykker fra hele landet, og vi har lagt en kopi av data her: data/trafikkulykker02.nvdb.json

Følg med i koden i eksempel02.html og i js/eks02.js. I dette eksemplet skal vi bruke andre komponenter - jQuery og wellknown:

  <script type="text/javascript" src="js/vendor/wellknown.js"></script> 
  <script type="text/javascript" src="js/vendor/jquery.min.js"></script>

Først hentes json data vha jQuery ajax:

$.ajax({
    url: "data/trafikkulykker02.nvdb.json"
  , dataType: "json"
})
.done(function(data){
  // ...
});

Koordinatene finnes i to formater i dette datasettet - hhv geometriWgs84 og geometriUtm33 - les evt mer om kartprojeksjoner og koordinatsystem i Veiledning 5. Leaflet bruker i utgangspunktet WGS84 decimalgrader, og vi trenger derfor denne verdien. Den finnes her i et format kallet WKT (Well Known Text). I disse data er det bare punkter, men WKT kan indeholde forskjellige geometrityper, her er noen eksempler:

"POINT (30 10)";
"LINESTRING (30 10, 10 30, 40 40)";
"POLYGON ((30 10, 40 40, 20 40, 10 20, 30 10))";

Når data returneres løpes gjennom alle vegobjekter, koordinatene finnes, behandles og legges til kartet som markører, vær oppmerksom på at Leaflet vil ha koordinatene i motsatt rekkefølge. WKT og andre moderne formater følger vitenskapelig tradisjon som skriver x-koordinaten først og deretter y-koordinaten - mens Leaflet i utgangspunktet bruker tradisjonell lengde/breddegrad, hvor y (lengdegrad) kommer før x (breddegrad):

var vegObr = data.resultater[0].vegObjekter;
for (var i = 0; i < vegObr.length; i++) {
  var vo = vegObr[i];
  // Vi skal ha tak i wgs84 koorinater og endre dem til geometri vha wellknown:
  var wkt84 = vo.lokasjon || vo.lokasjon.geometriWgs84 
    ? vo.lokasjon.geometriWgs84 : false;
  var wkt84Geom = wkt84 ? wellknown.parse(wkt84) : false;
  if(wkt84Geom && wkt84Geom.coordinates){
    // Leaflet vil ha koordinatene i motsatt rekkefølge av det wellknown leverer:
    var latlng = [ wkt84Geom.coordinates[1], wkt84Geom.coordinates[0] ];
  // ...
}

En markør kan ha en popup med valgfri tekst/html som vises når det klikkes på den:

// Lag simpel info om hver ulykke og legg det til marker i kartet 
// med popup, som tilføyes kartet:
var poparr = [vo.lokasjon.kommune.navn, vo.lokasjon.fylke.navn, vo.lokasjon.region.navn];
var m = L.marker(latlng)
  .bindPopup( poparr.join('<br/>') )
  .addTo(app.map);

Data kan også vises et annet sted på websiden. Dette datasettet inneholder masse ekstra informasjon under "egenskaper". Både markør og popup har diverse events, man kan hefte ønsket funksjonalitet på - i dette eksemplet lagres informasjonen på markøren og vises i "info" elementet, når det klikkes på markøren:

var $info = $('#info'), info = '<table>', egarr = vo.egenskaper;
for (var j = 0; j < egarr.length; j++) {
  var eg = egarr[j]; //, infoarr = [ eg['navn'], eg['verdi']]; 
  info += '<tr><td>' + eg['navn'] + '</td><td>' + eg['verdi'] + '</td></tr>';
};
m.nvdbInfoTxt = info + '</table>';
// Vis info tekst når markørens popup åpnes og slett teksten når den lukkes:
m.on('popupopen', function(e) {
  $info.html(e.target.nvdbInfoTxt);
});
m.on('popupclose', function(e){
  $info.text('');
});

Du har nå et kart som ser slik ut: eks01a

Eksempel 3

Lag "Point Clusters"

Som du ser på kartet ovenfor, blir det uoversiktlig når mange punkter ligger nær hverandre på kartet. Det kan derfor være lurt å bruke såkalte "point clusters" eller punkt-klynger. Til dette bruker vi komponenten Leaflet.markercluster - det krever litt mer javascript og css:

<script type="text/javascript" src="js/vendor/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" type="text/css" href="css/MarkerCluster.css">
<link rel="stylesheet" type="text/css" href="css/MarkerCluster.Default.css">

For å få til punkt-klyngene, må vi endre litt på koden fra før - se eksempel03.html og css/eks03.js.

var mcg = new L.MarkerClusterGroup();
// ...
var m = L.marker(latlng).bindPopup( poparr.join('<br/>') );
mcg.addLayer(m);
// ...
app.map.addLayer(mcg);

I stedet for å tilføye hver markør til kartet, tilføyes de en instans av MarkerClusterGroup som til slutt tilføyes kartet.

Slik får du til et kart med marker clusters som på bildene her: eks03a.png eks03b.png