You can check out my Star Wars galaxy sector map here!
A fun side project I created is a map of the Star Wars galaxy. I was inspired to create this map because I began playing a Star Wars role playing game, and a significant part of the game involved traveling between sectors (sections of the galaxy). While the game had an easy way to do this using a coordinates system, I like to visualize things, especially maps and spatial relationships. I created a map using a Google Maps integration so I could more easily navigate my ship around the Star Wars galaxy in hyperspace.
Sector Map
Sector Map Zoomed
Method
I created this sector map by using the game’s API to mine data about all of the sectors and planets in the game’s imitation of the Star Wars galaxy. I have a php file on my webserver that I wrote which uses the API of the game to save the sector, planet, and faction ownership data into a variable, then write that variable into a text file. My sector map php file loads that variable data into a JSON object, and my Google Map uses that JSON object to populate the map. I found some simple search code on StackExchange that I modified to search my map’s JSON data. As you type into the search field you’re presented with a list of results. Clicking a search result focuses the Google Map on that point in the coordinates grid and provides information about that sector.
Sector Map Searched
When a result is clicked, the map automatically moves to that entity
Challenges
There were a number of challenges to overcome when creating this project. One of the toughest challenges was that Google Maps relies on a Mercator projection, meaning that the coordinates on the map correspond to a non-flat surface because the earth isn’t flat. However, the image of the Star Wars galaxy that I wanted to map points onto was flat. It was difficult to re-write the mapping logic in the Google Maps integration to enable my search function to input a coordinate, and have that coordinate properly map to my flat map of the Star Wars galaxy. The simple explanation of the problem was that as x and y coordinates increased, their relationship became non-linear. Through a full re-write of the coordinates mapping logic, and much trial and error, I was able to create a linear relationship between the coordinates. Many other problems arose over the course of creating my sector map, such as making the info bubble that opens when you select a search result close anytime you click outside of that info bubble, successfully rendering the polygons that represent the sectors on top of the map image, and enabling the search field to find sector names that include odd characters such as a name with apostrophes (D’Aelgoth was particularly challenging).
Enhance!
After I got the basic functionality of the map working, I enhanced it by adding a political overlay that enables you to turn on a color-coded layer showing which faction owns which sectors. I also added the ability for you to click an arrow next to the name of a sector and automatically set your ship’s coordinates to that sector. Another enhancement was the addition of planets to the map, which makes it possible to search a planet name and find that planet’s location in the galaxy. Many other smaller enhancements were added as I played with the existing map and found myself thinking “it’d be cool if the map could…”. See the changelog for details
Map Political Layer
Politics Legend Enabled
