<html>
<head>
<title>Step 12: geometry layer</title>
<script src="../OpenLayers.js"></script>
<script src="../OpenStreetMap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
.olControlAttribution {
bottom: 0px;
right: 220px;
background-color:white;
padding: 4px;
opacity: 0.60;
}
.olControlScaleLine {
bottom: 0px;
left: 0px;
background-color:white;
padding: 4px;
opacity: 0.60;
}
.olControlPermalink {
top: 0px;
right: 0px;
height: 1.2em;
background-color:white;
padding: 4px;
opacity: 0.60;
}
</style>
<script>
function init() {
lat = 52.025;
lon = 8.515;
zoom = 15;
projLonLat = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
projMercator = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator
extentMax = 20037508.34;
overviewMap = new OpenLayers.Control.OverviewMap();
scale = new OpenLayers.Control.ScaleLine();
scale.geodesic = true; // get the scale projection right, at least on small zoom levels
map = new OpenLayers.Map("demoMap",
{ theme: null,
controls: [ new OpenLayers.Control.Navigation(), // direct panning via mouse drag
new OpenLayers.Control.LayerSwitcher(), // select map and features to display
new OpenLayers.Control.Attribution(), // attribution text
new OpenLayers.Control.PanZoomBar(), // larger navigation control
new OpenLayers.Control.Permalink(), // bookmarkable map links
scale, // scale ruler
overviewMap // overview map
],
maxExtent: new OpenLayers.Bounds(-extentMax, -extentMax, extentMax, extentMax)
}
);
map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
map.addLayer(new OpenLayers.Layer.OSM.Osmarender("Osmarender"));
map.addLayer(new OpenLayers.Layer.Google("Google (Map)",
{ 'type': google.maps.MapTypeId.ROADMAP, 'sphericalMercator': true } ));
map.addLayer(new OpenLayers.Layer.Google("Google (Hybrid)",
{ 'type': google.maps.MapTypeId.HYBRID, 'sphericalMercator': true } ));
map.addLayer(new OpenLayers.Layer.Google("Google (Satellite)",
{ 'type': google.maps.MapTypeId.SATELLITE, 'sphericalMercator': true } ));
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(projLonLat,projMercator), zoom);
overviewMap.maximizeControl();
var layerGeometry = new OpenLayers.Layer.Vector("Gebiete",{projection: projMercator});
map.addLayer(layerGeometry);
var json_data = '{"type":"Polygon","coordinates":[[[946997.668901750002988,6804851.635990919545293],[947398.27435326797422,6805510.242152039892972],[947937.327855485025793,6806519.116099460050464],[947876.502885716035962,6806705.792200200259686],[948839.171578197972849,6807214.812279700301588],[948866.945791151025333,6806943.305583120323718],[948825.81323930202052,6806740.500387510284781],[948825.679655913030729,6806649.948161319829524],[948920.913480286952108,6806218.210386379621923],[949167.475020444951952,6805973.516733709722757],[949428.474698559031822,6805492.619279350154102],[949490.268147898023017,6805254.51523463986814],[949368.818583442945965,6804879.135642670094967],[949300.679923127987422,6804730.331076799891889],[949117.704076112015173,6804232.10446386039257],[948833.071270102052949,6803457.073904880322516],[948178.668511525029317,6803987.724127359688282],[947673.177835781942122,6804222.643158700317144],[946997.668901750002988,6804851.635990919545293]]]}';
var geojson_format = new OpenLayers.Format.GeoJSON();
var geometry = geojson_format.read(json_data, 'Geometry');
var vector = new OpenLayers.Feature.Vector(geometry);
layerGeometry.addFeatures(vector);
map.zoomToExtent(layerGeometry.getDataExtent());
markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(lon,lat).transform(projLonLat,projMercator));
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
'autoSize': true,
'maxSize': new OpenLayers.Size(300,200)
});
feature.data.popupContentHTML = "<h1>Hello World!</h1><hr/>Lore ipsum ...";
feature.data.overflow = "auto";
marker = feature.createMarker();
markerClick = function (evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
markers.addMarker(marker);
}
</script>
</head>
<body onload="init();">
<div id="demoMap"></div>
</body>
</html>