Skip to content

Instantly share code, notes, and snippets.

@ldodds

ldodds/gist:6a425f610d89ea4afd23

Created November 1, 2014 10:53
Show Gist options
  • Save ldodds/6a425f610d89ea4afd23 to your computer and use it in GitHub Desktop.
Save ldodds/6a425f610d89ea4afd23 to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers example
Raw
gistfile1.txt
<!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>Bath 1818</title>
<meta http-equiv='imagetoolbar' content='no'/>
<style type="text/css"> v\:* {behavior:url(#default#VML);}
html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
body { margin: 10px; background: #fff; }
h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
#header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
#subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
#map { height: 95%; border: 1px solid #888; }
</style>
<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=INSERT_YOUR_KEY_HERE' type='text/javascript'></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&amp;appid=INSERT_YOUR_YAHOO_APP_ID_HERE"></script>
<script src="http://www.openlayers.org/api/2.7/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var mapBounds = new OpenLayers.Bounds( -2.37831556504, 51.3725950892, -2.33961641105, 51.3975678373);
var mapMinZoom = 13;
var mapMaxZoom = 16;
// avoid pink tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
var options = {
controls: [],
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
};
map = new OpenLayers.Map('map', options);
// create Virtual Earth layers
OpenLayers.Layer.VirtualEarth.prototype.MAX_ZOOM_LEVEL=19;
OpenLayers.Layer.VirtualEarth.prototype.RESOLUTIONS=OpenLayers.Layer.Google.prototype.RESOLUTIONS
var veroad = new OpenLayers.Layer.VirtualEarth("Virtual Earth Roads",
{'type': VEMapStyle.Road, 'sphericalMercator': true, numZoomLevels: 20});
var veaer = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial",
{'type': VEMapStyle.Aerial, 'sphericalMercator': true, numZoomLevels: 20 });
var vehyb = new OpenLayers.Layer.VirtualEarth("Virtual Earth Hybrid",
{'type': VEMapStyle.Hybrid, 'sphericalMercator': true});
// create OSM/OAM layer
var osm = new OpenLayers.Layer.TMS( "OpenStreetMap",
"http://tile.openstreetmap.org/",
{ type: 'png', getURL: osm_getTileURL, displayOutsideMaxExtent: true,
attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'} );
var oam = new OpenLayers.Layer.TMS( "OpenAerialMap",
"http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/",
{ type: 'png', getURL: osm_getTileURL } );
// create TMS Overlay layer
var tmsoverlay = new OpenLayers.Layer.TMS( "TMS Overlay", "",
{ // url: '', serviceVersion: '.', layername: '.',
type: 'png', getURL: overlay_getTileURL, alpha: true,
isBaseLayer: false
});
if (OpenLayers.Util.alphaHack() == false) { tmsoverlay.setOpacity(0.7); }
map.addLayers([osm, oam,
tmsoverlay]);
var switcherControl = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcherControl);
switcherControl.maximizeControl();
map.zoomToExtent( mapBounds.transform(map.displayProjection, map.projection ) );
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
}
function osm_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return "http://www.maptiler.org/img/none.png";
} else {
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
function overlay_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
var z = this.map.getZoom();
if (this.map.baseLayer.name == 'Virtual Earth Roads' || this.map.baseLayer.name == 'Virtual Earth Aerial' || this.map.baseLayer.name == 'Virtual Earth Hybrid') {
z = z + 1;
}
if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) {
//console.log( this.url + z + "/" + x + "/" + y + "." + this.type);
return this.url + z + "/" + x + "/" + y + "." + this.type;
} else {
return "http://www.maptiler.org/img/none.png";
}
}
function getWindowHeight() {
if (self.innerHeight) return self.innerHeight;
if (document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;
return 0;
}
function getWindowWidth() {
if (self.innerWidth) return self.innerWidth;
if (document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth;
if (document.body) return document.body.clientWidth;
return 0;
}
function resize() {
var map = document.getElementById("map");
var header = document.getElementById("header");
var subheader = document.getElementById("subheader");
map.style.height = (getWindowHeight()-80) + "px";
map.style.width = (getWindowWidth()-20) + "px";
header.style.width = (getWindowWidth()-20) + "px";
subheader.style.width = (getWindowWidth()-20) + "px";
if (map.updateSize) { map.updateSize(); };
}
onresize=function(){ resize(); };
</script>
</head>
<body onload="init()">
<div id="header"><h1>Bath 1818</h1></div>
<div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a>/<a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
<!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU -->
</div>
<div id="map"></div>
<script type="text/javascript" >resize()</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment