I am getting a correct extent in console but in map it is zooming to Africa location.
Actually, i have data with State, District, Date, max temp, min temp, humidity, wind speed, latitude and longitude. By using Latitude and Longitude i have created a Geom (Geometry) column in my database (Postgresql).
When i select state, district and date it has to zoom to that particular Geom extent on my map.
And this is my Query:
SELECT ST_AsGeoJSON(t1.*) as extent FROM ricepest.forecast t1 where state = 'ANDHRAPRADESH' AND dist = 'ANANTAPUR' AND date_id = '2023-01-01';
and this is my output:
"{""type"": ""Feature"", ""geometry"": {""type"":""Point"",""crs"":{""type"":""name"",""properties"":{""name"":""EPSG:3857""}},""coordinates"":[77.6006,14.6819]}, ""properties"": {""sno"": 8402, ""year_id"": 2023, ""days_id"": 1, ""tm_max"": 28.1, ""tm_min"": 15.98, ""rhm"": 74.12, ""precipitation"": 0, ""ws_max"": 2.18, ""ws_min"": 1.13, ""state_id"": ""AP"", ""district_id"": 1, ""date_id"": ""2023-01-01"", ""state"": ""ANDHRAPRADESH"", ""dist"": ""ANANTAPUR"", ""latitude"": 14.6819, ""longitude"": 77.6006}}"
But it is zooming on to Africa location.
This is my service:
@Query(nativeQuery = true, value = "SELECT ST_AsGeoJSON(t1.*) as extent FROM ricepest.forecast t1 where state = :state_val AND dist = :dist_val AND date_id = :from_date")
List<GetFeatures> getFeatureByStateIdServicel(@Param("state_val") String state_val, @Param("dist_val") String dist_val, @Param("from_date") java.sql.Date from_date);
public static interface GetFeatures {
String getExtent();
}
This is my java controller:
@PostMapping(value = "/features")
public ResponseEntity<List<GetFeatures>> getFeatureByStateIdServicel(@RequestBody RequestInputs reqInputs) {
System.out.println("The state and district input value for getFeatures : " + reqInputs.getState_id() + " and " + reqInputs.getDist() + " and " + reqInputs.getFromdate_id());
List<GetFeatures> extent = pestServiceRepository.getFeatureByStateIdServicel(reqInputs.getState_id(), reqInputs.getDist(), reqInputs.getFromdate_id());
if (!extent.isEmpty()) {
return new ResponseEntity<>(extent, HttpStatus.OK);
} else {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
}
This is my javascript:
getFeatures: function(state, dist) {
var d1 = new Date($("#fromdate").val().toString());
console.log(d1);
var datestring1 = d1.getFullYear() + "-" + ("0" + (d1.getMonth() + 1)).slice(-2) + "-" + ("0" + d1.getDate()).slice(-2);
console.log(datestring1);
var formData = {
state_id: state.toUpperCase(),
dist: dist.toUpperCase(),
fromdate_id: datestring1,
};
var Extent = $.ajax({
type: "POST",
contentType: "application/json",
url: "api/features",
data: JSON.stringify(formData),
dataType: 'json',
async: false,
success: function(result) {
if (result) {
console.log(result);
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("ERROR: ", jqXHR.responseJSON.error);
}
}).responseJSON;
return (Extent.length != 0) ? Extent[0].extent : null;
},
fitExtents: function(st_val, dist_val, date_val) {
const feat = IIRR.getFeatures(st_val, dist_val, date_val);
var format = new ol.format.GeoJSON();
var feature = format.readFeatures(feat);
vectorSource.clear();
vectorSource.addFeatures(feature);
vectorLayer.setStyle(IIRR.highlightStyle);
console.log(vectorLayer.getSource().getExtent());
map.getLayers().forEach(layer => {
if (layer && layer.get('name') === 'style') {
map.removeLayer(layer);
}
});
map.addLayer(vectorLayer);
map.getView().fit(vectorLayer.getSource().getExtent(), map.getSize());
},
getDateExtent: function() {
IIRR.fitExtents($("#inputState option:selected").text(), $("#inputDistrict option:selected").text(), $("#inputParams option:selected").text());
},
And this is my Html Code:
<div class="row container">
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label for="inputState">State</label>
<select class="form-control" id="inputState" onchange="IIRR.getDist();">
<option value="SelectState">-- Select State --</option>
<option value="AP">AndhraPradesh</option>
<option value="KA">Karnataka</option>
<option value="PB">Punjab</option>
<option value="TS">Telangana</option>
</select>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label for="inputDistrict">District</label>
<select class="form-control" id="inputDistrict" onchange="IIRR.getDistExtent();">
<option value="0">-- Select District --</option>
</select>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label for="fromdate"> Date <input type="text" name="date1" id="fromdate" placeholder="Select Date" class="form-control datepicker">
</label>
</div>
</div>
<!-- <div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label for="todate">To Date <input type="text" name="date2" id="todate" placeholder="Select To Date" class="form-control datepicker">
</label>
</div>
</div> -->
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="form-group">
<label for="inputParams">Parameters</label>
<select class="form-control" id="inputParams" onchange="IIRR.getDateExtent();">
<option value="SelectParameter">-- Select Parameters --</option>
<option value="maxTemp" id="maxTemp">Maximum Temperature</option>
<option value="minTemp" id="minTemp">Minimum Temperature</option>
<option value="precipitation" id="precipitation">Precipitation</option>
<option value="humidity" id="humidity">Relative Humidity</option>
<option value="maxWs" id="maxWs">Maximum Windspeed</option>
<option value="minWs" id="minWs">Minimum Windspeed</option>
<option value="Avg" id="Avg">Average Temperature</option>
</select>
</div>
</div>