0

I want to display multiple points in the database on the OpenLayers map. Points are in the form of gps coordinates. Here is the code that we have done so far:

<?php $con = mysqli_connect("localhost","root","","aviation"); ?>

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>   


    <title>OpenStreetMap &amp; OpenLayers - Marker Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

    <style>
     .info{
        width: 320px;
        height: 450px;
        left: 80%;
         z-index: 1000;
        color: black;
        border-radius: 15px;
        padding: 10px;
        background-color: greenyellow;
        opacity: 0.8;
        position: absolute;

     }
     .map{
        width: 100%;
        height: 1200px;
     }
    </style>


  <script>
    /* OSM & OL example code provided by https://mediarealm.com.au/ */
    var map;
    var mapLat = 47.033496;
    var mapLng = 29.1728363;
    var mapDefaultZoom = 7;

    function initialize_map() {

      map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                      url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
      });



      var hex = $('#hex').val();
      console.log(hex);

       $.post("server.php", {hex: hex}, function(result){

            console.log(result);      
            //result = '[["47.483963","22.718147"],["47.487193","22.713881"],["47.490545","22.709374"],["47.494269","22.704444"],["47.497467","22.700157"],["47.497467","22.700157"],["47.497467","22.700157"],["47.497467","22.700157"],["47.497467","22.700157"],["47.512619","22.679901"],["47.516006","22.675438"],["47.520897","22.66888"],["47.520897","22.66888"],["47.520897","22.66888"],["47.5303","22.656273"],["47.5303","22.656273"],["47.5384","22.645428"],["47.541799","22.640921"],["47.54515","22.636414"],["47.548549","22.631906"],["47.549899","22.630075"],["47.549899","22.630075"],["47.549899","22.630075"],["47.549899","22.630075"],["47.549899","22.630075"],["47.567917","22.605949"],["47.571304","22.601418"],["47.571304","22.601418"],["47.57634","22.59462"],["47.57634","22.59462"],["47.585651","22.582186"],["47.589375","22.577186"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"],["47.592545","22.572922"]]';
            var data = JSON.parse(result);

            for(var i = 0; i < data.length; i++){
                //console.log(data[i][0]);
                add_map_point(data[i][0],data[i][1]);
            }
       });

    }


    function add_map_point(lat, lng) {

      var vectorLayer = new ol.layer.Vector({
        source:new ol.source.Vector({
          features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: "fraction",
            anchorYUnits: "fraction",
            src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
          })
        })
      });
      map.addLayer(vectorLayer); 
    }





  </script>
</head>
<body onload="initialize_map(); ">
  <div class="info">

     <table class="table">
         <tr>
             <td>Hex: </td>
             <td>
                <select id="hex" class="form-control" onchange="initialize_map()">
                  <option value="">--SELECT--</option>
                <?php 

                $select_data = mysqli_query($con, "SELECT * FROM `avioane_interceptate` GROUP BY `hex`");
                while($row_data = mysqli_fetch_array($select_data)){

                ?>
                    <option value="<?php echo $row_data['hex']; ?>"><?php echo $row_data['hex']; ?></option>
                <?php } ?>
                </select>
             </td>
         </tr>
     </table>

  </div>
  <div id="map" class="map" ></div>

</body>
</html>

The problem is that it does not display anything on the map as they change the value in the HEX selection, it should change the points on the map as I change the value in HEX ......

  • 1
    Why you override the whole map instead of replacing the existing layer with the new one? You don't even remove the old map. – dmh126 May 5 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.