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"
type="number"
, there is notype="float"
option in HTML. – bugmenot123 Dec 21 '20 at 8:40