Leaflet part 3 displaying and filtering pop-up data

I wanna show you how to filter data based on the tesla API that I used before. Open the App.js file and write this code.

And don’t forget to add the CSS in App.css.

So if you run the project with look like this.

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.

Creating an interactive map and mobile-friendly

I’m gonna show you how to use an open-source JavaScript library for mobile-friendly interactive maps (I got this from Leafletjs.com :) ) and we also use Open Street Map. Like usually, first we create a react js project with this code “npx create-react-app my-app-map” I named it my-app-map but whatever you want for the name.

After that, open your editor and run the project just to make sure everything is right. Next, you can open https://react-leaflet.js.org/docs/start-installation and follow the installation steps. You have to type “npm install react react-dom leaflet” and “npm install react-leaflet”.

React with React Hooks

I’m not a really good programmer but I have some kind of stuff to share with you. Still remember with Pokemon mobile game that really funs a few years ago. This is how to display the pokemon list using Pokemon API or poke API with React JS.

To begin with, Create react app

“ npx create-react-app pokeapi”

Tesa Muliawati

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store