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.

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"

• bugmenot123: 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?
• ElFadily Mohamed: 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.
• bugmenot123: Your inputs should be type="number", there is no type="float" option in HTML.

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:

enter image description here

• ElFadily Mohamed: Thank you for your answer, Ive tried to edit my code but the button doesnt display any marker on the map.
• TomazicM: 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: I added JSFiddle example.
• ElFadily Mohamed: 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!
• TomazicM: 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