Map Scripting

Icon

Create Location-based Web Applications

Zoom in on Mapping and Location

I was delighted to speak at DevGroupNW, giving an overview of mapping and location services. I covered four areas: mapping APIs, geocoders, location guessing and location sharing. The areas are all inter-related, with location data eventually finding its way to a map.

I’ve posted my slides (also embedded below):

I’ll finish this post by asking the same question I did of the audience: how will you use location in your web projects?

How to Use iPhone JavaScript Geolocation

Update: iPhone OS 3.0 is now out. I have updated the code below to the latest geolocation spec, which the iPhone supports.


There will soon be a new iPhone and a third version of the phone’s operating system. Among the new features in iPhone OS 3.0 is geolocation in the web browser, which will be available on all iPhones–not just the new one. As a developer who appreciates the single platform of the web, this is the most exciting news.

I’ve had a number of people suggest that I should create an iPhone app for my Portland WiFi finder site. While I like the idea of being able to immediately show closest hotspots, it seems like a lot of work for a small number of users (sorry Portland laptoperati).

Plus, I love the web. It is my favorite platform. Geolocation in a simple browser is becoming more common, though it usually involves installing an add-on. I expect that will change, with browsers incorporating geolocation just as Apple has with the iPhone. The Opera browser has already done this and Firefox’s next version will, too.

There is even a W3C standard for geolocation being developed. From the looks of Apple’s documentation, the iPhone supports the specification, which adds a navigator.geolocation object.

You can try it out on your iPhone by going to this shortened URL:
http://bit.ly/w3cgeo

Here’s code for finding the location of your user in the iPhone 3.0 version of Safari:

navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

function foundLocation(position)
{
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  alert('Found location: ' + lat + ', ' + long);
}
function noLocation()
{
  alert('Could not find location');
}

The getCurrentPosition function requires two arguments, which are each function references. You can write them as inline, anonymous functions, or name them as I have above.

Upon success, the first function will be called. As you can see, an object containing the latitude and longitude is passed to this function. My code just echos the data in an alert, but yours will likely center a map or lookup nearby locations.

As with any geolocation, the user will have to give permission to provide the location data. If they deny, or if there is an error, the second function is called. Use this function to perform any tasks necessary for a non-geolocated user. I send a message through an alert, but you probably won’t want to do this.

Native geolocation on the iPhone should get the feature more respect and pick-up in all browsers. Hopefully Google Gears, which also provides this feature to browsers and mobile phones, will adopt the W3C spec so that we have one, standard way to access geo data.

Mapping History: Henry Hudson 400

Henry Hudson Voyages

Even if you aren’t a history buff, you have to appreciate the mapping project by my fellow Programmable Web blogger Andres Ferrate. It chronicles the four voyages of Henry Hudson, most notably the one 400 years ago that took him to the east coast of the United States.

Andres started with the Google Maps API, then layered on historical maps and points of interest. There’s even the option to see the routes Hudson took on each voyage, including the one where he discovered the Hudson River and Hudson Bay. Yep, he’s that Hudson.

This may be a glimpse into what will replace the textbook, at least for primary school education. Explore the Hudson maps and tell me what you think.

How Open Should Mapping APIs Be?

Last week I was delighted to give an Ignite talk at the geo conference Where 2.0 about open mapping. There are a number of ways to interpret what that means, but I chose to focus on the APIs themselves. Getting a new developer to join the geo community right now means that the developer needs to choose an API to learn.

I’ve never been a fan of being monogamous with technology. One tool might be great for a particular project, but something else might be better for another project. With mapping APIs Mapstraction fixes this issue, but shouldn’t providers get together and standardize on their own? Watch my presentation (embedded below) to hear more about my thoughts on this topic.

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.

Weather, Earthquakes and Concerts — Example Mashups

Cloudy in MiamiI’m totally stoked to have finished the first draft of a really big chapter for the book. Mashup with Data APIs will show at least three example mashups that I think will help beginners learn how to incorporate outside data and create interactive maps.

  1. My Weather mashup shows the current conditions across the U.S. and provides the forecast when you click an icon.
  2. My Earthquake Mashup shows the earthquakes in the world over the last week, with marker size increasing with the quake’s intensity.
  3. My Upcoming mashup shows concerts happening in the next week by location, with filtering by ticket price.

If you’re new to mapping, get a feel for how it works by viewing source. On the other hand, if you’re a JavaScript expert, tell me what you would have done differently. In either case, I’d love to hear feedback!

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

Roll Your Own IP Geocoder

