Hands On

# Mapping all Star Wars filming locations

By Raymond Camden | 04 May 2020

### Try HERE Maps

Create a free API key to build location-aware apps and services.

Every day to me is Star Wars day. However, most recognize May 4th as the unofficial Star Wars Day. To celebrate that, we created a map of the Star Wars Universe. How would that work since Star Wars takes place "far, far away"? Turns out, Wikipedia has a great resource of Star Wars filming locations here on Earth. In this post I will show you how to turn the map below into a HERE Studio map:

I decided to take a look and see if I could get this data myself. I began by clicking the "Edit" link above the map and discovered, much to my joy, that it was actually already in GeoJSON! I copied and pasted it into Visual Studio Code and noticed right away that the GeoJSON wasn't actually valid. Visual Studio Code did a great job of flagging this:

It's probably hard to see, but in the right hand gutter of the editor are a few red marks. Each mark is something that's invalid JSON which in this case was the embedded comments. I'm assuming Wikipedia simply strips these out before working with the map.

The next issue was that properties included Wikipedia formatting rules, for example:


"title": "{{flagicon|UK}} [[Whippendell Woods]], [[Watford]]",
"description": "Location for the planet Naboo[[File:Glade in Whippendell Wood - geograph.org.uk - 1763434.jpg|150px|alt=Whippendell Woods]]",

Initially I thought I'd write a quick Node.js script to iterate over the data and try to "fix" each with my Jedi-like coding skills. (Spoiler, I'm no code Jedi.) But then I realized I could probably fix it by hand in about ten minutes. I used some regular expressions in Visual Studio Code and plain grunt work to create a cleaner, simple GeoJSON file. In the end, each feature only had two properties, name and title. Here's an example.


{
"type": "Feature",
"properties": {
"title": "Onk Jemal, Tozeur",
"description": "Location for Mos Espa on Tatooine"
},
"geometry": {
"type": "Point",
"coordinates": [
7.842748, 33.99403
]
}
},


We could have more information of course. I'd love a list of the exact films used for that location. I'd also love to spell out the planet with maybe a link to Wookiepedia. But for now I'm keeping it simple. ("Stay on target, Raymond!") Alright, now that I've got some GeoJSON, let's head over to HERE Studio.

The first thing I did was to create a new space in the Data tab.

I then made a new project, edited a few settings, and imported my data.

Bam. Done! I love Studio! Of course, the default color scheme isn't quite appropriate. In order to make it a bit nicer, I first changed the marker to an icon. The "Attraction" icon seemed perfect for this data:

I tweaked a bit more and then hit the publish link. You can view the full version here or play with it below:

There's certainly more that could be done, and if anyone would like a copy of the GeoJSON file, just ask. Also note that the map I created above was all done with a free developer account at HERE, so you could absolutely do this yourself as well! Have a wonderful Star Wars Day!