Leaflet, as you know, is an open source package and it has multiple plugins and it gives you the flexibility that you need to operate on multiple types of vehicles, drones, cars or boats or whatever. So that flexibility helped us to cover maximum use cases that we can.
Now let's start by the first functionality that we have. As you know, we need to send goal or path to vehicle and if we are operating under drones, we need to define the zone that we are operating to. For that, we use the package called react-leaflet-draw. So it's a package that came with a long list of, let's say, drawing tools from, I don't know, from lines, circles, rectangles, markers, that you can use. And it came with multiple set of callbacks for each event, for the creation or even when you delete or edit one of the paths that you draw before. And it will give you the vector that contains all the waypoints drawn before and you can use them whatever you want based on your use case and your application.
Now, what if we want to reduce the amount of internet that we are using or what if we are operating without internet? For that, we decided to use a package called react-leaflet-offline, but before talking about that package, let's just try to see and know how leaflet is rendering the tiles, which is the layout that we put on the top of the map. And if we see this, we will find that React is not rendering the whole map on the same, is not bringing the full layout on the same time, but it's bringing them as a set of rectangular images and loading them. And this will let us avoid to render a full map at the same time. So if we want to cache those images, one possible approach is to create your own server that will send those images based on X, Y, and Z, which is the zoom level, and send them to your frontend. And another approach also is by using what's a package called react-leaflet-offline. As you see here on this example, when using react-leaflet-offline, you will have the choice to save a specific area that you are zooming in right now or delete that area and save it again. The map is updated, if there is any update on the map, and on the blue, those rectangles on the blue, as we see here, those are the areas that we save at different zoom levels.
And for the next thing that made us choose Leaflet is that on some use cases, maybe you are not operating on Earth. Maybe you are creating some aerospace application where you are operating on different map than the map that we are using to. So React-Leaflet gives us the ability to create our own, let's say, coordinate reference system based on the requirements that we have. So for this, you can also define how many pixels you will have by each meter and put your origin of the map. You can choose the origin, define it as you want. Even the coordinate system, you can put your own coordinate system based on your use case. The second thing is that after defining exactly your coordinate and the reference system, we can put on top of it our custom layer. For example, if we are operating on a warehouse or a room or any indoor area, we will have to provide the map with our own tile. For that, you can put what's called on Leaflet, image overlay.
Now if you are wondering what we can do with a video overlay, for example, if we are on some weather forecast things and we want to show the direction of the wind. So for this, you can put in a video overlay that you will specify exactly the bounds, like the top right and the bottom left of the video. And it can be as we see on the right side of the slide. This is like a video overlay of a weather forecast where it will be moving and you can see the wind's direction and all those things.
Comments