Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
advent calender foss4g #2014 geo people
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Shoichi Otomo">
<head>
<title>qgis_book</title>
<style type="text/css">
#canvas {
width: 80%;
height: 80%;
margin: 0;
}
#canvas .olControlAttribution {
font-size: 13px;
bottom: 5px;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript">
function init() {
var map;
//optionsの指定はマウスイベントの取得時に必要になる
var options = {
controls:[
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();
map.addLayer(mapink);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevel: 10}
)
map.addLayer(gsat);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 10, visibility: false}
)
map.addLayer(ghyb);
//地図の中心に技術評論社を設定
var lonLat = new OpenLayers.LonLat(139.735646, 35.693697)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
);
map.setCenter(lonLat, 10);
//技術評論社にmarkerを描画する
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var marker = new OpenLayers.Marker(
new OpenLayers.LonLat(139.735646, 35.693697)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
)
);
markers.addMarker(marker);
map.events.register("mousemove", map, onMouseMove);
map.events.register("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 = lonLat.lat;
document.getElementById("lon").firstChild.nodeValue = lonLat.lon;
}
function onZoomChanged() {
document.getElementById("zoom").firstChild.nodeValue = this.getZoom();
}
</script>
</head>
<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>
</div>
</body>
</html>
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.