Hi There,
I am trying to load proj4 library in my javascript code, which is to convert latitude and longitude to eastings and northings, however getting the following error: 'Cannot read properties of undefined (reading 'defs')'. I'm trying to figure out what's missing, can anybody help me?
Hi @Rahul Kumar Pal,This issue may be due to asynchronous loading. The proj4 might not yet be available in the scope at the time your code tries to use it. You added only the console.log() in the onload. Try in this way move all your proj4.defs(...) and transformation logic within the onload handler, like this:
script.onload = function () {
console.log("Proj4js library loaded successfully");
// Define WGS84 and UTM (adjust zone as needed)
proj4.defs("WGS84", "+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("UTM", "+proj=utm +zone=30 +datum=WGS84 +units=m +no_defs");
// Access parameters from OutSystems
var latitude = $parameters.latitude;
var longitude = $parameters.Longitude;
// Convert coordinates
var result = proj4("WGS84", "UTM", [longitude, latitude]);
// Return as object
$parameters.Easting = result[0];
$parameters.Northing = result[1];
};
Thank you Sakthivel! The error has gone, however not getting the desired output.
The values passed in input variables are:
latitude : 28.502375
Longitude: 77.532379
and the result is Easting : 0 and Northing: 0
Verify UTM Zone:You're using: proj4.defs("UTM", "+proj=utm +zone=30 +datum=WGS84 +units=m +no_defs");
But your longitude is 77.532379, which is not in UTM zone 30.
UTM zone 30 is for longitudes between -6° and 0°, i.e. Western Europe.Use the correct UTM zone:The longitude 77.532379°E falls within the territory of India. If you are trying to find it for india use UTM Zone 43
proj4.defs("UTM", "+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
Again, thank you Sakthivel , one more issue with the code here, I am using alert() to check the values of input and output variables inside the javascript code and the values are appearing correctly.
however, outside the code, in output parameters, the result is showing 0,0 for easting and northing
Actually, what's happening?
Your JavaScript is asynchronous because you're loading proj4.js dynamically using a tag. This means:
The JavaScript block finishes execution immediately, even though proj4.onload hasn't run yet.
So OutSystems reads the output parameters before your coordinate conversion has actually happened.Loading library inside a JS block is not a good practice. As Mr. Gee kay said Preload the Proj4.js library.
Steps:
Go to your app's Layout or Theme module.
In the JavaScript section or under Scripts, include this:<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.js"></script>
Then in your JavaScript block, remove the dynamic script loading and just do:
Great! it's working. Thank you for your help and support.
Hi @Rahul Kumar Pal ,
As Mr. Sakthivel mentioned, that should resolve your issue.
Alternative Suggestion:
Download the library from the CDN - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.js
Then, import it into the Scripts section of your module. After that, include it in the Required Scripts property of the specific screen or block where it’s needed.
This approach ensures the library is fully loaded and available before your custom JavaScript executes.
Thanks!
Thank you! @Gee Kay for sorting out the issue.