Map Scripting


Create Location-based Web Applications

U.S. State Boundaries to use in Maps

Perhaps you’ve seen those maps with geographic regions shaded particular colors? That’s called a Choropleth map and you can create one for U.S. states using simple polygons in Mapstraction.

Four corners state shapes

In order to create these shapes, you need the latitude/longitude points that make them up. For some states, that means many points. It takes a lot of work to collect the data, but Rakshith of MapMash has saved us all work.

You can download the state boundaries XML, or see one of the two JavaScript-ready versions below.

First, this follows the simple Four Corners Example from the book, with a variable for each state.

var alaska = [new mxn.LatLonPoint(70.0187, -141.0205),
new mxn.LatLonPoint(70.1292, -141.7291),
... new mxn.LatLonPoint(70.0187, -141.0205)];
var alabama = [new mxn.LatLonPoint(35.0041, -88.1955),
new mxn.LatLonPoint(34.9918, -85.6068), ...

» Simple JavaScript version

A more advanced version uses an object to hold the state name as a key and the collection of points as the value.

var statesobj = {"Alaska": [new mxn.LatLonPoint(70.0187, -141.0205),
new mxn.LatLonPoint(70.1292, -141.7291),
... new mxn.LatLonPoint(70.0187, -141.0205)],
"Alabama": [new mxn.LatLonPoint(35.0041, -88.1955),
new mxn.LatLonPoint(34.9918, -85.6068), ...

» JavaScript object version

Happy 5th Birthday, Google Maps API

Google Maps API celebrates five years

It’s been five years since Google released the first version of its mapping API. Almost instantly the term “mashup” became synonymous with plotting data from one source on Google Maps. And since then, it’s gone from fun little toy to extremely useful tool. And while I appreciate all mapping APIs, it’s important to note this milestone for the influential platform. Let’s look where we are and how far we’ve come.

It’s easy to forget now, but the API followed some unofficial hacks (we celebrated this anniversary in April). Adrian Holovaty’s ChicagoCrime plotted public crime data in Chicago. Paul Rademacher’s HousingMaps let house hunters browse Craigslist visually. Holovaty’s site went on to become EveryBlock and roll its own mapping platform. Rademacher now works at Google.

Initial Reaction

There was tremendous excitement surrounding the announcement, Google making it official. Yet it’s quaint to realize that Google’s announcement came via a three sentence blog post and a spot on stage at the very first Where 2.0 Conference. It was not covered in TechCrunch–the site had barely launched.

I excitedly wrote about it on my own blog and quickly added maps to my Portland WiFi finder.

Everyone Adds a Mapping API

The Google Maps API probably didn’t take other map provider’s by surprise. Yahoo, for example, announced its API the following day. If it had been easier to use and wasn’t Flash-based, we might be living on a different geo web. Less than a month later Microsoft had Virtual Earth.

And around the same time the open source project Mapstraction was born. It now covers about a dozen mapping APIs with a single interface.

The Cutting Edge

It’s no longer enough to simply have a map. If it was, there wouldn’t have been much of a reason for me to write a book. Innovative developers will always push the boundaries, but here are some ways APIs are making it easier to create unique map apps:

  • Change your actual map imagery: Open Street Map beget CloudMade, which had to have inspired Google’s map styling. Now anyone can have a truly custom map.
  • Access data, where you want it: Administrating a geo database used to be hard. Now you can store your data in the cloud with My Maps Data or SimpleGeo. Or, if you want at public data, there are any number of sources to get just the information you need at the moment where you application needs it.
  • Mobilize your maps: The potential of the mobile web is being realized. Smart phones know our location and can display the Real Web on beautiful, touchable screens. Unfortunately, the bandwidth and processing power on a tiny little phone isn’t quite up to computer speeds. That means that the speed of mapping APIs is becoming even more important. That’s why we saw Google switch to version 3, which was initially built with mobile devices in mind.

Maps in 2015

Will this post look as quaint in five years as the Maps API announcements from 2005 do now? Probably. With as much as we’ve packed into the Map mashup era so far, we’re moving even faster now. Thanks to Google Maps–and the developers who use any mapping APIs–we’re just getting started exploring the world around us.

Map Scripting & Design

There are so many great tools for creating maps on the web, but so many maps are still boring (some of mine included!). There is an opportunity to set your maps apart, as I described in my SXSW talk. Also, the interaction with maps and their associated processes are still being figured out. This is another area where designers can make a huge impact.

I recently gave a talk at Refresh Portland with this message. I’ve embedded my slides below and pulled out a couple links I mentioned:

If you’re interested in walking through a map project together, from the basics to plotting data from outside services, I’m giving a half-day workshop, Hands On Map Scripting, at WebVisions.

Share Your Location: It’s Not Creepy, It’s the Future

I recently gave a five minute talk at Ignite Corvallis about sharing location. I covered several services to share location and hopefully made it clear that they are moving toward the mainstream. Since the audience was filled with early adopter types, I suggested that they have the obligation to lay the groundwork for the future.

And if you are reading this, so do you. To get started watch my talk, which is also embedded in this post.

Add Visualizations to Your Google Maps With Cartographer

Using standard markers gets pretty quickly crowded if you have many points. And it’s not always the best way to describe data. Cartographer is a new library that helps you add better content to your maps.

Currently it contains three types of data visualization:

Choropleth map in Cartographer

Choropleths are the official name of the maps that shade regions based on data. They became popular in recent U.S. presidential elections to show which candidate was in the lead, but they’re useful for holding any type of data that can be aggregated at a regional level.

Pie Charts
Pie Chart map in Cartographer

These are useful for communicating multiple bits of data per location. For example, you might show how many of each age group live in many cities. If each city has a pie chart connected to it, you can show a lot of data at a glance.

Cluster Map
Cluster map in Cartographer

The most common way to display many markers is to cluster many together for zoomed-out views. Cartographer does this and even gives a visual idea of how many points are below each area by varying the size of the cluster. Users can then zoom in to see more and Cartographer re-clusters where necessary.

Cartographer only works with Google Maps and also requires the Raphael JavaScript library for SVG graphics. There is a lot of value in these sorts of libraries that build upon basic functionality of mapping providers.

via Mike Duffy

Download Custom Markers for Your Map

If you don’t want to make your own markers for your map, the next best is to download some icon sets to use. Then, add custom markers to your map by simply including the URL to your chosen image.

Below are some excellent sources for many great-looking markers. This post is evolving–if you know more, leave a comment and I’ll include it.

Map Icons Collection
Google Maps Icons

600 free icons, broken down by category. Available all at once, one-at-a-time, or in curated packs.

Cartosoft mapicon Factory
Cartosoft mapicon Factory

Build your own by choosing the shape, color and contents of each marker icon.

Joining the Geomena Project

The Geomena Project is creating a database of WiFi IDs and geographic coordinates. It’s sort of a structured wiki in that anyone can add new points or update previous ones. The real fun comes in querying it to determine location based on the WiFi networks nearby. I’m thrilled to be joining Don Park on this project.

WiFi geolocation is moving towards ubiquity in the browser. Firefox 3.5 comes pre-installed with the ability for users to share their location and other browsers are adding it. Thanks to standards, the same code that works in Firefox also lets you get the latitude and longitude of your iPhone, for example. However, the underlying data is closed and cannot be updated or appended. Geomena is looking to open this up, available for anybody.

I’ve known Don for several years, as our paths have crossed in the open source, public WiFi and geo communities. Geomena is a great opportunity for us to blend all three. There is a lot to do to make it easy to contribute to the database, as well as benefit from it by geolocating users. We’ve discussed browser plugins, location games and a read/write API. If the project interests you, we’d welcome collaboration. I’ll likely post some here about it, and you can follow more updates at

Google Gives Me My Location Data

Google Latitude -- now with open data

I’ve been remiss to note that Google opened Latitude, their location-sharing site, to provide access to the data. Since I complained that was missing at launch, it’s only fair that I give credit when they make it right.

It is not your standard API, but does take a simple approach by using a feed. If you opt in, you can get your location in JSON, KML, or an HTML/JavaScript widget to add to your website. If you’re already set up with Latitude, find out how to get your data here.

Beware “Hackable” My Maps

When I looked into how NPR was plotting a road trip, I discovered they were using Google My Maps. The two year old feature lets anyone manually create a mashup. It has a great feature-set, can be embedded and you can even collaborate with friends.

That last item led to another realization: NPR’s map was publicly editable.

NPR's site with edited map

I was shocked when my edited icon really showed up on NPR’s site (via the embedded map). Even though the My Maps settings seemed to allow editing, it felt wrong to be controlling a piece of public radio’s flagship site.

I moved my icon down to Panama, where most wouldn’t see it. Then I promptly emailed the addresses listed as other collaborators. I wanted to leave the map edited, because I was worried that they wouldn’t fix it if it didn’t appear broken.

Collaborators pane in My MapsHow to Keep Me From Editing Your Maps

NPR wanted several reporters and support staff to have access to the map. “Allow anyone to edit this map” must have seemed like the right setting at the time. Unless you want truly anyone to be able to edit the map (and there are many great examples of crowdsourced My Maps), you’ll want to make sure to leave that option unchecked.

It’s a Feature, Not a Bug

To be clear, I didn’t hack anything. There are examples of crowdsourced My Maps that are publicly editable by design, like The Great Fish & Chips Map. There are times for maps to be edited by one person, a group of people and by the whole world. Just make sure you have the setting for your situation.

Map Your Family in Realtime

AT&T Family Map

No need to call up your significant other and ask “where are you?” If you’re a customer of three of the biggest mobile phone companies, you can just check their website. AT&T recently announced its FamilyMap service, which you can use to track the locations of family plan members.

The system undoubtedly uses cell phone towers, so we aren’t looking at extreme accuracy. If you live in a city it certainly zeroes you in on an area of town. The technology has existed for years, with Verizon and Sprint each coming out with their version in 2006. Before that it was apparently only used by law enforcement (and law enforcement television shows).

Much like Google’s Latitude, this is starting an important conversation about location. Also like Latitude, I really wish the phone carriers included APIs so I can access my own data.

via Wired

Adam DuVanderHi, I'm Adam. I'm writing a book about developing maps on the web. This site is where I'll share the things I find and help you create your own maps. Find out more.

Map Scripting 101