1

I'm trying to specify the CRS 32718 with Proj4Leaflet to a Leaflet map but I'm getting an error:

"ERROR TypeError: coordinates must be finite numbers"

My code is following:

 var crs = new L.Proj.CRS('EPSG:32718',
'+proj=utm +zone=18 +south +datum=WGS84 +units=m +no_defs +type=crs +towgs84=-78.0,-80.0,-72.0,0.0',
{
  
  resolutions: [
    1000000, 500000, 100000, 50000
],
  origin:[0.0,0.0]
});

this.map = L.map('map', {
  crs:crs,
  center: [  -0.41882,-76.99420 ],
  zoom: 10,
  dragging:true,
  
});
5
  • This does not seem to be EPSG:32718. Why do you have +towgs84=-78.0,-80.0,-72.0,0.0? And resolutions 1000000 and 500000 seem rather big. And you have resolutions only for zooms from 0 to 3, but you specify zoom: 10 in map definition.
    – TomazicM
    Commented Apr 18 at 20:58
  • I'm not very clear about that yet, I'm just starting to program spatial web applications, but I solved it by using the geotools library in the Java backend and converting the geometry from 32718 to the EPSG:4326 system; With this I can now correctly display the geometry in Leaflet Commented Apr 18 at 21:02
  • Can you add your geometry in EPSG:32718 to the question?
    – TomazicM
    Commented Apr 18 at 21:06
  • I have a rest api developed in java, in my controller I converted the geometry to the system accepted by Leaflet in the frontend Commented Apr 18 at 21:27
  • I added the code used in the answer to this question Commented Apr 18 at 21:28

2 Answers 2

1

I solved it by using the geotools library in the Java backend and converting the geometry from 32718 to the EPSG:4326 system; With this I can now correctly display the geometry in Leaflet

enter image description here

This is the code to convert the coordinates:

CoordinateReferenceSystem sourceCRS = CRS.decode("EPSG:32718");
            CoordinateReferenceSystem targetCRS = CRS.decode("EPSG:4326");
            MathTransform transform = CRS.findMathTransform(sourceCRS, targetCRS, true);
            for(Calificacion cal:calf) {
                org.locationtech.jts.geom.Geometry targetGeometry = JTS.transform(cal.getGeom(), transform);
                cal.setGeom((MultiPolygon) targetGeometry);
                System.out.println(cal.getGeom());  
            }
1

There are a few things that are wrong in your code:

  • Definition string of CRS 'EPSG:32718' is wrong. If you look at https://epsg.io/32718, it should be '+proj=utm +zone=18 +south +datum=WGS84 +units=m +no_defs +type=crs'.
  • Origin (upper left corner) of CRS 'EPSG:32718' is wrong. If you look at https://epsg.io/32718, it should be [166021.44, 10000000.0].
  • Resolution for CRS 'EPSG:32718' are totally unrealistic (way to big) and there is not enough of them if you want to use zoom 10.

Code (with sample polygon and point and raster layer for comparison) should then look something like this:

var crs = new L.Proj.CRS('EPSG:32718',
  "+proj=utm +zone=18 +south +datum=WGS84 +units=m +no_defs +type=crs",
  {
    resolutions: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5],
    origin: [166021.44, 10000000.0]
  }
);

var geoJSON = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          -76.9942,
          -0.41882
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              -76.99509963571572,
              -0.4150071761558536
            ],
            [
              -76.9979510068658,
              -0.4189446558951744
            ],
            [
              -76.99632165655015,
              -0.42374208380796574
            ],
            [
              -76.99175039218754,
              -0.42374208714694817
            ],
            [
              -76.99107149358494,
              -0.41912569712658865
            ],
            [
              -76.99279139518197,
              -0.416274433241
            ],
            [
              -76.99509963571572,
              -0.4150071761558536
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
};
  
var map = L.map('map', {
  crs: crs,
  center: [-0.41882, -76.99420],
  zoom: 7
});

L.tileLayer.wms('https://maps.omniscale.net/v2/mapsosc-b667cf5a/map', {
  layers: 'osm',
  format: 'image/png',
  transparent: true,
  hq: true,
  srs: 'EPSG:32718'
}).addTo(map);

L.geoJson(geoJSON).addTo(map);

This gives the following map:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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