www.nostarch.com THE FINEST IN GEEK ENTERTAINMENT ™ SHELVE IN: WEB DEVELOPMENT/DESIGN $34.95 ($43.95 CDN) ONLINE MAPS MADE EASY ONLINE MAPS MADE EASY Websites like MapQuest and Google Maps have transformed the way we think about maps. But these services do more than offer driving directions—they provide APIs that web developers can use to build highly customized map-based applications. In Map Scripting 101, author Adam DuVander delivers 73 immediately useful scripts—examples that will show you how to create interactive maps and mashups. You’ll build tools like a local concert tracker, a real-time weather map, a Twitter friend-finder, an annotated map of Central Park, and much more. And because the book is based on the cross-platform Mapstraction JavaScript library, everything you create will be able to use nearly any mapping service, including OpenStreetMap, MapQuest, Google, Yahoo!, and Bing. You’ll also learn how to: • Create, embed, and manipulate basic maps by setting zoom levels and map boundaries • Show, hide, and filter location markers and info-bubbles • Customize your maps for visitors based on their location • Use common data formats like Google Earth’s KML, GeoRSS, and GPS XML (GPX) • Create graphical overlays on maps to better analyze data and trends • Use freely available geodata from websites like Yelp and Upcoming—and public domain geodata from the US government Map Scripting 101 is perfect for any web developer getting started with map scripting, whether you want to track earthquakes around the world, or just mark the best coffee shops in Dubuque. ABOUT THE AUTHOR Adam DuVander writes about geolocation, web develop- ment, and APIs for Programmable Web and WebMonkey, Wired.com’s web developer resource. He has presented his work at SXSW and O’Reilly’s Where 2.0 conference. He lives at 45° 33' 25" N, 122° 31' 55" W (otherwise known as Portland, Oregon). function plot_upcoming(jobj) { if (jobj.length > 0) { mapstraction.removeAllMarkers(); for each (var ev in jobj) { var url = "http://upcoming.yahoo.com/event/" + ev.id; var marker = new Marker(new LatLonPoint(ev.latitude, ev.longitude)); var cost = ev.cost; if (cost != "") { marker.setAttribute('cost', parseInt(cost)); cost = " ($" + cost + ")"; // Format cost for infoBubble } else { marker.setAttribute('cost', 9999); // Set a way too high value } var bubbletext = ev.date + " <a href=\"" + url + "\">" + ev.title + "</a>" + cost; marker.setInfoBubble(bubbletext); mapstraction.addMarker(marker); } filter_select(document.forms[0].cost); } else { alert('no results for this search'); } } “I LIE FLAT.” This book uses a lay-flat binding that won't snap shut. function plot_upcoming(jobj) { if (jobj.length > 0) { mapstraction.removeAllMarkers(); for each (var ev in jobj) { var url = "http://upcoming.yahoo.com/event/" + ev.id; var marker = new Marker(new LatLonPoint(ev.latitude, ev.longitude)); var cost = ev.cost; if (cost != "") { marker.setAttribute('cost', parseInt(cost)); cost = " ($" + cost + ")"; // Format cost for infoBubble } else { marker.setAttribute('cost', 9999); // Set a way too high value } var bubbletext = ev.date + " <a href=\"" + url + "\">" + ev.title + "</a>" + cost; marker.setInfoBubble(bubbletext); mapstraction.addMarker(marker); } filter_select(document.forms[0].cost); } else { alert('no results for this search'); } } MAP SCRIPTING 101 MAP SCRIPTING 101 ADAM DUVANDER AN EXAMPLE-DRIVEN GUIDE TO BUILDING INTERACTIVE MAPS WITH BING, YAHOO!, AND GOOGLE MAPS function plot_upcoming(jobj) { if (jobj.length > 0) { mapstraction.removeAllMarkers(); for each (var ev in jobj) { var url = "http://upcoming.yahoo.com/event/" + ev.id; var marker = new Marker(new LatLonPoint(ev.latitude, ev.longitude)); var cost = ev.cost; if (cost != "") { marker.setAttribute('cost', parseInt(cost)); cost = " ($" + cost + ")"; // Format cost for infoBubble } else { marker.setAttribute('cost', 9999); // Set a way too high value } var bubbletext = ev.date + " <a href=\"" + url + "\">" + ev.title + "</a>" + cost; marker.setInfoBubble(bubbletext); mapstraction.addMarker(marker); } filter_select(document.forms[0].cost); } else { alert('no results for this search'); } } DUVANDER MAP SCRIPTING 101 MAP SCRIPTING 101 M A P S C R I P T I N G 1 0 1 Dow nl oad fr om Wo w! eB ook < www .wo we boo k.c om > M A P S C R I P T I N G 1 0 1 A n E x a m p l e - D r i v e n G u i d e t o B u i l d i n g I n t e r a c t i v e M a p s w i t h B i n g , Y a h o o ! , a n d G o o g l e M a p s by Adam DuVander San Francisco MAP SCRIPTING 101. Copyright © 2010 by Adam DuVander. All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. 14 13 12 11 10 1 2 3 4 5 6 7 8 9 ISBN-10: 1-59327-271-5 ISBN-13: 978-1-59327-271-5 Publisher: William Pollock Production Editor: Ansel Staton Cover and Interior Design: Octopod Studios Developmental Editor: Tyler Ortman Technical Reviewer: Derek Fowler Copyeditor: LeeAnn Pickrell Compositors: Serena Yang and Riley Hoffman Proofreader: Linda Seifert Indexer: Nancy Guenther For information on book distributors or translations, please contact No Starch Press, Inc. directly: No Starch Press, Inc. 38 Ringold Street, San Francisco, CA 94103 phone: 415.863.9900; fax: 415.863.9950; info@nostarch.com; www.nostarch.com Library of Congress Cataloging-in-Publication Data: DuVander, Adam. Map scripting 101: an example-driven guide to building interactive maps with Bing, Yahoo!, and Google Maps / by Adam DuVander. p. cm. Map scripting one hundred one Includes index. ISBN-13: 978-1-59327-271-5 ISBN-10: 1-59327-271-5 1. Cartography. I. Title. II. Title: Map scripting one hundred one. GA105.3.D88 2010 526 dc22 2010024113 No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the infor- mation contained in it. For my mother, who would have read this book from cover to cover, even if she didn’t understand it. B r i E f c o n t E n t S Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xvii Chapter 1: Mapping Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 2: Plotting Markers and Message Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Chapter 3: Geocoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Chapter 4: Layer It On . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Chapter 5: Handle Map Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Chapter 6: Explore Proximity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Chapter 7: User Location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Chapter 8: Data Formats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Chapter 9: Go Server-Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Chapter 10: Mashup Projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Appendix A: JavaScript Quick Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Appendix B: Mapstraction Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 MAPS_01.indb 7 7/13/2010 12:57:45 PM [...]... as mxn.js Now let’s look at the Mapstraction code itself inside the create _map function: function create _map( ) { var mapstraction = new mxn.Mapstraction('mymap', v'yahoo'); mapstraction.setCenterAndZoom( new mxn.LatLonPoint(37.7740486,-122. 41018 83), 15); } Here, the only difference between the Mapstraction map made with Google and this map is we’ve noted we’re making a Yahoo! map v That’s it No need... width: 400px; height: 350px; } Mapping Basics 7 function create _map( ) { u var opt = {center: new google.maps.LatLng(37.7740486,-122. 41018 83), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP}; v var map = new google.maps .Map( document.getElementById("mapdiv"), opt); } w Save... Then, in the create _map function, we let it know which type of map w we are creating Mapping Basics 11 Once you have your Mapstraction map, save your HTML file and load it in a browser The result should look exactly like the Google Map in Figure 1-4 This Google Map, created via Mapstraction, should be centered on No Starch Press’s neighborhood in San Francisco Use Yahoo! Maps with Mapstraction To get... src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=yourkeyhere"> Next, alter the contents of the create _map function like so: u v function create _map( ) { var map = new Ymap(document.getElementById('mymap')); map. drawZoomAndCenter(new YGeoPoint(37.7740486,-122. 41018 83), 3); } Save your file and load it in a browser The result should look something like Figure 1-4, with your Yahoo! Map centered on No Starch. .. function create _map( ) { var mapstraction = new mxn.Mapstraction('mymap', 'wgooglev3'); mapstraction.setCenterAndZoom( new mxn.LatLonPoint(37.7740486,-122. 41018 83), 15); } Just like you would for a normal Google Map, we include Google’s JavaScript u For this code to work, you also need to download the Mapstraction files... similar But these minor differences compound to become a big pain, however, if you need to switch from one to the other That’s why Mapstraction is so powerful, as you will see in the next section Create a Mapstraction Map Mapstraction is a little different from Google Maps and Yahoo! Maps Mapstraction is an open source JavaScript library that ties into other mapping APIs If you use Mapstraction, you... Google is the 500 pound gorilla in many areas of the Web, and mapping is no exception Most map developers choose the Google Maps API, if only because of its ubiquity In addition to being everywhere, Google Maps is fast and stable Google Maps has been around since 2005 That’s not to say the Maps team isn’t innovating On the contrary, Google Maps is often the first to add new features to its API, such... create a basic map in this section, and it will serve as a building block for future projects First, we’ll use the Google Maps API to create a map centered on the No Starch Press offices in San Francisco Then, I’ll show you the changes necessary to create the same map using Yahoo!’s service Finally, I’ll show how nearly identical Mapstraction code can create both of those maps Create a Google Map Google... Degree Formats Determine Precision of Decimal Coordinates Create Your First Map Create a Google Map Create a Yahoo! Map Create a Mapstraction Map Use Yahoo! Maps with Mapstraction Find the Underlying Map Tiles Change the Map Size Add Zoom and Other Controls ... have all sorts of mapping options You can use Google Maps, Yahoo! Maps, and many others And these maps make mapping easy; all you need are just a few lines of code to include a map on your web page Figure 1-1 shows a page from Yelp, a restaurant review site and one of thousands of sites that use maps to mark locations Figure 1-1: Local search site Yelp uses Google Maps To embed a map, you need to use . Title: Map scripting one hundred one. GA105.3.D88 2010 526 dc22 20100 24113 No Starch Press and the No Starch Press logo are registered trademarks of No Starch. contact No Starch Press, Inc. directly: No Starch Press, Inc. 38 Ringold Street, San Francisco, CA 94103 phone: 415.863.9900; fax: 415.863.9950; info@nostarch.com;