“Probably the best statistical graphic ever drawn, this map by Charles Joseph Minard portrays the losses suffered by Napoleon’s army in the Russian campaign of 1812. Beginning at the Polish-Russian border, the thick band shows the size of the army at each position. The path of Napoleon’s retreat from Moscow in the bitterly cold winter is depicted by the dark lower band, which is tied to temperature and time scales.” – Eward Tufte
Working with interactive maps is one of my favorite things to do. Rendering geographical data mixed with metadata on a map is a great way to add meaning to what would otherwise be a boring table of figures. Many map API providers like Google Maps and Mapbox offer compelling solutions for displaying interactive geographic data. Humans are visual creatures, born to notice the smallest differences in colors, shapes, and especially patterns. Maps are an elegant abstraction of the real world from a spherical planet down to a two-dimensional flatland. A good map depicts geography in a way humans can readily understand. But a great map tells a story.
Where are we at?
When talking to customers, they often want to know where CodeScience is located. This question evokes a long-winded answer involving our main offices in California and Tennessee, and our dozens of individual consultants spread across the globe. Let’s use a map to answer it instead. [iframe src=”https://a.tiles.mapbox.com/v4/danshahin.k17ko47o/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZGFuc2hhaGluIiwiYSI6IkZBckFFRlkifQ.GEfQV-3qWqBE44gE8dXzmA” width=”100%” height=”480″] At first glance, the map above gives you a good idea of the geographic spread of the company. But an online map can do more than sum up data as a literal “high level view” like a paper map does. It also can draw the user in by inviting her to engage interactive elements on the page to reveal meaning and draw conclusions. Zooming and panning this map lets the user see how our consultants are clustered in pockets across the US, with one outlier working from India. The two larger orange markers represent our physical offices, while the smaller green ones represent individual consultants working out of their homes. Clicking on each marker reveals more information about each point, allowing us to drill into the data in a natural way. Below is the GeoJSON file we are using to render our map. GeoJSON is the lingua franca of the online map world in that it is a standard understood by many map APIs. Think of it as a format used to define an interactive overlay of any mapping API that supports the standard. This allows us to use geographical data across mapping platforms without any compatibility issues to slow us down. This is a simple feature collection, with each feature representing some geometry (in this case, points) and associated metadata. You can group features with different geometries and associate any kind of data you want with each feature. Please read the GeoJSON specification for more details. Then immediately go to geojson.io which is the best free tool for GeoJSON manipulation that I’ve used yet. You can start your own map from scratch, or use the raw GeoJSON provided below to edit the data from our example. Now you can pick any mapping API that supports GeoJSON, including Google Maps and Mapbox.
{
"features": [
{
"geometry": {
"coordinates": [
-122.450085,
37.766426
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/codescience.com\/wp-content\/uploads\/2014\/05\/mike1-250x250.jpg\">",
"id": "marker-i1kz9g3b0",
"marker-color": "#fa946e",
"marker-size": "large",
"marker-symbol": "chemist",
"title": "San Francisco"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-85.31027,
35.063553
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/codescience.com\/wp-content\/uploads\/2014\/05\/tim1-250x250.jpg\"> ",
"id": "marker-i1kzablx1",
"marker-color": "#fa946e",
"marker-size": "large",
"marker-symbol": "chemist",
"title": "Chattanooga"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-104.976851,
39.864002
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1kzlwxd3",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Denver"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-122.758628,
45.487635
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1kzmesh4",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Portland"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-118.325804,
34.182109
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1kzmrjs5",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Burbank"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-84.429341,
33.766366
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1kzn9j96",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Atlanta"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-121.781365,
37.298329
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1kzofkm8",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "San Jose"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-79.827651,
36.081992
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1l1fh0w0",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Greensboro"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-95.436783,
29.785045
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1l1gt691",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Houston"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-80.79251,
35.20507
],
"type": "Point"
},
"properties": {
"description": "",
"id": "marker-i1l1hckx2",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Charlotte"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
76.04751,
29.317629
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/indianminion.png\">",
"id": "marker-i1l1it0c3",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Haryana"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-84.61748,
34.012532
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1l1jqrk4",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Kennesaw"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-122.169337,
37.78167
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1l1kddl5",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Oakland"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-122.532846,
37.936746
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/codescience.com\/wp-content\/uploads\/2014\/05\/brian1-250x250.jpg\">",
"id": "marker-i1l1mq6i6",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Larkspur"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-80.79251,
35.20507
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1l1od3o7",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Charlotte"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-85.24897,
34.953614
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/minion.png\">",
"id": "marker-i1l1sjnm8",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Fort Oglethorpe"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-124.08875226974,
40.872442075375
],
"type": "Point"
},
"properties": {
"description": "<img src=\"http:\/\/goodoldfashioned.com\/img\/benny.gif\">",
"id": "marker-i1l3c3cd9",
"marker-color": "#a3e46b",
"marker-size": "small",
"marker-symbol": "chemist",
"title": "Arcata"
},
"type": "Feature"
}
],
"id": "danshahin.k17ko47o",
"type": "FeatureCollection"
}
If you have a github account, make sure to log in to geojson.io via Oauth and you can save directly to a repo or gist, and github will render the map via the awesome Leaflet API. Check out the embedded gist below to see how it will look. Github Gist -The GeoJSON stored in Github. [gist id=”74cb7267cdcbab0f253c”]
Where are we heading?
That is a lot of functionality already without writing a single line of code. Once you plug the data into a good mapping API, you can add much richer levels of interactivity. We’ll explore some of those options in a future post. The orange map above was styled and served via the Mapbox API, which allows for easy styling and hosting of maps starting as low as $5 a month. For now it’s up to you to choose your mapping API and start creating great maps using GeoJSON as your starting point. This will allow you to do the research and make an informed decision based on the price and benefits of the various map providers. You’ll find that if you want to go with a map solution for a non-public page, like your corporate intranet or your Salesforce org, you will have a wide range of prices and service levels to choose from. Starting your map with GeoJSON will let you choose the best mapping API to suit your budget and requirements.
