Last active
August 29, 2015 14:04
-
-
Save geojackass/0163aeb1e84fe823a9be to your computer and use it in GitHub Desktop.
advent calender foss4g #2014 geo people
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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&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