Cuando hago clic en el botón Enviar, el mapa del folleto parpadea y luego desaparece. la función que estoy usando es GetNewMap(), lo que significa que cuando hago clic en el botón, pasará un nuevo lan-long.
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); }mi vista:
<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>Su método GetNewMap no impide la acción predeterminada. Muestra un nuevo mapa, luego el formulario se envía al servidor y su nuevo mapa desaparecerá.
Debe evitar que se envíe el formulario:
<form method="get" name="mynewMap" onsubmit="GetNewMap(event)"> function GetNewMap(e) { e.preventDefault(); ...Event.preventDefault() - API web | MDN
Como se señaló en los comentarios, la alternativa es cambiar su <button type="submit" a un <button type="button" , que no enviaría el formulario. En ese caso, deberá controlar el evento de click del botón en lugar del evento de envío del submit .
Puede intentar eliminar type="submit" en el botón y usar el evento onclick :
<button class="btn btn-info " style="width: 175px;" onclick="GetNewMap()">Get Tags</button> Si desea obtener el valor de Lat y Long en GetNewMap() , intente esto:
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); }