idris-lv03
A wrapper to use the swiss LV03 projection with leaflet
Setup
Create a folder myProject
for your project
$ mkdir myProject
$ cd myProject
Install
Initialise npm and install idris-maps
$ npm init
$ npm install idris-lv03 --save
Copy the myProject/node_modules/idris-lv03/public
folder to myProject/public
If watchify is not installed, install it
$ sudo npm install watchify -g
Create a main.js
file and compile it into myProject/public/script.js
with watchify
$ watchify main.js -o public/script.js
You can see the result by opening public/index.html
To publish on your server just copy the public
folder
Use
In main.js
, require idris-lv03
var lv03 = require('idris-lv03')
Initialise
Path to leaflets images folder
Set the path to the images
folder, if it is in the same folder as index.html
:
var imagePath = 'images'
Center and zoom level at start
Set the center and zoom level of the map at start
- In LV03 coordinates as
x
andy
var start = {
x: 182273,
y: 538745,
zoom: 22
}
- In WGS84 coordinates as
lat
andlng
var start = {
lat: 46.7888,
lng: 6.6364,
zoom: 22
}
lv03.init()
Initialise with Initialise the map with the start
point and the imagePath
. It returns a map
variable.
lv03.init(start, imagePath, function(map) {
// the rest of your code goes in here
})
Add WMS tiles
A WMS service needs the following keys:
url
the URL to the serviceformat
the format of the tiles, default isimage/png
attr
proper attribution to the providerminZoom
, default is 0maxZoom
, default is 28
To add the r-pod_yverdon_cygnes layer from HEIGVD-WMS-RPOD for example
Create the configuration
var cygnes = {
url: 'http://ogc.heig-vd.ch/mapserver/wms?',
minZoom: 22,
format: 'image/jpeg',
attr: '© HEIG-VD'
}
... and add the layer with lv03.wms(map, [CONFIGURATION])
lv03.init(start, imagePath, function(map) {
lv03.wms(map, cygnes)
})
WMS services that I know of that do not require authentification:
- VD-WMS list of layers
- HEIGVD-WMS-RPOD list of layers
- WMS-IFDG list of layers
Add features in WGS84 coordinates
Within the callback of lv03.init()
, you can add any type of leaflet layer (such as L.marker(), L.geoJson() ...) with coordinates in WGS84
lv03.init(start, imagePath, function(map) {
L.marker([46.7888,6.6364]).addTo(map)
})
Add a marker in LV03 coordinates
You can add a marker in LV03 coordinates using the lv03.point(map, coordinates)
function where coordinates
is an array with x and y: [x,y]
lv03.init(start, imagePath, function(map) {
lv03.point(map, [182273,538745])
})