What is the source of the map image in the MapQuest JavaScript API

StackOverflow https://stackoverflow.com/questions/19021351

  •  29-06-2022
  •  | 
  •  

Question

I ran the MapQuest sample code:

 MQA.EventUtil.observe(window, 'load', function() {
 /*Create an object for options*/
 var options={
   elt:document.getElementById('map'),       /*ID of element on the page where you want the map added*/
   zoom:10,                                  /*initial zoom level of the map*/
   latLng:{lat:39.743943, lng:-105.020089},  /*center of map in latitude/longitude */
   mtype:'map',                              /*map type (map)*/
   bestFitMargin:0,                          /*margin offset from the map viewport when applying a bestfit on shapes*/
   zoomOnDoubleClick:true                    /*zoom in when double-clicking on map*/
 };

 /*Construct an instance of MQA.TileMap with the options object*/
 window.map = new MQA.TileMap(options);
 });

and generated a map ok. But looking at the HTML generated, it's not clear what the source of the map data is. I was expecting maybe an iFrame, or an image but I don't see either:

<div id="map" style="width: 800px; height: 300px; position: relative;">
<div style="width: 800px; height: 300px; z-index: 0; overflow: hidden; background: none repeat scroll 0% 0% rgb(255, 255, 255); position: relative; top: 0px; left: 0px; cursor: -moz-grab;">
<div class="mqa-display" style="position: absolute; z-index: 0;">
<div class="mqa-zl mqa-zl100 mqa-zlf" style="position: absolute; z-index: 100; cursor: default;">
<div class="mqa-zl mqa-zl0 mqa-zlgl" style="position: absolute; z-index: 0; left: 400px; top: 150px;">
<div class="mqa-zl mqa-zl10 mqa-zlf" style="position: absolute; z-index: 22;">
<div class="mqa-zl mqa-zl1000 mqa-zlf" style="position: absolute; z-index: 1000;">
<div class="mqa-zl mqa-zl1000 mqa-zlgl" style="position: absolute; z-index: 1000; left: 400px; top: 150px;">
<div class="mqa-zl mqa-zl5 mqa-zlgl" style="position: absolute; z-index: 5; left: 400px; top: 150px;">
</div>
</div>
</div>

How does that HTML represent a detailed map of Colorado?

Thanks

Was it helpful?

Solution

The map that you see generated by the JavaScript API is created by a set of map image tiles that are downloaded and assembled to create the map. Additional tiles are downloaded as the user pans and zooms in/out.

The map tiles are cached and hosted from various servers located around the world.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top