Map Scripting


Create Location-based Web Applications

iPhone “watchposition,” But Only If The Location Has Changed

As I’ve written previously iPhone geolocation using JavaScript is quite easy. In addition to grabbing the location once, you can use the W3C geolocation standard watchposition to get continual updates of the user’s location.

However, you can’t control how often you receive updates. On an iPhone, it sends new positions about once per second. To most web apps, that’s way too often, especially if the user isn’t moving much. The code below only performs the desired action when the new position is different enough than the last position. “Different enough” is 0.1 kilometers, but you can change that to whatever you want in the okdist variable.

This example is built on Mapstraction (as is much of Map Scripting 101), so you can use Google Maps, Bing, MapQuest, or any number of mapping providers. This code works on the iPhone, Android and many desktop browsers. Check out the code below, or see the working demo here.

// Pre-declare variables
var lastloc = mxn.Mapstraction.LatLonPoint(0, 0);
var okdist = 0.1; // km
// Request location updates

function foundLocation(position)
	var lat = position.coords.latitude;
	var lon = position.coords.longitude;
	var posll = new mxn.LatLonPoint(lat, lon);
	if (lastloc.distance(posll) > okdist) {
		lastloc = posll;
		// Your code for when new location is different enough


Wishful Mapping: Can I Give You a Book?

‘Tis the season where geeks and wannabe geeks ask their friends and loved ones for those things that haven’t yet bought themselves. For those who haven’t had a chance to buy Map Scripting 101 yet, I’d love to give it to you. Since I can’t give it to everybody, I decided to create a simple way to choose someone.

I call it Wishful Mapping. You add the book to your Amazon wishlist, then share it with me. I’ll randomly select someone to receive a copy of the book as a gift from me. And, of course, there’s also a good chance whoever else you share your wishlist with will get it for you.

To get started, go to Map Scripting 101 at Amazon.

Look for the Add to Wish List button.
Add Map Scripting 101 to your Wish List

After you’ve added the book to your wishlist, look for the Share With Friends link at the top of your wishlist.
Share Wishlist With Friends

Include in the To: section. Increase your odds of receiving the book by including your the email addresses of others who might give you a gift. Only Amazon sees their email addresses.
Share this Wishlist via e-mail

And that’s it. Later this month I’ll select a random Wishful Mapper to receive Map Scripting 101 for free.

Useful Web Map Resources for Cartographers

I was delighted to give a workshop today at the annual meeting of the North American Cartographic Information Society (NACIS). These are folks with advanced knowledge of geographic information systems (GIS) and they make what I fondly refer to as “real maps.” There’s a wealth of mapping knowledge that has yet to make its way to the web and I hope some will fill that void.

Much of the workshop centered around the Mapstraction Sandbox, which lets you tweak code and watch it update live. Here are some other tools and code samples I shared during the talk:

My thanks to Tanya Buckingham from NACIS for inviting me after she attended my workshop at Where 2.0.

Chapter 6: Explore Proximity

This is part of a series looking at all 10 chapters of Map Scripting 101.

Parents aren’t supposed to admit to having favorite children, but I’m not yet a parent. Explore Proximity is my favorite chapter in the book. Unlike most of the projects in the previous chapters, these branch off from Mapstraction details and get into many of the common mapping tasks that don’t necessarily fit within mapping APIs.

Testing whether a click is within set bounds

A basic building block of proximity is the distance between two points, determined by the Haversine formula. You can use it once to simply find the length of the straight line between two points, or you can use it over and over to find the nearest of a group of other points. I cover this for both markers on a map and rows in a database.

Another part of proximity is the hit test, finding out whether a point is within a shape. For a box, like the screenshot above, it’s pretty easy. For a shape with any number of vertices? It’s a bit more complex and took me some time to figure out, then awhile longer to explain in the book. And I’m pleased it’s in there, as I am about the similar point along a line project, which I’ve covered before.

Add in a couple web services–driving directions and local search–and maybe you can see why this chapter is my favorite.

Chapter 5: Handle Map Events

This is part of a series looking at all 10 chapters of Map Scripting 101.

Easily one of the features most often overlooked by map mashups is the ability to tap into the map’s interactivity. I gave it an entire chapter in the book in hopes of encouraging you to “listen” for events in your applications.

Map drag event looks for the map leaving an area

For example, you can help your users identify a location by reacting to a map click. In fact, in chapter 4 I showed an example where the user can draw a line by connecting clicks.

Just as useful is knowing when the user moves or zooms the map. Then you can change what data you’re showing based on the new location or boundaries. Another use case I show for these events is to find out whether the user has moved outside pre-set bounds, such as Yellowstone National Park.

Other events covered include marker clicks, adding markers/polylines and opening/closing a message box. Use them and react to your user’s movements.

Chapter 4: Layer it On

This is part of a series looking at all 10 chapters of Map Scripting 101.

This chapter is where mapping starts to get really interesting, because it’s about more than the map and simple markers. There are 11 fun and useful projects, from drawing simple lines on the map to creating entirely new imagery to add as an overlay.

Twitter search near Portland shows circle overlay

One of my favorite projects, for its high impact and easy implementation, is the circle overlay. You can use circles to show a search radius with just a few lines of Mapstraction and it makes a for a great visualization.

Other layering projects include drawing shapes (including the outlines of states/countries), using custom tiles and geo-referencing an image so it can be placed in the right location on the map.

Chapter 3: Geocoding

This is part of a series looking at all 10 chapters of Map Scripting 101.

Geocoding, converting addresses and city names into coordinates to place on the map, is such an important part of mapping, it’s hard to believe Google Maps launched without the feature. Now there are many geocoding services available, both within mapping APIs and from additional services, both free and paid. There’s also a greater need for reverse geocoders, which take a point on the map and return something human readable, like an address.

Geocoding an address

The book covers four types of geocoders:

  1. Forward geocoding in JavaScript
  2. Forward geocoding server-side
  3. Reverse geocoding in JavaScript
  4. Reverse geocoding server-side

Reverse geocoders are becoming more popular because of mobile browsers. While in the past we almost always received our users’ locations from an address they type in, now we’re often receiving it directly, such as with the iPhone geolocation code, a standard that works across many browsers (including many desktop browsers). Coordinates help make coding easier, but sometimes you need to share with users where you think they are. Users don’t understand latitude/longitude, but they do understand addresses.

Reverse geocoding in Foursquare

In addition to geocoding services, the book covers postal code databases. It is common for sites in the U.S. to request the user’s zip code, which is faster to type and less invasive than a full address. You can pass that off to a geocoding service to convert a code to, usually, the center of the postal code area. Or, you can install a postal code database yourself and not have to worry about building on top of another service, at least for postal code queries, which are fairly easy to identify.

Chapter 2: Plotting Markers and Message Boxes

This is part of a series looking at all 10 chapters of Map Scripting 101.

Adding markers to a map is so central that I considered including it in chapter 1. However, because it’s such an important topic, it really deserved its own chapter. In addition to adding basic markers, I covered the way Mapstraction lets you customize your icon and do other cool things that aren’t included in standard mapping APIs.

Custom sombrero marker

In my talks about mapping at conferences, I tell developers that using a custom icon is by far the easiest thing you can do to make your map stand out from all the other mashups. And there’s really no reason not to do it in Mapstraction, as it’s just one more line, as I showed in the custom marker icons post.

Once you have a map full of markers, Mapstraction has a couple pretty cool features to deal with them. In another line of code you can automatically center and zoom the map so that all of them appear. And Mapstraction also lets you add any data you want to each marker, then filter upon that data.

As the title of the chapter suggests, it also covers message boxes, the little windows that pop up from markers to provide additional information. You can learn all about message boxes, filtering and everything else in this chapter by downloading chapter two for free from the publisher’s website.

Chapter 1: Mapping Basics

This is part of a series looking at all 10 chapters of Map Scripting 101.

The first chapter aims to get you started mapping quickly. It introduces a few concepts, like latitude/longitude, then gets right into creating maps and adding controls to them.

Among the most important projects in the entire book is my introduction of Mapstraction. I’ve written about Mapstraction quite a bit on this blog before, including one of the first posts. The open source library is the heart of almost every example in Map Scripting 101.

Mapstraction lets you write your code once and not worry much about changes to other providers. It helps provide an open interface to maps on the web, as I discussed in How Open Should Mapping APIs Be at Where 2.0 in 2009:

Like any good first chapter, Mapping Basics sets the foundation for the next nine chapters.

Meet in the Middle Mashup

In the middle of Portland and Spokane

You’re in Portland, but you have a friend in Spokane that you’d like to see. Nobody feels like driving the whole way, but you’re both up to half the trip. Now, how do you determine where to meet? Meet in the Middle finds that midpoint and then searches Yelp for coffee. Yes, Hermiston is a long way to go for coffee.

» Try out the Meet in the Middle Mashup

Of all the examples in the book, I might have been most excited to include this one. It builds upon the Walker Tracker example where I found a point a certain distance along a route. And it works pretty well for both long distances and trips across town.

Want to search for something other than coffee? The code is simple enough that you could probably figure out how to make that change without even looking in my book. (But just in case you need a hint, it’s on page 285).

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