2

How can I display a UTM Grid as a layer with Leaflet? Search a way to embed a OpenStreetMap map with Leaflet in a website. Particularity. I want to display a UTM Grid as a Layer. In addition, lower right UTM coordinate where the mouse is.

Example with UTM grid and UTM Number: http://geo.dianacht.de/bayluftbilder/utm.php

Solution? https://github.com/kartena/Proj4Leaflet

Does anyone an example?

1
1

I can tell you the answer for the second question: How to show UTM-coordinates in the lower right corner.

In leaflet the internal coordinate system is always longitude/latitude as far as I know, and you have to transform every time you need to work with your data.

First make sure you have installed proj4.js and proj4leaflet.js. To show your coordinates you can use the plugin: https://github.com/ardhi/Leaflet.MousePosition .

Then define your coordinate system and use when you define your map object:

var crs = new L.Proj.CRS.TMS('EPSG:25832',
                              '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs', 
                              [120000, 5900000, 1000000, 6500000], 
                              {resolutions: [1638.4, 819.2, 0.1]
});

var map = new L.Map('map', {
      crs: crs,
      continuousWorld: true,
      worldCopyJump: false
});

The function _onMouseMove() should be modified to something like this:

_onMouseMove: function (e) {
  var my_crs = map.options.crs; // get the coordinate system
  var my_proj = my_crs.projection; // get the projection, which makes the transform
  var my_point = my_proj.project(e.latlng); // Here we transform back to UTM
  var lng = my_point.x;
  var lat = my_point.y;
  var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
  var prefixAndValue = this.options.prefix + ' ' + value;
  this._container.innerHTML = prefixAndValue;
}

You will then get your mouse position in UTM. For more information see the documentation for proj4leaflet and leaflet.mouseposition.

0

Have a look at these blog posts:

http://blog.thematicmapping.org/2012/07/using-custom-projections-with-tilecache.html

http://blog.thematicmapping.org/2012/09/creating-custom-map-tiling-scheme-for.html

Bjorn

1
  • 2
    It would be helpful to summarize these blog posts as well, in case the links become broken in the future.
    – Taylor H.
    Feb 10 '13 at 2:55
0

Now (released in July 2017) you can use this plugin (for the second question) https://github.com/jjimenezshaw/Leaflet.UTM, much simpler than Proj4Leaflet if you just want to convert to and from UTM coordinates (WGS84).

The demo shows the coordinates of the center of the map, not the mouse (but it is the same idea).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.