README.md

Alternative to bundle with full projection support

Some people prefers using a full bundle Proj4js (https://github.com/DanielJDufour/proj4-fully-loaded). For server side, I like the approach but for client side, it bothers me to get the full bundle as I prefer loading on the fly the projection(s)

I made a short sample with two approaches (see comments in index.js). Code depends from availability from http://epsg.io and related APIs

Recipe to try the sample

git clone https://gist.github.com/f5a6a1b8d5a2b7c3f6c8f8d3745c535c load-proj4js-on-the-fly
npm i
node index.js

index.js

const proj4 = require("proj4");
const fetch = require('node-fetch');

// First recipe with exact EPSG codes
(async function() {
    const epsg_codes = [4326, 32617].map(String)
    const cache_epsg_defs = {}
    
    const pointIn4326 = [-85.3097, 35.0456];
    for (const element of epsg_codes) {
      if (!(element in cache_epsg_defs)) {
        await fetch(`https://epsg.io/${element}.proj4`).then(function (response) {
          return response.text();
        }).then(code => {
          let key = `EPSG:${element}`;
          cache_epsg_defs[key] = proj4.defs(key, code);
        })
        .catch(console.log);
      }
    }
    // EPSG:32617 is automatically included in proj4-fully-loaded
    const pointInUTM = proj4("EPSG:4326", "EPSG:32617").forward(pointIn4326);
    console.log(pointInUTM);
})();

//Second recipe searching EPSG codes but could use names
// Advantages: it returns human name of the projection and bbox for validity of projection
(async function() {

    const epsg_codes = [4326, 32617].map(String)
    const cache_epsg_defs = {}

    const pointIn4326 = [-85.3097, 35.0456];

    for (const element of epsg_codes) {
      if (!(element in cache_epsg_defs)) {
        await fetch('https://epsg.io/?format=json&q=' + element)
        .then(function (response) {
          return response.json();
        })
        .then(function (json) {
          var results = json['results'];
          if (results && results.length > 0) {
            for (var i = 0, ii = results.length; i < ii; i++) {
              var result = results[i];
              if (result) {
                var code = result['code'];
                var name = result['name'];
                var proj4def = result['proj4'];
                var bbox = result['bbox'];
                if (
                  code &&
                  code.length > 0 &&
                  proj4def &&
                  proj4def.length > 0 &&
                  bbox &&
                  bbox.length == 4
                ) {
                  let key = `EPSG:${code}`;
                  cache_epsg_defs[key] = proj4.defs(key, proj4def);
                  //console.log(code, name, proj4def, bbox);
                  return;
                }
              }
            }
          }
        })
        .catch(console.log);
      }
    }

    const pointInUTM = proj4("EPSG:4326", "EPSG:32617").forward(pointIn4326);
    console.log(pointInUTM);
})();

package.json

{
  "name": "load-proj4js-on-the-fly",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "node-fetch": "^2.6.1",
    "proj4": "^2.7.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}