Wednesday, November 18, 2009

Section 14.2. Yahoo!'s Maps







14.2. Yahoo!'s Maps

Yahoo! may have come later to the open maps game, but when it came, it came with a vengeance, providing both a Flash and non-Flash alternative. In this section, I'm focusing on the JavaScript-only API, but if you have time, I recommend checking out the Flash-based functionality, too.

Figure 14-5. Using GPolygon instead of GPolyline to map out a route


14.2.1. Yahoo!'s Run

To begin with Yahoo! Maps, you have to get an application key. Unlike Google's API, Yahoo!'s map keys work in subdirectories under the URL specified when signing up for the key. Once you have the key, add the Yahoo! Maps script URL to the page, along with a div element serving as a container.

Superficially, it may seem as if Yahoo!'s API is similar to Google's. However, as the first example鈥�a class="docLink" href="#map_with_controls_centered_at_the_st_lou">Example 14-4, which duplicates the same functionality as Example 14-1鈥攄emonstrates, the two are quite different. The example creates a map, centers it, and adds controls for both type and zooming, as well as a marker at the center location鈥攁 good basic map, probably meeting 90% of most map needs.

Example 14-4. Map with controls, centered at the St. Louis Arch, and with a marker


Code View:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<style type="text/css">
    #map {
         border: 4px solid #000;
         margin: 40px auto;
         width: 600px; height: 400px;
         }
</style>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid="></script>
<script type="text/javascript">
//<![CDATA[

window.onload=function() {

   // Create a Map that will be placed in the "map" div.
   var map = new YMap(document.getElementById('map'));

   // Add the ability to change between Sat, Hybrid, and Regular Maps
   map.addTypeControl();

   // Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
   map.addZoomLong();

   // Add the Pan control to have North, South, East and West directional control
   map.addPanControl();

   // create geopoint
   var point = new YGeoPoint(38.6247732, -90.183444);

   // Specifying the Map starting location and zoom level
   map.drawZoomAndCenter(point, 3);

  // set marker
   map.addMarker(point);

}
//]]>

</script>

</head>
<body>
<div id="map"></div>
</body>
</html>


One difference immediately apparent between the two APIs is the code to create the controls. Google has two controls, while Yahoo! has three, splitting the pan navigation feature apart from the zooming. The other methods seem similar to Google's because of how I'm using them: create a geo location, center the map, place a marker. What the example doesn't show is that drawZoomAndCenter takes a string with an address in addition to the geo location object as its first parameter. This means that we don't have to muck around with longitudes and latitudes if we don't want to. However, using specific mapping values is more precise, and I'll continue to use them. Just be aware of the additional capability.

Figure 14-6 shows the map just created. As you can see, the look of the Yahoo! maps is very different than Google's maps. The satellite images used are different, too, with the Arch shadow in a different position in the Yahoo! maps.

Even when using the IE compatibility meta tag in the maps application, IE8 does not process the transparency related to the shadow for the marker in the Yahoo! Maps application. Hopefully this will improve in future beta releases of IE8.


Figure 14-6. Yahoo! map, centered on the St. Louis Arch, showing the satellite view


I'm not crazy about the Yahoo! controls. For the satellite view, they don't show at all. Later screenshots will show they do look better with the mapping views. I like the fact that this example can be moved to a subdirectory and still work. To me, that's a significant difference.

Now let's see how Yahoo! does with the other examples, starting with event handling, dragging markers, and getting locations.

14.2.2. X Marks the鈥�/h4>

Unlike Google's API, drag and drop for Yahoo! markers doesn't seem to be part of the API, or at least it isn't apparent. Instead, I modified the functionality to add a click event for the map itself, and then moved the marker to the position.

One possibility for managing drag and drop of the marker is providing the third parameter, a DOM identifier, and then using custom drag and drop code. Seems overly complicated, though, when using an alternative event works.


To get this to work, a marker is created explicitly and then added to the map using the addOverlay method. When the map is clicked, the marker's position is reset, and what Yahoo! terms a "smart" window is opened, with the longitude and latitude of the new position. Example 14-5 has the code for this application.

