update geomap.html

This commit is contained in:
Nils Schneider 2012-05-12 16:49:12 +02:00
parent f05e6a3a26
commit 54e0461471

View file

@ -1,114 +1,135 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 100%;
height: 100%;
}
.olPopup p { margin:0px; }
</style>
<style type="text/css">
body, html {
margin: 0; padding: 0;
}
#map {
float: left;
width: 80%;
box-sizing:border-box;
}
#infobox {
box-sizing:border-box;
width: 20%;
vertical-align: top;
float: right;
padding: 1em;
}
body {
font:80%/100% 'helvetica neue',sans-serif,'arial';
color: #666;
}
h2 {
margin: 0 0 1em;
color: #f60;
}
li {
margin-bottom: 0.5em;
}
ul {
padding-left: 2em;
}
.olPopup p { margin:0px; }
</style>
<title>Freifunk Lübeck - Knotenkarte</title>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/cloudmade.js"></script>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/cloudmade.js"></script>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
<script type="text/javascript">
var map;
<script type="text/javascript">
var map;
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
function init()
{
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.MousePosition()],
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
function init()
{
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.MousePosition()],
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {opacity: 0.5});
map.addLayer(layerMapnik);
var layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
var zoom = 11
map.setCenter(center, zoom);
var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
vectorLayer = new OpenLayers.Layer.GML("KML", 'geomap.kml',
{
projection: new OpenLayers.Projection("EPSG:4326"),
eventListeners: { 'loadend': kmlLoaded },
format: OpenLayers.Format.KML,
formatOptions: {
style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
extractStyles: true,
maxDepth: 2,
extractAttributes: true
}
});
var zoom = 11
map.setCenter(center, zoom);
map.addLayer(vectorLayer);
vectorLayer = new OpenLayers.Layer.GML("KML", 'geomap.kml',
{
projection: new OpenLayers.Projection("EPSG:4326"),
eventListeners: { 'loadend': kmlLoaded },
format: OpenLayers.Format.KML,
formatOptions: {
style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
extractStyles: true,
maxDepth: 2,
extractAttributes: true
}
});
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
map.addLayer(vectorLayer);
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}
selectControl = new OpenLayers.Control.SelectFeature(map.layers[3],
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
function onPopupClose(evt)
{
selectControl.unselect(selectedFeature);
}
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}
function onFeatureSelect(feature)
{
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,150),
"<div style='font-size:.8em'><b>Name:</b>"+feature.attributes.name+"<br><b>Description:</b>"+feature.attributes.description+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onPopupClose(evt)
{
selectControl.unselect(selectedFeature);
}
function onFeatureUnselect(feature)
{
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function onFeatureSelect(feature)
{
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,150),
"<div style='font-size:.8em'><b>Name:</b>"+feature.attributes.name+"<br><b>Description:</b>"+feature.attributes.description+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function kmlLoaded()
{
map.zoomToExtent(vectorLayer.getDataExtent());
}
function onFeatureUnselect(feature)
{
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function kmlLoaded()
{
map.zoomToExtent(vectorLayer.getDataExtent());
}
</script>
</script>
</head>
<body onload="init()">
@ -120,3 +141,4 @@
<h2>Knotenkarte</h2>
<div id="map"></div>
</body>
</html>