JSFiddle - React, Tailwind, and code Playground
HTML
<body onLoad="init()">
<h1>Leaflet Test</h1>
<form>
<input type="text" value="NY" name="region" id="input">
<input type="button" onClick="changeView()" name="mySubmit" value="Button">
</form>
<div id="map1" style="width:800px; height:600px"> </div>
</body>
</html>
JavaScript
function init()
{
var map = new L.Map ("map1");
var attrib="Ich bin nicht ";
var layerOSM = new L.TileLayer
("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ attribution: attrib } );map.addLayer(layerOSM);
var pos = new L.LatLng(50.908,-1.4);
map.setView(pos, 14);
var marker = new L.Marker(pos);
map.addLayer(marker);
}
function changeView(){
var region = document.getElementById('input').value;
alert(region);
$.ajax({
type: 'GET',
url: 'webservice.php',
data: {region: region},
success: function(response, textStatus, XMLHttpRequest) {
alert(response[0].lat+response[0].lon);
layerOSM = "Test";
map.addLayer(layerOSM);
map.setView(response[0].lat, response[0], 13);
}
});
}