Mapping Star Wars Filming Locations for May the 4th (be with you)!

We love Star Wars, you love Star Wars. So, for May the 4th, we had to find a way to make a fun mapping project about it! We used the TomTom Map Styler along with fuzzy search, tilt and rotation, and popups to map Star Wars filming locations. May the 4th be with you!

We love Star Wars, you love Star Wars. So, for May the 4th, we had to find a way to make a fun mapping project about it!

In the video, picture yourself on a guided tour of the some of the greatest filming spots in your favorite spacecraft. We make a few stops and admire each location’s scenery before flying onto the next one!

But… how did we do it?

1. We used Fuzzy Search as part of the Search API to get locations from a list created in JS with the names of each filming location.

2. Animate the map using the function “flyTo” because, well, it had to be cool and we had to appear like we are flying in from outer space.

3. Load the new map style showing our new map display features, so that when we “fly” at high altitudes, we can still see them along our journey.

4. Create popups to contain the images of our locations – no markers, to keep things simple.

5. Ensure to resize images if necessary to fit inside our popup. Noting that popups do have a maximum size, and we want them to be easily visible, so this is a must!

Where can I look on how to recreate it?

This video uses a bunch of topics from other blogs all wrapped together to create our Star Wars experience.

Check out:

Celebrating Earth Day with the new Look & Feel of our Maps Display API will show you how to access our maps new visual changes, what the implementation looks like with the Map Display API, which is shown in the video! To learn more about the Search API and how to do a simple setup of Fuzzy Search, will help us locate each filming site, check out Understanding Fuzzy Search.

Tilt and Rotation with TomTom JavaScript Maps SDK for Web v6 uses some of the setup from our basic map to allow us to view the map from different angles – notably, in V6, you can now rotate and change the map’s tilt, as the title states. This is what will allow us to learn more about flyTo, which is the function used to allow us to “fly” around to different spots. As the article puts it, “flyTo will animate the transition from the maps current position to the new selected position. In addition to accepting center and zoom values, flyTo can also accept pitch and bearing values.”

In Adding OpenWeatherMap’s Current Weather to TomTom Maps, we populate popups with images showing the weather, e.g., sun, clouds, or rain, and display key information inside such as temperatures. This comes in handy if we want to work more with placing images inside of popups, as we had to take time to resize and incorporate the images of each filming location for the full effect!

Lastly, even though it wasn’t directly used, it can be helpful to play around with the Map Styler to get more familiar with the visual components of the map at different zoom levels and explore different locations. From here, you can also export may customizations you make to the map layer. If you want some more guided info, you can start building with Creating a Map with the Map Styler: Step by Step.

We hope this video brought you some Star Wars scenery nostalgia! We found locations to use in this project from this article by Trafalgar.

Next Steps

Register on the TomTom Developer Portal to get building today with your free API key, and make sure to stop by the Developer Forum for any questions or inspiration.

To explore some other fun mapping projects, check out these related articles:

• Halloween Fun with TomTom’s Map Styler
• Visualizing Filming Locations with the TomTom Maps SDK for Web

Happy mapping!