Using HyperCities Maps in Other Applications

Many of the maps that HyperCities uses are available on HyperCities' own tile server. Since they are tiled in the standard Google Maps tile format, they can be used in any map tile service that accepts that format.

The server

The server is http://tiles.ats.ucla.edu. This is a standard HTTP server; to get a list of all the maps, visit http://tiles.ats.ucla.edu/tiles/. Every folder represents a map.

The format

Google Maps tiles can be used in any Google Maps application, as well as OpenLayers and Google Earth. They may also work in other geobrowser applications as well.

Using maps in Google Earth

To use a map in Google Earth, add the map's doc.kml as a network link. Find the map on the tile server, and and copy the URL of the doc.kml file, for example http://tiles.ats.ucla.edu/tiles/1688_Berlin_Map_Final/doc.kml. In Google Earth, go to Add > Network Link and paste the URL of the doc.kml file into the URL box. Add a name to the "Name" field, too. Once you click OK, the map should appear. You may have to double-click on the map in the "My Places" menu to locate it.

OpenLayers Example

In OpenLayers 2.x, you can use the OpenLayers.Layer.TMS layer type. All our maps are in the EPSG:4326 projection. Here's an example:

   // Example using Aegaron
   var layer = new OpenLayers.Layer.TMS(
       "Aegaron",
       "http://tiles.ats.ucla.edu/tiles/1688_Berlin_Map_Final/", {
       isBaseLayer: false,
       type: "png",
       getURL: function($bounds) {
           var res = this.map.getResolution(),
               x = Math.round(($bounds.left - this.maxExtent.left) /
                   (res * this.tileSize.w)),
               y = Math.round((this.maxExtent.top - $bounds.top) /
                   (res * this.tileSize.h)),
               z = this.map.getZoom(),
               path = z + "/" + x + "/" + y + ".png",
               url = this.url
           ;
   
           if (url instanceof Array) {
               url = this.selectUrl(path, url);
           }
           return url + path;
        },
        maxExtent: new OpenLayers.Bounds(
                               -20037508.3427892, 
                               -20037508.3427892, 
                                 20037508.3427892, 
                                 20037508.3427892
        ),
        numZoomLevels: 21,
        maxResolution: 156543.0339,
        units: 'm',
        projection: "EPSG:4326",
        displayProjection: new OpenLayers.Projection("EPSG:4326")
   });