I'm trying to use Proj4js to perform some coordinate conversions but there is very little information out there on how to use it.

What I want to be able to do is convert a latitude and longitude to a UTM coordinate but I don't know what the zone is. This should be easy since the longitude dictates the zone and if you know that the zone es out by default.

I've tried to do this in Proj4js but I get an error saying

"Uncaught TypeError: undefined is not a function"

My code loos like this:

 proj4Arr = [-105.2098, 39.7458];
 var source = ('+proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees +no_defs');
 var dest = ("+proj=utm +ellps=GRS80 +datum=nad83 +units=m +no_defs");

 console.log(proj4(source, dest, proj4Arr));

I just don't know if it's possible to do this without the zone included. I could calculate the zone first and then put it in the string if I need to but I'm trying to keep it simple.

And if anyone knows any good purely js resources on examples (not necessarily using OpenLayers 3) I'd be grateful for that as well.

Thanks!

I'm trying to use Proj4js to perform some coordinate conversions but there is very little information out there on how to use it.

What I want to be able to do is convert a latitude and longitude to a UTM coordinate but I don't know what the zone is. This should be easy since the longitude dictates the zone and if you know that the zone es out by default.

I've tried to do this in Proj4js but I get an error saying

"Uncaught TypeError: undefined is not a function"

My code loos like this:

 proj4Arr = [-105.2098, 39.7458];
 var source = ('+proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees +no_defs');
 var dest = ("+proj=utm +ellps=GRS80 +datum=nad83 +units=m +no_defs");

 console.log(proj4(source, dest, proj4Arr));

I just don't know if it's possible to do this without the zone included. I could calculate the zone first and then put it in the string if I need to but I'm trying to keep it simple.

And if anyone knows any good purely js resources on examples (not necessarily using OpenLayers 3) I'd be grateful for that as well.

Thanks!

• javascript
• proj4js

3 Answers 3

This year is 2021, it is possible to post a runnable code that not only answers the question, but also demonstrates all the steps that lead to the coordinate transformation results.

  function utmzone_from_lon(lon_deg) {
    //get utm-zone from longitude degrees
    return parseInt(((lon_deg+180)/6)%60)+1;
  }
  
  function proj4_setdef(lon_deg) {
    //get UTM projection definition from longitude
    const utm_zone = utmzone_from_lon(lon_deg);
    const zdef = `+proj=utm +zone=${utm_zone} +datum=WGS84 +units=m +no_defs`;
    return zdef;
  }
  
  // putation test
  let lon_input = 95.99;
  let lat_input = 15.15;
  console.log("Input (long,lat):", lon_input, lat_input);
  const azone = utmzone_from_lon(lon_input);
  console.log(`UTM zone from longitude: ${azone}`);
  console.log("AUTO projection definition:", proj4_setdef(lon_input));
  
  // define proj4_defs for easy uses
  // "EPSG:4326" for long/lat degrees, no projection
  // "EPSG:AUTO" for UTM 'auto zone' projection
  proj4.defs([
  [
    "EPSG:4326",
    "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees"
  ],
  ["EPSG:AUTO", proj4_setdef(lon_input)]]);
 
  // usage:
  // conversion from (long/lat) to UTM (E/N)
  const en_m = proj4("EPSG:4326", "EPSG:AUTO", [lon_input, lat_input]);
  const e4digits = en_m[0].toFixed(4); //easting
  const n4digits = en_m[1].toFixed(4); //northing
  console.log(`Zone ${azone}, (E,N) m: ${e4digits}, ${n4digits}`);
  
  // inversion from (E,N) to (long,lat)
  const lonlat_chk = proj4("EPSG:AUTO", "EPSG:4326", en_m);
  console.log("Inverse check:", lonlat_chk);

<script src="https://cdnjs.cloudflare./ajax/libs/proj4js/2.6.2/proj4.js"></script>

I think you will have to specify the zone info for projections for proj4 projections in order to use the library. Without zone it is not a valid proj4 projection.

Here is the question about how to identify the zone from lon/lat.

