Creating an interactive map and mobile-friendly
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
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