If you’ve ever seen a site correctly guess your location, chances are good it used your IP address and a big ol’ database to make an educated stab at it. Now you can do the same and do it for free.

IP addresses are numeric identifiers for every computer connected to the Internet. They look like 68.180.206.184 and 206.190.60.37. With great accuracy, these can be traced down to the city where they originate, assuming you have the data necessary.

Marc-Andre Caron compiled a MySQL IP database that you can install on your own server. Read on for some basic instructions to roll your own geocoder. If you’d rather use a web service to get at the data, check out my post at ProgrammableWeb.

Wait… How Does This Work?

The database catalogs known blocks of IPs by their location. For example, Comcast cable might own 71.59.208.0 – 71.59.208.255 and use them (along with many others) to hand out to Portland residents.

To conserve database space, the IP is converted to a unique number. Where the IP is A.B.C.D, the number is ((A*256+B)*256+C)*256. So, 71.59.208.255 would become 1195102208. As would anything in the 71.59.208.X block, because notice that there is no D in the above formula. That’s because IPs come in blocks, so everything in the range will likely have the same location.

Download and Decompress the Database
Caron’s MySQL database comes compressed using bzip2, a free utility available on most Unix-ish systems. While phpMyAdmin accepts imports directly in the compressed format, it is likely beyond the capacity, so you will need to have SSH access to your server and the MySQL command tool.

Download the SQL to your server and unzip the archive:
bunzip2 ipinfodb.sql.bz2

You should now have a much larger file, likely called ipinfodb.sql.

Install the Database

Now you’ll need to use the MySQL tool on your server. You may need to ask your host for specifics, but often the command to bring it up will be similar to this:
mysql -u username -p databasename

You’ll be asked for a password. If all is well, you’ll see the prompt, where you can enter SQL commands. This is a less graphical phpMyAdmin, a great place to test out queries.

To import the data, run this command in the MySQL tool:
\. ipinfodb.sql

This will read in the large SQL file and start creating the tables and adding its necessary data. The process will take many minutes. Go take a break!

When you see the MySQL prompt again, you know it is finished. To quit the tool, use the \q command.

Run a Lookup from PHP

There are two ways to query the database. You can convert the IP to a number yourself, or you can use the INET_ANON function in MySQL:
SELECT * FROM `ip_group_city` where `ip_start` <= INET_ATON('71.59.208.255') order by ip_start desc limit 1

The PHP code below shows both options. Before you add it to your own server, see it in action. If you remove the query string (that stuff after the question mark) you can geocode your own IP.

Here is the code listing for my example PHP (be sure to fill in your DB values at the top):

<?
  // Config values -- FILL THEM IN
  $dbserver = "";
  $dbname = "";
  $dbuser = "";
  $dbpass = "";

  // Setup variables
  $ip = $_GET["ip"];
  if ($ip == "") { $ip = $_SERVER["REMOTE_ADDR"]; }
  list($lat, $lon)  = lookup_ip($ip);
  if ($lat && $lon) {
    print "$lat, $lon";
  }

function lookup_ip($ip) {
  global $dbserver, $dbuser, $dbpass, $dbname;
  if (!preg_match("/^\d+\.\d+\.\d+\.\d+$/", $ip)) {
    return;
  }
  $d = mysql_connect($dbserver, $dbuser, $dbpass);
  mysql_select_db($dbname, $d);
  $ipnum = ip_to_number($ip);
  // The numeric option...
  $s = "select latitude, longitude from ip_group_city where ip_start";
       $s .= "<= $ipnum order by ip_start desc limit 1";
  // Or the INET_ANON option...
  $s = "select latitude, longitude from ip_group_city where ip_start";
       $s .= "<= INET_ATON('$ip') order by ip_start desc limit 1";
  $res = mysql_query($s, $d);
  $ll = mysql_fetch_array($res, MYSQL_NUM);
  mysql_close($d);

  return $ll;
}
function ip_to_number($ip) {
  list($a, $b, $c, $d) = split("\.", $ip);
  return (($a*256 $b)*256 $c)*256;
}
?>

Maps Project: Automatic Street View Tour

Here’s a cool idea that Joe Lazarus wants to give to you. Joe made a video tour across the Golden Gate Bridge (embedded above). Since Google Maps gives API access to Street View, someone could automate the process and maybe even open it up to any route.

It sounds like just the thing I’d want to try out if I wasn’t busy writing a book about mapping APIs. Oh, the irony.

But, hey–here’s the Street View API documentation. Be sure and let me know when you’re finished.

Via Andy

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