1

I'm using proj4js to use the utm33N coordinate system. Leaflet works with latlong, is there anyway for it to work in the projected system, so I can for instance set the centre location based on easting/northing rather than lat long.

  • So, working in projected coordinates,

  • I would like to plot a polygon using projected coordinates, here are two examples:

    //To plot a polygon

    //latlng
    var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];

    //easting/northing
    var latlngs = [
       [580990.0059351522, 4275268.990746303],
       [580999.0179947406, 4275268.937262271],
       [580999.031365749, 4275260.032170748],
       [580990.0059351522, 4275260.045541757]
     ]
    var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
  • and I can't seem to zoom in closer than 50m (on the scale bar), I need the zoom level to be unrestricted.

My code

<div id = "map" style = "width:900px; height:250px;"></div>

<script type="text/javascript">
  // set projection
  var crs = new L.Proj.CRS('EPSG:32365',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
  {
  resolutions: [
    8192, 4096, 2048, 1024, 512, 256, 128
  ],
  origin: [0, 0]
  })

  // center of the map
  // var center = [580994.78, 4275264.19]; // I would like to set in eastings/northings rather than lat/long
  var center = [38.623162,27.9282893];

  // Create the map
  var map = L.map('map', {crs: crs}).setView(center, 1);

  // add a marker in the given location
  L.marker(center).addTo(map); 

L.control.scale().addTo(map);

// getthe coordinate
map.on('click', onMapClick);
function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

</script>
  • OK, I fixed the zoom issue with var map = L.map('map', {minZoom:18}, {maxZoom: 25}).setView(center, 1); – Spatial Digger Feb 2 at 0:25
  • Please remove second question about zooming from your question. One of the basic policies of this site is: only one question per question. – TomazicM Feb 2 at 10:39
1

When displaying map, Leaflet works with projected coordinates, but input parameters to it's methods and functions are always in unprojected coordinates, and this cannot be changed.

If you want to use projected coordinates, you have to convert them to projected coordinates when passing them to Leaflet methods and functions. This can be done with crs unproject method (see https://leafletjs.com/reference-1.6.0.html#crs).

If you have a lot of such conversions, you can write your custom conversions functions for that. In your case that would look something like:

function unprojectXY(xy) {
  var latLng = crs.unproject(L.point(xy[0], xy[1]));
  return [latLng.lat, latLng.lng]; 
}

function unprojectArrayXY(xy) {
  var retVal = [];
  for (var i = 0; i < xy.length; i++) {
    retVal[i] = unprojectXY(xy[i]);
  }
  return retVal; 
}

var xy = [
     [580990.0059351522, 4275268.990746303],
     [580999.0179947406, 4275268.937262271],
     [580999.031365749, 4275260.032170748],
     [580990.0059351522, 4275260.045541757]
   ];

var polygon = L.polygon(unprojectArrayXY(xy), {color: 'red'}).addTo(map);

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.