This week we faced a very interesting challenge; to create a custom designed map that supports plotting points given their latitude and longitude. There were a couple of caveats that made implementation difficult...
Due to it's custom design, the map could not utilize the Google Maps nor their API.
The map only represented the United States.
The states of Alaska and Hawaii were to be moved.
The Problem
The problem with developing a map meeting the aforementioned criteria and supporting plotted points may not at first be apparent. Given specific coordinates, the Google Maps API is able to easily plot points due to the fact the map references the entire world. The world map utilizes a very specific projection, the Mercator projection, which enables mathematical calculations for converting coordinates to points on the map. Quoted from Wikipedia:
While the linear scale is constant in all directions around any point, thus preserving the angles and the shapes of small objects, the Mercator projection distorts the size and shape of large objects, as the scale increases from the Equator to the poles, where it becomes infinite.
In order for us to apply coordinate conversion calculations, we would have to find a suitable map in the Mercator projection. Not only would we need a map of the United States, but we would also need a map of the entire world to use as a reference point for our calculations. Given these two maps, we would have all of the tools necessary for calculating [x,y] coordinates for plotting map markers on the custom map.
The Solution
Given the task of finding both US and world maps in Mercator projection which were proportionate to one another proved to be quite a task. Eventually, we settled upon using a very nifty service called indiemapper. Indiemapper has a default bank of SVG maps which can be loaded, heavily tweaked, and exported for further modification in Adobe Illustrator. What we did is load both a world map and a country map overlay and export to SVG. This is what gave us the referential scale of the United States to the world for calculating coordinates.
With this new map, we shifted the United States to a position of [0,0] within the world map and calculated the [x,y] delta. The delta values were to be used to transpose marker points from their initial calculated position to their new position. The next step was to copy the United States and create a new independent SVG. We could then utilize an algorithm for calculating a [lat,lon] to [x,y] conversion and shifting the resulting point with our calculated delta values. The algorithm itself is based on the dimensions of the entire world map in Mercator projection. Since we only wanted to display a map of the United States, it only makes sense that we'd position it at an offset of [0,0] and transpose the calculated point to this new position.
Converting the SVG to RaphaelJS
In order to get our SVG to display properly in current browsers, we needed to implement a solution for converting the image to a canvas element. This is where RaphaëlJS comes in.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
There happens to be a nifty little PHP class for converting SVG files into a fully executable block of javascript utilizing RaphaëlJS called svgToRaphaelParser. This tool is a lifesaver and saves you a ridiculous amount of time copying and pasting path strings. After utilizing the class, it only takes a couple of quick modifications and you have yourself a fully functional canvas element displayed in your browser courtesy of RaphaëlJS code. You're then free to alter the paths to your hearts content.
Conclusion
And that, folks, is how we mapped the United States and calculated the corresponding marker positions. Perhaps at a future date we'll cover how we went about scaling and transposing the states of Alaska and Hawaii in Raphaël. Not only that, but how we re-mapped the marker points to those two states after they had been scaled and transposed.
Want to see a working demo? Hammer us with some feedback expressing your interest.
This week we faced a very interesting challenge; to create a custom designed map that supports plotting points given their latitude and longitude. There were a couple of caveats that made implementation difficult...