Add marker to projected coordinates from form-input Leaflet

Question

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.

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"

Answer 1

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: