When I'm clicking on the submit button the leaflet map flashing and then disappear. the function that I'm using is GetNewMap() which means when I'm clicking on the button a new lan-long will pass to it.
js:
function GetNewMap() {
var map = L.map('map').setView([51.509865, -0.118092], 12);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
}
my view:
<form method="get" name="mynewMap" onsubmit="GetNewMap()">
<input type="text" id="Lat" name = "Lat" style="display: none;">
<input type="text" id="Long" name = "Long" style="display: none;">
<div class="form-gro row ">
<div class="col-auto m-2" style="font-size: 16px;">
1- Enter Radius:
</div>
<input class="col-sm-2 form-control" type="number" id="radius" name="InputRadius" >
<div class="col-auto m-2" style="font-size: 16px;">
Meter
</div>
<div class="col-auto offset-3" >
<button type="submit" class="btn btn-info " style="width: 175px;" >Get Tags</button>
</div>
</div>
</form>
<br>
<div class="col-9" id="map" ></div>
Your GetNewMap method does not prevent the default action. You display a new map, and then the form is submitted to the server, and your new map will disappear.
You need to prevent the form from being submitted:
<form method="get" name="mynewMap" onsubmit="GetNewMap(event)">
function GetNewMap(e) {
e.preventDefault();
...
Event.preventDefault() - Web APIs | MDN
As pointed out in the comments, the alternative is to change your <button type="submit" to a <button type="button", which would not submit the form. In that case, you would need to handle the button's click event rather than the form's submit event.
You can try to remove type="submit" in button and use onclick event:
<button class="btn btn-info " style="width: 175px;" onclick="GetNewMap()">Get Tags</button>
If you want to get the value of Lat and Long in GetNewMap(),try this:
function GetNewMap() {
var Lat = $("#Lat").val();
var Long = $("#Long").val();
var map = L.map('map').setView([51.509865, -0.118092], 12);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
}