Interactive Boat Map

This month’s map is a little different. Rather than sharing a finished map, I’m sharing a proof of concept.

The Map

I’ve been throwing around ideas for a “big project” to work on next year. One idea is to make an online map-based game. Imagine a strategy game where you place your pieces by physically going to the location. Or a game that incorporates real-time data. There are endless possibilities, but this map is based on the concept of a turn-based pirate game with vector-based movement (though I’ve learned from this experience that grid-based is probably a better way to go). I still have a ways to go with learning coding before I can really start such a project, but there’s no reason not to play around with some ideas.

All that this map demonstrates is the ability to move your boat in a Leaflet map, limit movement to water, and limit the distance that the boat can move per turn. There are a couple weird things you can do, like fly over Florida or smaller islands, but it wasn’t meant to be a finished product.

The Data

I just used the standard OpenStreetMap basemap. I thought about making a fancy pirate map or something, but I decided to save the effort on a more practical project.

I used the Natural Earth land layer for land detection.

The Method

As it turns out, telling a Leaflet marker to move from one location to another and animate itself along the path involves using a lot of geometry and algebra that I haven’t really looked at since college. The math itself wasn’t difficult, though I did have to re-learn a couple things.

How do you find the Y-Intercept again?

For those nerds interested in how I got this working, here are the steps to creating the marker animation:

  1. The user clicks a point on the map, which sends the click coordinates (newPos) as well as the current coordinates of the boat (curPos) to the move function.
  2. A line is drawn between the two coordinates – this was originally just for testing, but I liked it, so I left it.
  3. I then needed to create an array of 100 points drawn evenly between curPos and newPos.  I did this by finding the distance between curPos and newPos, then finding the length of the base.  The base length was then divided by 100 and the points were created in a “For” loop using the Slope-Intercept Form equation (just reading the name of the equation brought back bad memories from high school).
  4. Finally, I set a series of Timeouts to change the marker location to each of the 100 points to create the animation.  The user was prevented from moving again until the animation was complete to prevent some weird effects (in a real turn-based game, they wouldn’t be able to move back-to-back anyway).
  5. I finished the map by adding the land data as geojson.  Clicking the land polygons told the move function that the destination point was invalid and prevented the boat from moving.  The move circle works in a similar way.

In the end this map doesn’t do much, but I’ve learned a lot about what can be done in terms of animations in Leaflet.  The same techniques can be used in making conventional maps more interesting, like animating movement along a path or showing the change in data over time.  Now that I have a library of geometry functions I’m sure I’ll find a use for them soon.

Leave a Reply

Your email address will not be published. Required fields are marked *