Skip to content

Instantly share code, notes, and snippets.

@geojackass geojackass/index.html
Last active Aug 29, 2015

What would you like to do?
advent calender foss4g #2014 geo people
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Shoichi Otomo">
<style type="text/css">
#canvas {
width: 80%;
height: 80%;
margin: 0;
#canvas .olControlAttribution {
font-size: 13px;
bottom: 5px;
<script src=""></script>
<script src=";sensor=false"></script>
<script type="text/javascript">
function init() {
var map;
var options = {
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution()
map = new OpenLayers.Map("canvas", options);
//map = new OpenLayers.Map("canvas", {allOverlays: true});
map.addControl(new OpenLayers.Control.LayerSwitcher());
var mapink = new OpenLayers.Layer.OSM();
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevel: 10}
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 10, visibility: false}
var lonLat = new OpenLayers.LonLat(139.735646, 35.693697)
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
map.setCenter(lonLat, 10);
var markers = new OpenLayers.Layer.Markers("Markers");
var marker = new OpenLayers.Marker(
new OpenLayers.LonLat(139.735646, 35.693697)
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
markers.addMarker(marker);"mousemove", map, onMouseMove);"zoomend", map, onZoomChanged);
function onMouseMove() {
var lonLat = this.getCenter().transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
document.getElementById("lat").firstChild.nodeValue =;
document.getElementById("lon").firstChild.nodeValue = lonLat.lon;
function onZoomChanged() {
document.getElementById("zoom").firstChild.nodeValue = this.getZoom();
<body onload="init();">
<div id="canvas">mapArea</div><br />
<div style="border:none; width:500px; padding:5px;">
Latitude:<div id="lat" style="display:inline">waiting</div><br />
Longitude:<div id="lon" style="display:inline">waiting</div><br />
ZoomLevel:<div id="zoom" style="display:inline">waiting</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.