Rendering the map dynamically

0:00
/0:10

Make it draggable

Initially, I developed the map to be draggable.
I also added restrictions to prevent it from going beyond the edges.

0:00
/0:20

On larger screen

This time, I made adjustments so that it works properly on larger screens as well.

0:00
/0:16

Zoom in and out

Of course, zooming in and out should also be possible.

0:00
/0:22

Express the weeds

Now, when the map is zoomed out, weeds are represented as dots.

0:00
/0:30

Show weeds graphic when zoomed in

When the map is zoomed in to a certain level, weeds are displayed as graphics.

Naturally, I implemented it to work just as well on mobile screens. Although it doesn’t yet match the UX of other popular map services, I believe it achieves a basic level of usability. In the future, we’ll need to enhance it to provide a much higher level of UX.

To be continued...