Using HyperCities Maps in Other Applications
Davidshepard (Talk | contribs) |
Davidshepard (Talk | contribs) (Move order of geobrowsers and promote headings.) |
||
| (One intermediate revision by one user not shown) | |||
| Line 1: | Line 1: | ||
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. | 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 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. | 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. | ||
| − | ===OpenLayers Example | + | ==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: | 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: | ||
| Line 48: | Line 52: | ||
</code> | </code> | ||
| − | |||
| − | |||
| − | |||
Latest revision as of 21:17, 5 June 2013
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.
Contents |
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")
});
