0

I am trying to implement a custom projection system with Leaflet and proj4. I introduced my EPSG:2320 projection with Proj4. But something went wrong on the map screen. Y (longitude) started to increase when moving to the right on the map, and x (latitude) started to increase when moving up. How can I solve this situation?

My code : https://jsfiddle.net/pg43e6ur/15/

    // 38066.8071289063     5056907.24249268    sol üst (topleft)

    // 38066.8071289063     3842467.31384277    sol alt (bottomleft)

    // 1837237.07208252     5056907.24249268    sağ üst (topright)

    // 1837237.07208252     3842467.31384277    sağ alt (bottomright)
    // range function
    function range(start, end) {
      return Array.from({ length: end - start + 1 }, (_, i) => i)
    };
    //origin (bottom left, top right)
    const origin = [38066.8071289063 ,3842467.31384277];
    const resolutions_epsg2320 = [(origin[1]-origin[0])/256];
    var i;
    for (i in range(1,17)){
        var cozunurluk = resolutions_epsg2320[i]/2;
        resolutions_epsg2320.push(cozunurluk);
    };

    var epsg_2320 = new L.Proj.CRS (
        "EPSG:2320",
        "+proj=tmerc +lat_0=0 +lon_0=30 +k=1 +x_0=500000 +y_0=0 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs ",
        {
            resolutions: resolutions_epsg2320,
            origin : origin,
             }
        );
    //add map
    var map = L.map('map',{
        crs : epsg_2320,
        center : [20,47],
        zoom: 3,
        continuousWorld: true,
        worldCopyJump: false
      });
     //osm map
    var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contrib          utors',
          });
    map.addLayer(osm_map);
    // show latlng and x y
    var bngprojection = "+proj=tmerc +lat_0=0 +lon_0=30 +k=1 +x_0=500000 +y_0=0 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs "
    map.on('mousemove' , (e) =>{
            var latlng = e.latlng;
            var bngcoords = proj4(bngprojection, [ latlng.lat,latlng.lng]);
            document.getElementById('coordinat_tab').innerText ="Enlem:"+(e.latlng.lat).toFixed(8) +"------"+ "Boylam:"+(e.latlng.lng).toFixed(8)+"\n"
            + "X:.......|"+bngcoords[0]+"|           .......Y:.......|"+bngcoords[1]+"|";
           });
2
  • Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works
    – Ian Turton
    Apr 24 at 9:04
  • ok. I updated the question Apr 24 at 11:44

1 Answer 1

0

In Leaflet the projection you set with map option crs must correspond to the projection of the actual layers you are displaying. If not, either layer tiles will not be displayed correctly and/or coordinates will be all wrong.

In your case you are displaying Open Street tile layer which is in Web Mercator projection EPSG:3857, which has the following proj4js definition string proj4.defs("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs") and bounds [[-180.0, -85.06], [180.0, 85.06]].

Your projection EPSG:2320 has proj4js definition string proj4.defs("EPSG:2320","+proj=tmerc +lat_0=0 +lon_0=30 +k=1 +x_0=500000 +y_0=0 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs") and bounds [[-9.56, 34.88], [31.59, 71.21]].

Since your projection differs from the actual layer projection, you are getting completely wrong coordinates.

On the other hand, Open Layers for example does on the fly reprojection of raster layers when layer projection differs from the view projection.

3
  • Thank you for your answer. I think I understood the problem, but I still don't know the solution. Do you have any suggestions about this? Apr 24 at 19:41
  • I don't know what are you trying to do, so I can't suggest any solution. Fact is that if you want to use EPSG:2320 projection, you will have to find and use tile layer that is in that projection.
    – TomazicM
    Apr 24 at 19:55
  • Yes, I understood the problem very well. After some updates, I fixed the error in the coordinates. After defining projection with proj4, the latitude and longitude positions are reversed. I solved this. But this time the tilelayer is not loading at all. Because as you said, I need to find a tilelayer suitable for the projection I have defined. You have helped me a lot, thank you.jsfiddle.net/bilalbenzer/96hxeLac/2 Apr 24 at 20:50

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.