DEV Community 👩‍💻👨‍💻

Amr Yasser
Amr Yasser

Posted on

Using react-leaflet offline.

I think this is my first time writing an article but I will keep it easy ad simple.

At first, I have been asking to make a map in the react.js application and that was the first time I worked with maps I thought things are going to be easy but the fact it wasn't.

before I decide on which map I'm going to use, I did some research for the best map and also took into consideration finding an easy-to-use map that has all the needed features that I will need.

So what I did was I found google Maps and react-leaflet but I was confused about which one I will use.

after that, I found a great website npm-trending this website helped me a lot to decide which map I will use because the website makes a comparison between the two or more packages that you will select and help you to compare between packages.

So now things become more clear and easy after I figured out from the comparison between the two maps that google map has 210 issues and has been updated since too long and for react-leaflet it has only 2 issues and it's updated fast.

So, I decided to use react-leaflet react-leaflet after following the installation. the map didn't show up at first but after some research, the problem was importing the leaflet.css file into my application.

till now things are working great and the map is working perfectly and I'm very happy but the problem becomes after showing my manager the map. they asked me if the map working offline? I said what do you mean by the map working offline. he said if we turned off the internet will the map work? I said let's try. the map worked fine. he said clear the cache and reload one more time. I did that. but It didn't work. I was shocked. I didn't know what to do. how I will fix it. so I did some research one more time on how to use react-leaflet offline. I came up with this solution react-leaflet-offline. So now I become one more time happy because I found a solution but I didn't try it yet. so it's time to try the solution.

the solution will work in 2 versions the new version of react-leaflet which is the first one and the old version which is the last one. so I tried the first one and time to turn off the internet but nothing worked. so it's time to make the second and the last one but here came another problem.

I used react-leaflet the latest version which is v3 but the last solution has a property called whenCreated which is not existing on the latest version of react-leaflet. So I searched to download the old version of react-leaflet and that required me to downgrade the version of react and react-dom but it wasn't a big problem because I was hoping to fix it. after the downgrade the react-leaflet component becomes able to read the property. time to turn off the internet. nothing is working.

What? How it's not working. I don't know. but this is the last solution I found and it's not working.

I don't know what to do. I have been doing a lot of research and nothing is there.

I'm sure there's something that will work but I need to do more research. So I started to research again and again and again. but I didn't find anything.

Till I found a discussion that the react-leaflet can be working offline. now hope came again for me and I was so excited about that.

This discussion included steps for how to make the offline map using react-leaflet.

1- Go to osm because react-leaflet use OpenStreetMap.

2- Enter in the search the area or the country that you want.

3- Click on Export in the navbar.

4- Click on OverPass API.

5- you will find a map file downloaded for you if not keep clicking it just take time.

So far things is great, what we did here is that we downloaded the source code for the selected area or country in a file and this file is in XML (node tags that are represented to make the map for use).

So what's next?

after I just downloaded the file I become confused a-little bit but not like the first time. what I'm going to do with this file? on which application I'm going to run this file. I don't know.

Till I find an application called Maperitive app, I downloaded the application and started to import the file into the application but please be noted that you will have to change the file extension to map.osm

Now the map is showing great on the application, but how I'm going to show the map inside my React application. I don't know.

But at least now I have the source code for the map. so I'm sure there are things I should do but I don't know what it's.

I found in the Maperitive application that I can export the map images. images !!!! yes, the map was created in images.

let's understand how the react-leaflet is working before we go to the latest steps.

the map that is showing in the react-leaflet is not created in layers but it's created in a group of images collected together (Every image has {x} {y} {z} variables) the z is for the zoom level and {y} is the folder number {x} is the image number.

So All of these images get together to make one big image depending on the center that you gave to the MapContainer which is responsible for the react-leaflet map.

now we just said that it's a group of images collected together to show one big image. and that's true if you opened the inspect and after you reload the page you will find a list of requests to a server which is the OpenStreetMap.

Now I will need to find a way to download a lot of images and add them to my application. So I figured out a way in the Maperitive application to export the Tiles (the single image we mentioned above is called tiles).

Now I have a folder of images for a specific area. I made a server and uploaded these images to the server. I changed the Url in the TIleLayer component in the React application to this server.

Now, the map is working perfectly as I needed.

Offline Map without using external Https to the OpenStreetMap.

Perfect. Now I just finished what I have been asking for.

The big lesson is to not give up at all.

I hope I explained an easy way for my journey to make an offline map.

Happy coding.

Top comments (1)

joaobarbosa profile image

good topic, but I'm having difficulties showing the map in the code, if you can provide a snippet of the code I would appreciate it.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.