And here are two examples: [1], [2]

You can check out the js code by yourself.

swatchai's answer is mostly correct, but it does not work with multiple zones properly. Below is a modified version with examples for different zones/hemispheres (north vs south):

  function utmzone_from_lon(lon_deg) {
    //get utm-zone from longitude degrees
    return parseInt(((lon_deg+180)/6)%60)+1;
  }
  
  // modified to account for N vs S
  function proj4_setdef(lon_deg, lat_deg=0) {
    //get UTM projection definition from longitude
    const utm_zone = utmzone_from_lon(lon_deg);
    const isSouth = lat_deg < 0 ? ' +south' : '';
    const zdef = `+proj=utm +zone=${utm_zone}${isSouth} +datum=WGS84 +units=m +no_defs`;
    return zdef;
  }
  
  // putation test
  let lon_input = 95.99;
  let lat_input = 15.15;
  console.log("Input (long,lat):", lon_input, lat_input);
  const azone = utmzone_from_lon(lon_input);
  console.log(`UTM zone from longitude: ${azone}`);
  console.log("AUTO projection definition:", proj4_setdef(lon_input));
  
  // define proj4_defs for easy uses
  // "EPSG:4326" for long/lat degrees, no projection
  // "EPSG:AUTO" for UTM 'auto zone' projection
  //
  // note: this only works for *one* zone at a time (46N in this case)
  // every zone needs a separate def
  var utmAuto = 'AUTO';

  proj4.defs([
  [
    "EPSG:4326",
    "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees"
  ],
  [utmAuto, proj4_setdef(lon_input)]]);

  // register the standard projection strings for a few UTM zones for checking
  proj4.defs("EPSG:32646","+proj=utm +zone=46 +datum=WGS84 +units=m +no_defs +type=crs");
  proj4.defs("EPSG:32647","+proj=utm +zone=47 +datum=WGS84 +units=m +no_defs +type=crs");
  proj4.defs("EPSG:32648","+proj=utm +zone=48 +datum=WGS84 +units=m +no_defs +type=crs");
  proj4.defs("EPSG:32748","+proj=utm +zone=48 +south +datum=WGS84 +units=m +no_defs +type=crs");

  // https://epsg.io/32647
  // 32647 == 47N - 96.0 0.0 to 102.0 84.0
  // 32648 == 48N - 102.0 0.0 to 108.0 84.0
  // 32748 == 48S - 102.0 -80.0 to 108.0 0.0
  var test46N = [95.99, 15.15];
  var test47N = [100.99, 15.15];
  var test48N = [105.99, 15.15];
  var test48S = [105.99, -15.15];

  var proj46N = proj4_setdef(...test46N);
  var proj47N = proj4_setdef(...test47N);
  var proj48N = proj4_setdef(...test48N);
  var proj48S = proj4_setdef(...test48S);

  console.log("test 46N, values below should match");
  console.log(proj4('EPSG:4326', utmAuto, test46N));
  console.log(proj4('EPSG:4326', proj46N, test46N));
  console.log(proj4('EPSG:4326', 'EPSG:32646', test46N));

  console.log("test 47N, values below should match (except the first row)");
  console.log(proj4('EPSG:4326', utmAuto, test47N)); // this will be wrong since utmAuto is only defined for 46N
  console.log(proj4('EPSG:4326', proj47N, test47N));
  console.log(proj4('EPSG:4326', 'EPSG:32647', test47N));

  console.log("test 48N, values below should match");
  console.log(proj4('EPSG:4326', proj48N, test48N));
  console.log(proj4('EPSG:4326', 'EPSG:32648', test48N));

  console.log("test 48S, values below should match (except the first row)");
  console.log(proj4('EPSG:4326', proj48N, test48S)); // N vs S makes a difference
  console.log(proj4('EPSG:4326', proj48S, test48S));
  console.log(proj4('EPSG:4326', 'EPSG:32748', test48S));

<script src="https://cdnjs.cloudflare./ajax/libs/proj4js/2.6.2/proj4.js"></script>