2

I am working on a Leaflet map and trying to use an input form to insert my local coordinates that will be projected to WGS84 and displayed on map as a marker but when I try it the button seems not to work. I don't know if it's a Javascript syntax related issue or I am misusing Proj4.

enter image description here

Here is the code:

HTML

         X: <input type="number" id='latt'>
         Y: <input type="number" id='lngg'>
         <button onclick="addmarker()">addmarker</button>

Javascript

            // convert coordinates to Moroccan system
        var secondProjection = "+proj=lcc +lat_1=29.7 +lat_0=29.7 +lon_0=-5.4 +k_0=0.9996155960000001 +x_0=500000 +y_0=300000 +a=6378249.2 +b=6356515 +towgs84=31,146,47,0,0,0,0 +units=m +no_defs";
        var firstProjection ="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs "
        //add markers based on insertion
        function addmarker() {
            var inputlat = document.getElementById('latt').value;
            var inputlng = document.getElementById('lngg').value;
            var pj = proj4(secondProjection,firstProjection,[inputlat,inputlng]);
            var x = pj[0];
            var y = pj[1];
            var latlng = L.latLng(x,y);
            L.marker(latlng).addTo(map);  
        };

EDIT: Type = "number" instead of "float"

3
  • Your code adds a marker instead of zooming, is that intended? Your question is about zooming. Have you zoomed out to the full world view to see if it was added in the wrong place maybe? Dec 18 '20 at 8:34
  • I am sorry that was a mistake I edited the title, its actually about the projection because I tried both zooming and adding a marker and it doesnt work. Dec 18 '20 at 8:36
  • 1
    Your inputs should be type="number", there is no type="float" option in HTML. Dec 21 '20 at 8:40
2

Your problem comes from the fact that proj4 uses [lng, lat] coordinate order, but Leaflet uses [lat, lng] order for input to it's functions and methods.

To distinguish between projected and unprojected coordinates, it's also good to use naming [x, y] for projected and [lat, lng] for unprojected coordinates.

Your code could then look something like this:

 X: <input type="float" id="x">
 Y: <input type="float" id="y">
 <button onclick="addmarker()">addmarker</button>
var secondProjection = "+proj=lcc +lat_1=29.7 +lat_0=29.7 +lon_0=-5.4 +k_0=0.9996155960000001 +x_0=500000 +y_0=300000 +a=6378249.2 +b=6356515 +towgs84=31,146,47,0,0,0,0 +units=m +no_defs";
var firstProjection ="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs "

function addmarker() {
    var inputX = document.getElementById('x').value;
    var inputY = document.getElementById('y').value;
    var pj = proj4(secondProjection, firstProjection, [inputX, inputY]);
    var lng = pj[0];
    var lat = pj[1];
    var latlng = L.latLng(lat, lng);
    L.marker(latlng).addTo(map);  
};

Here is working example at JSFiddle: https://jsfiddle.net/TomazicM/2tw9gfbe/

If you input coordinates [262815, 524520], you'll get location near Marrakech:

enter image description here

9
  • Thank you for your answer, Ive tried to edit my code but the button doesnt display any marker on the map. Dec 18 '20 at 11:36
  • Do you get any errors in browser debugger console? What do you get if you do console.log(lng, lat)? Can you add an example of valid projected coordinates [x, y] and where this should be on the map ( [lng, lat]).
    – TomazicM
    Dec 18 '20 at 14:24
  • I added JSFiddle example.
    – TomazicM
    Dec 18 '20 at 15:09
  • Thank you for the efforts, it helped me, but what actually solved the problem is that I added parseFloat to document.getElementById('x').value and document.getElementById('y').value and it worked! Please add this to your answer so I can mark it as accepted! Dec 18 '20 at 15:23
  • I'm no JS expert, but for me it works also without parseFloat, as you can see in my JSFiddle example. Maybe you have some different version of proj4.js which accepts only numbers. And by the way, as far as I know there is no such input element type as float, see developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
    – TomazicM
    Dec 18 '20 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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