I have a reactjs frontend that has a react-leaflet map. On click of the map, I can access the latitude and longitude. On this same click, I need to get a Python script to load. I have a Flask endpoint as my backend server, and my react frontend can hit this endpoint, I'm just not sure how to tie everything together and have the Python script load and work properly:(
my React code-
import { useMapEvents, Popup, Marker} from "react-leaflet";
const PopupInfo = () => {
const [markers, setMarkers] = useState([]);
const map = useMapEvents({
async click(e) {
const newMarker = e.latlng
setMarkers([...markers, newMarker])
console.log(e.latlng, "info")
//access coordinates to load the python script
const response = await fetch(`/coordinates?sel_lat=${e.latlng.lat}&sel_lon=${e.latlng.lng}`,
{
method: 'GET',
headers: {
Accept: 'application/json',
}});
console.log(response, 'TESTING PROMISE')
if (!response.ok) {
throw new Error(`Error! status: ${response.status}`);
}
const result = response.json();
console.log('result is: ', JSON.stringify(result, null, 4));
}
})
return (
<>
{markers.map((marker, index) =>
<Marker position={marker} key={index}>
<Popup>Latitude: ({marker.lat})<br></br>Longitude: ({marker.lng})</Popup>
</Marker>)}
</>
);
};
export default PopupInfo;
python code-
import argparse
import time
import pandas as pd
import datetime as dt
import json
from src.bcolors import bcolors as bc
import src.config as cfg
import src.utils as utils
import src.cfsr as cfsr
import src.gfs as gfs
def parse_args():
parser = argparse.ArgumentParser(
description="PURPOSE: Extract current meteorological information\n \
for a location and give climate context",
)
parser.add_argument(
"--sel_lat", type=float, dest="sel_lat", help="Latitude of requested location"
)
parser.add_argument(
"--sel_lon", type=float, dest="sel_lon", help="Longitude of requested location"
)
args = parser.parse_args()
##v2
# print("optional arg is: " + args.sel_lat, args.sel_lon)
return args
def main():
start = time.time()
args = parse_args()
print(f"{bc.HEADER}EXTRACT INFO FOR SELECTED LOCATION{bc.ENDC}")
print(f"{bc.HEADER}({args.sel_lat},{args.sel_lon}){bc.ENDC}")
slat = args.sel_lat
slon = args.sel_lon
slon360 = utils.lon_to_360(args.sel_lon)
if cfg.debug:
fin_ij = utils.get_ij_data(cfg.file_ref, slat, slon360)
print(
f"{bc.BOLD}Selected grid point: {fin_ij.lat.values}, {fin_ij.lon.values}{bc.ENDC}"
)
if cfg.debug:
fin_ij = utils.get_ij_data(cfg.file_ref, slat, slon360)
print(
f"{bc.BOLD}Selected grid point: {fin_ij.lat.values}, {fin_ij.lon.values}{bc.ENDC}"
)
print(f"Elapsed time initialization: {time.time()-start}s")
this_time = time.time()
sdoy = utils.calc_doy_noleap(cfg.today)
print(f"Elapsed time doy: {time.time()-this_time}s")
this_time = time.time()
# Get data for location
sdata_doy = cfsr.get_data_doy_loc(slat, slon360, sdoy)
sdata_all = cfsr.get_data_loc(slat, slon360)
print(f"Elapsed time load sdata: {time.time()-this_time}s")
this_time = time.time()
sqtiles = sdata_doy.sel(time=slice(f"{cfg.bsyear}", f"{cfg.beyear}")).quantile(
cfg.qtiles
)
print(f"Elapsed time qtiles: {time.time()-this_time}s")
this_time = time.time()
fcvars = gfs.get_loc_fcvars(slat, slon360)
print(f"Elapsed time fcvars: {time.time()-this_time}s")
this_time = time.time()
# Loading this year data
sdata_y = cfsr.get_data_this_year_loc(slat, slon360)
shmap_y = cfsr.get_hmap_this_year_loc(slat, slon360)
shwcs_y = cfsr.get_hwcs_this_year_loc(slat, slon360)
# Loading bounds (for max-min plots)
sbounds = cfsr.get_bounds_loc(slat, slon360)
print(f"Elapsed time load sdat_ty: {time.time()-this_time}s")
this_time = time.time()
doy_temp_ptile = (abs(sqtiles - fcvars)).idxmin(dim="quantile") * 100.0
print(f"Elapsed time doy qtile: {time.time()-this_time}s")
this_time = time.time()
print(
f"{bc.OKGREEN}Today's tmax {round(fcvars.tmax.values.item(),1)} at the selected point ({slat},{slon}) will be on the {int(doy_temp_ptile.tmax)}th percentile{bc.ENDC}"
)
print(
f"{bc.OKGREEN}Today's tmin {round(fcvars.tmin.values.item(),1)} at the selected point ({slat},{slon}) will be on the {int(doy_temp_ptile.tmin)}th percentile{bc.ENDC}"
)
print(
f"{bc.OKGREEN}Today's tmed {round(fcvars.tmed.values.item(),1)} at the selected point ({slat},{slon}) will be on the {int(doy_temp_ptile.tmed)}th percentile{bc.ENDC}"
)
#####################################################################
#####################################################################
sdata_doy.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/temp_doy.csv", index=False
)
sdata_y.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/temp_current_year.csv", index=True
)
shmap_y.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/hmap_current_year.csv", index=True
)
shwcs_y.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/hwcs_current_year.csv", index=True
)
sbounds_time = sbounds.assign_coords(
doy=pd.date_range(
dt.datetime(cfg.today.year, 1, 1),
dt.datetime(cfg.today.year, 12, 31),
freq="D",
)
)
sbounds_time.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/bounds.csv", index=True
)
fcvars.to_dataframe().round(1).to_csv(f"{cfg.wrk_dir}/fcvars.csv", index=True)
print(f"Elapsed time write csv files: {time.time()-this_time}s")
this_time = time.time()
print(f"{bc.HEADER}Writing out json file with loc info{bc.ENDC}")
loc_stats = {
"tmax": round(fcvars.tmax.values.item(), 1),
"tmin": round(fcvars.tmin.values.item(), 1),
"tmed": round(fcvars.tmed.values.item(), 1),
"tmax_ptile": int(doy_temp_ptile.tmax),
"tmin_ptile": int(doy_temp_ptile.tmin),
"tmed_ptile": int(doy_temp_ptile.tmed),
"tmax_alltime_record_x": sdata_all.tmax.max().values.item(),
"tmax_alltime_record_n": sdata_all.tmax.min().values.item(),
"tmin_alltime_record_x": sdata_all.tmin.max().values.item(),
"tmin_alltime_record_n": sdata_all.tmin.min().values.item(),
"tmed_alltime_record_x": sdata_all.tmed.max().values.item(),
"tmed_alltime_record_n": sdata_all.tmed.min().values.item(),
}
with open(f"{cfg.wrk_dir}/loc_stats.json", "w", encoding="utf-8") as f:
f.write(json.dumps(loc_stats, indent=2))
print(f"Elapsed time write json file: {time.time()-this_time}s")
this_time = time.time()
print(f"{bc.OKGREEN}Elapsed time TOTAL: {time.time()-start}s{bc.ENDC}")
###############################################################################
# __main__ scope
###############################################################################
if __name__ == "__main__":
raise SystemExit(main())
You should make python code to API then call api in React. Call api may be Post/Get/Patch. As for python api you can use Flask/Fast/Django or other framework.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.