Untitled

<!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>

<?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>";
  ?>