React Leaflet with OSM

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”.

Open App.js and type this (it is based on the https://react-leaflet.js.org/docs/start-installation so you can learn more from that site.

Then you can run the project with “npm start” if you’re not doing that before. If there is some error like this

Don’t worry we can fix it, first open Package.json then change this script

into this

Then delete node_modules folder and type “npm install” and run the project. So everything is right :). Don’t forget to include the Leaflet CSS CDN inside the public/index.html.

And don’t forget to make some CSS code in App.css because if you’re not set the height and width the map can not be rendered properly.

So when we run the project will be like this

After this tutorial, still on Leaflet topics, I want to display the Popup point map based on JSON data. See You