Im trying to show on a google map markers based on lat and lng from a json file.
I'm importing the files like that:
import * as crimeData from "../resources/newfile.json";
import * as aggAssault from "../resources/categories/AGG_ASSAULT.json";
import * as autoTheft from "../resources/categories/AUTO_THEFT.json";
import * as burglaryNonres from "../resources/categories/BURGLARY-NONRES.json";
import * as burglaryResidence from "../resources/categories/BURGLARY-RESIDENCE.json";
import * as homocide from "../resources/categories/HOMICIDE.json";
import * as larcenyFromVehicle from "../resources/categories/LARCENY-FROM_VEHICLE.json";
import * as larcenyNonVehicle from "../resources/categories/LARCENY-NON_VEHICLE.json";
import * as rape from "../resources/categories/RAPE.json";
import * as robberyCommercial from "../resources/categories/ROBBERY-COMMERCIAL.json";
import * as robberyPedestrian from "../resources/categories/ROBBERY-PEDESTRIAN.json";
import * as robberyResidence from "../resources/categories/ROBBERY-RESIDENCE.json";
each file is a category of crime.
when i use this it works:
function Map() {
return (
<>
<GoogleMap
defaultZoom={10}
defaultCenter= {{lat: 33.8547, lng: -84.38895}}
>
{crimeData.crimes.map((crime) => (
<Marker key={Math.random()} position = {{lat: parseFloat(crime.lat), lng: parseFloat(crime.long)}} />
)
)}
</GoogleMap>
</>
);
}
const WrappedMap = withScriptjs(withGoogleMap(Map));
but I need to change crimeData to one of the other files based on a condition.
i have tried this:
const array= [aggAssault, autoTheft, burglaryNonres, burglaryResidence, homocide, larcenyFromVehicle, larcenyNonVehicle, rape, robberyCommercial, robberyPedestrian, robberyResidence ]
and replaced crimeDate with array[1] for example and I get an error. the error is a type error, i guess its not taking array[2] as an imported json file any idea on how to do it. Thank you.
It's best to make crimeData state.
The basic idea...
interface CrimePoint {
lat: number
long: number
}
const crimes = [aggAssault, autoTheft, .. etc]
const [crimeData, setCrimeData] = useState<CrimePoint[]>(crimes[0])
handleSelect(index /* from somewhere */) => {setCrimeData(crimes[index])}
You will likely have to derive the index using somethign more complex, like...
const arrayByType = [
{
type: 'aggAssault'
data: aggAssault
},
{
type: 'autoTheft'
data: autoTheft
},
]
// from an input or select
handleSelect(e) => {
const toFind = e.target.value
const found = arrayByType.find((el) => (el.type === toFind))
setCrimeData(found.data)
}
or...
const crimesAsObj = {
aggAssault,
autoTheft,
// etc.
}
const mapByType = new Map<string, CrimePoint[]>()
for (const [key, value] of Object.entries(crimesAsObj)) {
mapByType.set(key, value)
}
// from an input or select
handleSelect(e) => {
const toFind = e.target.value
const data = mapByType.get(toFind)
setCrimeData(data)
}