How to include JavaScript libraries?

Question

I'm having trouble with including the proj4.js JavaScript library in my code. The code looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Proj4js Testing</title>
</head>
<body onload="convertCoordinates()">
    <script type="text/javascript" src="proj4.js">
        function convertCoordinates() {
            var sourceProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
            var targetProjection = "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
            proj4(sourceProjection, targetProjection, [15, 55]);
            alert("Done!");
        }
    </script>
</body>
</html>

But it never gives me a message saying "Done!". I'm having very little knowledge about JavaScript, but I can't see the problem in this code. I followed the user guide on GitHub.

Answer 1

You cannot combine inline JavaScript code along with an externally loaded script. Instead, simply split your scripts into two seperate blocks:

<script type="text/javascript" src="proj4.js"></script>

<script type="text/javascript">
        function convertCoordinates() {
            var sourceProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
            var targetProjection = "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
            proj4(sourceProjection, targetProjection, [15, 55]);
            alert("Done!");
        }
</script>

Answer 2

They need to be separate <script> tags:

<script type="text/javascript" src="proj4.js"></script>
<script type="text/javascript" >
    function convertCoordinates() {
        var sourceProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
        var targetProjection = "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
        proj4(sourceProjection, targetProjection, [15, 55]);
        alert("Done!");
    }
</script>