Display JSON data using React Leaflet

Display pop-up map with leaflet.

Still, with the Leaflet topics. I want to continue the latest leaflet tutorial that I post before. I’m gonna use Tesla supercharger location API, so first, you can open the link below.

You can inspect elements on this page to find the JSON data. After that, you can click on the Network tab also refresh the page and follow like in this image below.

Klik right on the allSites and Open in new tab.

Select all and copy to a new file. But first, you have to make a new folder for the data. I create folder called “data” inside the src folder and create a new file named “tesla-sites.json” and paste the JSON data to this file.

It is a little bit messy but we can make it more prettier with right-click and click Format Document. So the final look is like

Because we just work with one file, I just gonna show you the final code and you can use the data as you want. Open the App.js file and write this code below.

So when we run the project will look like this.

Based on the Tesla API, the map shows all the Tesla charging stations around the world.

It doesn’t matter where you go, just keep going