过滤数据以在地图上发布标记

Question

I'm trying to filter some data (magnitude and date) from my database to display markers on my map as there are too many markers appearing.

When I click the submit button, my map is not appearing. What is causing this?

Note: When I try without the filtering, my map displays correctly with all markers.

Here is my code:

<div class="main">

            <form action="" method="post">
                <h3> Past Earthquakes:</h3>
                <br />

                <p>Select Magnitude:


                    <input type="number" id="select_magnitude" name="select_magnitude"  min="1.00" max="10.00" step="0.1" placeholder = "select magnitude" style="width:200px">
                    &nbsp &nbsp

                    Select Date : <input type="date" id="earthquake-date" name="earthquake-date" placeholder = "">&nbsp &nbsp
                    <input type="submit" name="search" value="search">
                    </p>

                  <div id="mapid"></div>

                    <?php

                        $servername = "localhost";
                        $username = "root";
                        $password = "";
                        $dbname = "Earthquake";


                        // Create connection
                        $conn = mysqli_connect("$servername", "$username", "$password", "$dbname");
                        // Check connection
                        if (!$conn) {
                            die("Connection failed: " . mysqli_connect_error());
                        }

                        if (isset($_POST['submit'])) {
                            $magnitude = $_POST['select_magnitude'];
                            //$date = $_POST['earthquake-date'];



                            $sql = "(SELECT * FROM tbl_earthquake where `Magnitude`= '".$magnitude."')";// AND `Date`='".$date."')";
                            $result = mysqli_query($conn, $sql);

                                    echo   "

                                        <script type='text/javascript'>

                                            var mymap = L.map('mapid').setView([-20.176907099999998,57.46742810000001], 3);
                                            var marker;";


                                            if (mysqli_num_rows($result)>0){
                                                while($row = mysqli_fetch_assoc($result)){

                                                    echo "marker=L.marker([".$row['Latitude'].",".$row['Longitude']."]).addTo(mymap);";
                                                    //echo "marker=L.marker([-20.176907099999998,57.46742810000001]).addTo(mymap);";

                                                }       
                                            }

                                            echo"

                                                L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {maxZoom: 20,
                                                attribution: 'Map data &copy; <a href=https://www.openstreetmap.org/>OpenStreetMap</a> contributors, ' +
                                                '<a href=https://creativecommons.org/licenses/by-sa/2.0/>CC-BY-SA</a>, ' +
                                                'Imagery © <a href=https://www.mapbox.com/>Mapbox</a>',
                                                id: 'mapbox.streets'
                                                }).addTo(mymap);


                                       </script>";
                        }      
                    ?>
            </form>
        </div>