Skip to content

Instantly share code, notes, and snippets.

@fredj

fredj/index.html

Created March 21, 2012 12:39
Show Gist options
  • Save fredj/2146642 to your computer and use it in GitHub Desktop.
Save fredj/2146642 to your computer and use it in GitHub Desktop.
Download ZIP
raster tile color
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Example</title>
<link rel="stylesheet" href="http://www.openlayers.org/dev/theme/default/style.css" type="text/css">
<style>
.into-water {
cursor: url(http://dev.camptocamp.com/files/fredj/ferry-24.png), default;
}
</style>
<script src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var map;
// API key for http://openlayers.org. Please get your own at
// http://bingmapsportal.com/ and use that instead.
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
function init() {
map = new OpenLayers.Map('map', {
layers: [new OpenLayers.Layer.OSM('Simple OSM Map'),
new OpenLayers.Layer.Bing({key: apiKey, type: "Road"}),
new OpenLayers.Layer.Bing({key: apiKey, type: "AerialWithLabels"}),
new OpenLayers.Layer.Bing({key: apiKey, type: "Aerial"})],
zoom: 3,
center: [-1081125, 6212801]
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
var color = document.getElementById('color');
map.events.register('mousemove', this, function(evt) {
var data = map.baseLayer.getTileData(map.getLonLatFromPixel(evt.xy));
if (data) {
var ctx = data.tile.getCanvasContext();
if (ctx) {
var rgba = ctx.getImageData(data.i, data.j, 1, 1).data;
var hex = rgba[0].toString(16) + rgba[1].toString(16) + rgba[2].toString(16);
if (hex === 'b5d0d0') {
OpenLayers.Element.addClass(map.viewPortDiv, 'into-water');
} else {
OpenLayers.Element.removeClass(map.viewPortDiv, 'into-water');
}
color.style.backgroundColor = color.innerHTML = '#' + hex;
}
}
});
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:100%; height: 400px;"></div>
<div id="docs">
<p>Mouse over the map, the color under the mouse cursor will be displayed here: <span id="color" style="padding: 3px"></span></p>
<p>Tested on Chrome 17 and Firefox 11.0</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment