2017-04-04

Leafet custom projection

Being a lightweight library, LeafletJS does not support many projections out of the box. But thanks to the proj4leaflet plugin we can use whatever projection we want. In this short tutorial we will create a map using the swiss projection LV95 (EPSG:2056).

The dependencies

const L = require('leaflet')
const proj4 = require('proj4')
const proj4L = require('proj4leaflet')

Define the projection

const lv95 = {
	epsg: 'EPSG:2056',
	def: '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs',
	resolutions: [ 4000, 3750, 3500, 3250, 3000, 2750, 2500, 2250, 2000, 1750, 1500, 1250, 1000, 750, 650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1.5, 1, 0.5],
	origin: [2420000, 1350000]
}

Define the CRS

const crs = new L.Proj.CRS(lv95.epsg, lv95.def, { 
	resolutions: lv95.resolutions, 
	origin: lv95.origin
})

Initialize the map

using the CRS and setting max-zoom to the number of available resolutions

const map = L.map('map', { 
	crs: crs,
	maxZoom: lv95.resolutions.length
})

map.setView([47.56,7.59], 22)

We are ready to add some layers.

Add a WMS layer

For this example I used the WMS of Kanton Basel-Stadt.

const wms = L.tileLayer.wms('https://wms.geo.bs.ch/wmsBS?', {
	layers: 'BS.HP.Historische_Stadtplaene.Stadtplan_1946',
	maxZoom: lv95.resolutions.length,
	attribution: '<a href="http://geo.bs.ch">Kanton Basel-Stadt</a>'
}).addTo(map)

Add a GeoJSON layer

For this layer I extracted the churches from the POIs of Kanton Basel.

const geojson = require('./data/churches.json')

To make sure that the data is projected correctly, define the CRS for the GeoJSON.

geojson.crs = {
	type: 'name',
	properties: { name: 'urn:ogc:def:crs:EPSG::2056' }
}

Add the layer.

L.Proj.geoJson(geojson, {
	pointToLayer: function(feature, latlng) {
    var popup = `
      <b>${feature.properties.NAME}</b>
      <br/>
      <small>${feature.properties.SUBKATEGOR}</small>
    ` // Define popup 
    return L.marker(latlng).bindPopup(popup) // Represent as marker
  }
}).addTo(map)

If you need to convert between swiss coordinates (LV03 and LV95) ad WGS84, check out swiss-projection.