Working with Yahoo! Maps - Building a primitive hybrid Yahoo! Map
(Page 3 of 4 )
As explained in the section that you just read, the “setMapType()” method that belongs to the “Ymap” class allows you to specify what type of map should be displayed on the browser. Possible values that will be accepted by the method in question are: YAHOO_MAP_REG, YAHOO_MAP_HYB, and finally YAHOO_MAP_SAT.
Obviously, the first value indicates that a regional map should be built, while the other two specify that hybrid and satellite maps should be shown, respectively. As you can see, these parameters are quite easy to grasp and I believe that you shouldn’t have major problems understanding how they work.
All right, now that you have learned how to build a basic regional Yahoo! Map, it’s time to build a different one. So below I set up another hands-on example that shows how to create a hybrid map.
Please take a close look at the following code sample:
<!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>Example on building a YAHOO! Hybrid Map</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=Your-
AP-ID"></script>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#mapcontainer{
height: 400px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Example on building a YAHOO! Hybrid Map</h1>
<div id="mapcontainer"></div>
<script type="text/javascript">
// Create a new map object
var map=new YMap(document.getElementById('mapcontainer'));
// Add type controls to the map
map.addTypeControl();
// Set map type to YAHOO_MAP_HYB
map.setMapType(YAHOO_MAP_HYB);
// Display the map centered on the selected location
map.drawZoomAndCenter("Los Angeles",3);
</script>
</body>
</html>
In the previous example, I played a bit with the respective “setMapType()” that you saw earlier to build a hybrid Yahoo! Map. Of course, the rest of the example’s source code remained practically the same. In addition, as you may have noticed, the map in question is displayed using the city of Los Angeles as the initial geographical location. It certainly can be better visualized by the following screen shot:
Well, if you’re anything like me, then at this stage you should feel more than happy, because you learned how to create a hybrid Yahoo! Map by using some simple structural markup in conjunction with some understandable CSS styles and basic JavaScript code.
What’s next? So far I showed you how to build both regional and hybrid maps, so the only type that remains uncovered is the one built upon satellite images only. In the last section of this article, I’m going to explain how to create these maps with minor hassles.
To see how this brand new Yahoo! Map will be built, click on the link that appears below and keep reading.
Next: Building a basic satellite Yahoo! Map >>
More JavaScript Articles
More By Alejandro Gervasio