Example 14-5. Moving the marker about based on a map click event


Code View:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yahoo! Maps JavaScript API Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<style type="text/css">
    #map {
         border: 4px solid #000;
         margin: 40px auto;
         width: 600px; height: 400px;
         }
</style>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid="></script>
<script type="text/javascript">
//<![CDATA[

window.onload=function() {
   // Create a Map that will be placed in the "map" div.
   var map = new YMap(document.getElementById('map'));

   // Add the ability to change between Sat, Hybrid, and Regular Maps
   map.addTypeControl();

   // Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
   map.addZoomLong();

   // Add the Pan control to have North, South, East and West directional control
   map.addPanControl();

   // create geopoint
   var point = new YGeoPoint(38.6247732, -90.183444);

   // Specifying the Map starting location and zoom level
   map.drawZoomAndCenter(point, 3);

   // create smart marker
   var theMarker = new YMarker(point);

   // set marker
   map.addOverlay(theMarker);

   // add event listeners
   YEvent.Capture(map, EventsList.MouseClick,  function(evnt,pnt) {
      theMarker.closeSmartWindow();
      theMarker.openSmartWindow("Lat: " + pnt.Lat + " Lon: " + pnt.Lon);
      theMarker.setYGeoPoint(pnt);
   });

}
//]]>

</script>

</head>
<body>
<div id="map"></div>
</body>
</html>


The smart window has to be closed each time an event occurs, or the same window (and contents) is used each time. The application isn't quite as slick as Google's, but I've never been fond of dragging and dropping anyway. Did I also happen to mention that this application works in subdirectories, as well as the main directory?

Figure 14-7 shows the results of the click/location application, after the marker has been moved.

One last look at the Yahoo! API functions, and then we'll get into some examples.

Figure 14-7. Application after clicking and relocating the marker


14.2.3. Routing with Yahoo!

A route in Yahoo! Maps is created from a sequence of geo location points, used to create a polyline, which is then overlayed on the map. This is probably familiar because the process is exactly the one we followed when creating the Google map. I actually copied the Google Maps code and then did a global change, replacing the Google object names with Yahoo! ones, as shown in Example 14-6. Piece of cake.

Example 14-6. Route marked out on Yahoo! Maps


Code View:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Yahoo! Maps JavaScript API Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<style type="text/css">
    #map {
         border: 4px solid #000;
         margin: 40px auto;
         width: 600px; height: 400px;
         }
</style>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid="></script>
<script type="text/javascript">
//<![CDATA[

window.onload=function() {

   // Create a Map that will be placed in the "map" div.
   var map = new YMap(document.getElementById('map'));

   // Add the ability to change between Sat, Hybrid, and Regular Maps
   map.addTypeControl();

   // Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
   map.addZoomLong();

   // Add the Pan control to have North, South, East and West directional control
   map.addPanControl();

   // create geopoint
   var point = new YGeoPoint(38.6247732, -90.183444);

   // Specifying the Map starting location and zoom level
   map.drawZoomAndCenter(point, 3);

   // add route
  var polyline = new YPolyline([
         new YGeoPoint(38.6242, -90.1838),
         new YGeoPoint(38.6252, -90.1886),
         new YGeoPoint(38.6298, -90.1870),
         new YGeoPoint(38.6281, -90.1717),
         new YGeoPoint(38.6229, -90.1738)
        ], "#ff0000", 5, 1.0);

   // attach to map
   map.addOverlay(polyline);

}
//]]>

</script>

</head>
<body>
<div id="map"></div>
</body>
</html>


The only difference, demonstrated in Figure 14-8, is that I used a red route with Yahoo! maps, as the coloring shows up better with the predominantly blue/gray background of the map.

Figure 14-8. Route mapped out with Yahoo! Maps


There's more to Yahoo! maps, as well as Google maps, but we have enough to implement a couple of examples and see the maps in action.








Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)