Working with Yahoo! Maps - Building a basic satellite Yahoo! Map
(Page 4 of 4 )
If your deductive skills are in good shape at this moment, then it’s quite possible that you already know how to build a simple satellite Yahoo! Map, since this process is limited only to passing a value of YAHOO_MAP_SAT into the “setMapType()” method as its input argument.
The following example demonstrates how to create a simple satellite map by using nearly the same source code that I showed you in prior sections of this tutorial.
Having explained that, pay attention to the code sample below please:
<!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! Satellite 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! Satellite 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_SAT
map.setMapType(YAHOO_MAP_SAT);
// Display the map centered on the selected location
map.drawZoomAndCenter("Los Angeles",3);
</script>
</body>
</html>
As you can see, building a basic satellite Yahoo! map doesn’t differ too much from creating regional and hybrid ones. In this particular case, I used the handy “setMapType()” method to specify that a satellite map should be displayed on the browser, centered on the city of Los Angeles again.
Logically, this process can be better grasped if you pay attention to the following screen capture, which shows how the map looks:
So far, so good. At this point I demonstrated how to create some basic Yahoo! Maps, including the three types supported by this thorough Ajax framework: regional, hybrid, and satellite.
With this material at your disposal, I guess you shouldn’t have major difficulties including these useful maps into your own web applications. And don’t forget to get the corresponding application ID before you try to use them!
Final thoughts
In this first part of the series, you hopefully learned the basic concepts that surround the creation of different types of Yahoo! Maps. As you saw for yourself, this process is quite straightforward and it only requires working with the JavaScript methods bundled with the respective API.
In the second tutorial, things will get even more interesting, because I’m going to teach you how to add several zoom controls to a simple Yahoo! map, which will expand its basic functionality.
Now that you’ve been warned about the subject of the next article of the series, I don’t think you want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
