I am currently working on a Next.js-project, but I’m just a beginner. My Web-application should display a react-leaflet-map with clickable tiles. I am using wordpress headless with Next.js. Inside wordpress I use woocommerce. So each of my clickable tiles represents a single product. I also use the woocommerce api to get the meta-information from my products. Is there a way to connect the GeoJSON, which displays the tiles, and the endpoint of my products? Both should basically be JSON-files (or at least they can both be represented in a JSON-file). I tried to manually add some product-infos to the GeoJSON, but this makes it static and not dynamic. Maybe I could loop the infos of the endpoint though the tiles in GeoJSON?
My goal is to click a tile and then render all the (important) product-infos (my tiles are the products). And when I change something on wordpress e.g. a picture of a tile/product it should be automatically be updated in the GeoJSON. Does anybody have an idea how to realize something like that?
Here I have screenshots of my product-endpoint and my GeoJSON-file. They generally have a similar structure (Same amount of tiles as products)
Thank you so much in advance!