Map Scripting

Icon

Create Location-based Web Applications

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
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.

How to Add Custom Markers to Your Map

It might be the best way to make your map look different than all the others. Lose the reverse tear drop icons (the default Google look) and add your own graphics.

Mapstraction makes it easy to include your own markers. And, as always, write the code once in Mapstraction and it works in one of a dozen mapping APIs. Here’s a custom marker map demo that shows a sombrero over my favorite Mexican restaurant in Portland. Classy!

It looks something like this:
Custom sombrero marker

Now you try:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Custom Marker Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOURKEY"
    type="text/javascript"></script>
    <script src="mapstraction.js"></script>
    <style>
      div#mymap {
        width: 400px;
        height: 350px;
      }
    </style>
    <script type="text/javascript">
      var mapstraction;
function create_map() {
  mapstraction = new Mapstraction('mymap', 'google');
  mapstraction.setCenterAndZoom(
    new LatLonPoint(45.559242, -122.636467), 15);
  var mk = new Marker(new LatLonPoint(45.559242, -122.636467));
  mk.setIcon('sombrero.png', [40,24]);
  mk.setShadowIcon('sombrero-shadow.png', [53,24]);
  mapstraction.addMarker(mk);
}
    </script>

  </head>
  <body onload="create_map()">
    <div id="mymap"></div>
  </body>
</html>

Remember you’ll need to download Mapstraction and get a Google Maps API key. Finally, make sure you have the following if you plan on using the sombrero images:

Happy mapping with your custom markers!

Geolocate Now With Twitter, Using Simple Search

While we’re waiting for Twitter’s official geolocation platform, how about this ad hoc method. Pick a famous location, stick “at” in front of it, and use Twitter search.

Tweets from Disneyland

Amber Case suggested Disneyland. Go ahead and try it out. I found that Graceland and Yellowstone have good results, too.

We’ll be able to do more interesting things when we have latitude and longitude. In the meantime, this is a fun, simple way to get a glimpse of what’s going on at popular vacation destinations.

Follow Conversations and Dollars on a Map

Some giant chunks of data are making their way to web maps and they’re looking slick. When you have millions of records, you can’t simply add a marker for each one. Instead, you aggregate, as these two mashups have done.

Watch trends by location
Trendsmap

Trendsmap uses the most popular terms being discussed on Twitter. But the fun part is that, rather than looking at all trending topics, it segments them into location and puts them on a map. So, whatever is big in Portland might be different from Atlanta or London.

Once geolocated tweets are commonplace (it’s coming soon), we’ll see even more of these sorts of apps. Knowing what’s going on in a country, city, or within a quarter mile will be a click away. How might that change how we interact?

Follow government spending
Recovery.gov map of spending

Recovery.gov is tracking billions of dollars in U.S. stimulus money as it flows out of Washington. A nice piece of website real estate is devoted to a map application for slicing and dicing the data. You can see the funding by state, department, agency and awards type.

This sort of accountability it going to become expected at every level of government. You had better believe we’ll need web mappers to help achieve transparency.

First Draft of the Map Scripting Book Done

In the craziness of getting married, I managed to miss posting my most exciting book news yet: My initial draft is complete!

I haven’t been this happy since I fixed my webcam:
Adam celebrating his working webcam

There’s still plenty to do. Every example will be looked over by a technical reviewer, to ensure that all the code works as expected. I will become good friends with No Starch’s copy editors. Finally, there are a few more mashups and projects I want to add to the book.

But this milestone, it’s not lost on me.

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 geomena.org.

Book Progress: 75% Done!

I’ve had my head down writing and I’m seeing the progress. Of the nine chapters currently planned (that number may change), I have written all or most of seven of them. That means I’ve nearly written a book!

Now my plan is to sprint through the bulk of what remains during August, leaving just a few bits to finish up after my wedding.

Several people have asked me when my book will be out. Thank you for your interest! I don’t know–there’s a lot to be done even after my writing is finished. However, I now have a handy form in the sidebar of this site. If you’d like word of when the book is out, visit the main page and fill in your email address. I won’t do anything bad with it, I promise.

So Many Geocoder Options

Geocoding is an integral part of using mapping APIs, as it converts from human-readable addresses to latitude and longitude points that the providers understand. It’s also not particularly easy to do on your own, so you’ll likely need a provider.

Below you’ll find an extensive, categorized list of geocoding providers.

JavaScript Geocoders

Free Geocoder Web Services

Commercial Web Services

Got any more?

I know I’ve missed some. What other geocoders need to be added to this list?

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