0

I want to zoom to specific location while onchange of select to particulat lat and long. I have tried the code like below

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
     <label for="category">State: </label>      
    <select class="btn btn-default" name="parent_cat" id="parent_cat" onchange="loadlayer(this.value)" required >
          <option value="">Select State</option>
          <option value="ANDHRA PRADESH">ANDHRA PRADESH</option>
          <option value="MADHYA PRADESH">MADHYA PRADESH</option>
          <option value="PUNJAB">PUNJAB</option>
          <option value="RAJASTHAN">RAJASTHAN</option>
          <option value="MADHYA PRADESH">MADHYA PRADESH</option>
          <option value="CHANDIGARH">CHANDIGARH</option>
          <option value="JAMMU & KASHMIR">JAMMU & KASHMIR</option>
          <option value="ASSAM">ASSAM</option>
          <option value="TRIPURA">TRIPURA</option>
          <option value="WEST BENGAL">WEST BENGAL</option>
          <option value="ARUNACHAL PRADESH">ARUNACHAL PRADESH</option>
          <option value="SIKKIM">SIKKIM</option>
          <option value="BIHAR">BIHAR</option>
    </select>   
    <div id="map" class="map"></div>
     <div id="info">&nbsp;</div>
    <script type="text/javascript">
    var v2,v1;
    var india = new ol.layer.Tile({
                title: 'India',
                source: new ol.source.TileWMS({
                  url: 'http://localhost:8089/geoserver/manjula/wms',
                  params: {'LAYERS': 'manjula:India_states_UT_geo_wgs84'}
                })
              });
    var mapcenter = [79.60,23.44];
       var mapview = new ol.View({
              projection: 'EPSG:4326',
              center: mapcenter,
              zoom: 5,
              extent: [66.2329, 7.68083, 98.2223, 39.03874],
              maxZoom:16,
              minZoom: 4,

            });
        var map = new ol.Map({
            target: 'map',
            layers: [india],
            controls: ol.control.defaults({
            zoom: false,
            attribution: false,
            rotate: false
        }),
            view: mapview
        });
        function loadlayer(str){
        //alert();
        var state= $('#parent_cat').val();
            //alert(state);

            var xmlhttp;
            if (window.XMLHttpRequest)
                  {
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        var latlong=xmlhttp.responseText;
                        alert(latlong);
                        idd1=latlong.split(",");
                 v2 = parseFloat(idd1[1]);
                 //alert(" i am id"+idd1);
                 v1 = parseFloat(idd1[0]);
                 mapcenter = [v2,v1];
                 map.getView().setCenter(v2,v1);
 map.getView().setZoom(8);

                    }


                  }

                xmlhttp.open("GET","getdisaster.php?q="+state,true);
                xmlhttp.send();

        }
    </script>
  </body>
</html>

2.getdisaster.php

  <?php

$db= pg_connect("host=192.168.106.81 port=5432 dbname=pms user=postgres password=postgres")or die ("<div style='color:red;font-size:30px;align:center;'>Portal is in Maintenance, Services will be available soon.</div>");
//$country_id=$_GET['q']; 


echo "<label>States:</label>";
       echo "<select>";
echo " <option value='0'>Select Year</option>";
         $result1 = pg_query($db,"select distinct state,latitude,longitude from india_states_ut_geo_wgs84 where state= 'ANDHRA PRADESH'  ");

       while( $row = pg_fetch_array( $result1, NULL, PGSQL_ASSOC ) )
                {

      echo "<option value='".$row['latitude']."'>".$row['state']."</option>";
}
 echo "</select>";
  ?>
2

The code you have provided above needs little cleaning.

Once you are using jquery, you need not call any seperate Ajax function you can directly use jquery.

Create a div for error. Use the below code for ajax request on selecting any state from the drop down as shown below;

function loadlayer(str){ var state= $('#parent_cat').val(); $.ajax({ type: "GET", url: "getdisaster.php?q="+state, success: function(latlong) { if (latlong!==''){ var latlong = latlong; var idd1=latlong.split(","); map.getView().setCenter((parseFloat(idd1[1]),parseFloat(idd1[0])); map.getView().setZoom(8); }else{ $("#error").html("Error getting Coordinates"); } } });

Remember that whatever you echo in getdisaster.php will be the ajax response. Check your php script, your php script echos a dropdown response. When you split using comma you dont get lat / long. Just echo the lat long as below;

<?php $db= pg_connect("host=192.168.106.81 port=5432 dbname=pms user=postgres password=postgres") or die (); $statename=$_GET['q']; $result1 = pg_query($db,"select latitude,longitude from india_states_ut_geo_wgs84 where state= '".statename."'"); if( $row = pg_fetch_array( $result1, NULL, PGSQL_ASSOC ) ) { echo $row['latitude'].",".$row['longitude']."; } ?>

Please correct the php script as my knowledge is little poor in php.

I would recommend that you call the dropdown from php with value as lat,long and display the corresponding state for users to choose. Then onchange call function to handle the value in javascript rather than taking a round about the server.

I hope this will solve your problem.

  • Please mark the answer as correct if you are able to solve the problem with the solution provided above. All the Best. – GeoSpatialEarth.in Jan 24 '17 at 13:25
  • Thank u sir it worked .. I am new to this how can i mark your answer as correct i already up voted this answer as far as i know – user28536 Jan 25 '17 at 4:16

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.