Map & Leaflet documentation

A dive into the possibilities in Leaflet

What is Leaflet

• Leading open-source library for interactive map applications
• Has all the mapping features most developers ever need. List of features
• Includes layers such as polyline and markers. Core functionality included.
• Includes a lot of plugins. These extends the core functionality of Leaflet.
• Can use most tile layers for map, our tile layer linked below:

Tiles from SVV: http://nvdbcache.geodataonline.no/arcgis/rest/services/Trafikkportalen/GeocacheTrafikkJPG/MapServer/tile/{z}/{y}/{x}

We use a projection from proj4leaflet to match our GPS-coordinates

Use React-leaflet for react documentation and implementation. Might be worth looking into this guide as well.<

To install leaflet in your project dependancies run this in your project folder<

cd frontend
yarn add react-leaflet

SVVs projection:

This projection handles coordinates in UTM-zone 33.

const Proj = require('proj4leaflet');

// from https://nvdbcache.geodataonline.no/arcgis/rest/services/Trafikkportalen/GeocacheTrafikkJPG/MapServer?request=GetCapabilities

const options = { origin: [-2500000.0, 9045984.0], resolutions: [ 21674.7100160867, 10837.35500804335, 5418.677504021675, 2709.3387520108377, 1354.6693760054188, 677.3346880027094, 338.6673440013547, 169.33367200067735, 84.66683600033868, 42.33341800016934, 21.16670900008467, 10.583354500042335, 5.291677250021167, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296, 0.16536491406316148 ] };

module.exports = new Proj.CRS('EPSG:25833', '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs ', options);

Developers have to match the chosen map with projection zone so coordinates match between map and reality.

How we set up the map

Tips & Tricks