update geomap.html
This commit is contained in:
Nils Schneider
parent
f05e6a3a26
commit
54e0461471
202
html/geomap.html
202
html/geomap.html
|
|
@ -1,114 +1,135 @@
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<head>
|
<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">
|
<style type="text/css">
|
||||||
#map {
|
body, html {
|
||||||
width: 100%;
|
margin: 0; padding: 0;
|
||||||
height: 100%;
|
}
|
||||||
}
|
#map {
|
||||||
.olPopup p { margin:0px; }
|
float: left;
|
||||||
</style>
|
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>
|
<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/OpenLayers.js"></script>
|
||||||
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/cloudmade.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/OpenStreetMap.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var map;
|
var map;
|
||||||
|
|
||||||
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
|
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
|
||||||
|
|
||||||
function init()
|
function init()
|
||||||
{
|
{
|
||||||
map = new OpenLayers.Map ("map", {
|
map = new OpenLayers.Map ("map", {
|
||||||
controls:[
|
controls:[
|
||||||
new OpenLayers.Control.Navigation(),
|
new OpenLayers.Control.Navigation(),
|
||||||
new OpenLayers.Control.PanZoomBar(),
|
new OpenLayers.Control.PanZoomBar(),
|
||||||
new OpenLayers.Control.LayerSwitcher(),
|
new OpenLayers.Control.LayerSwitcher(),
|
||||||
new OpenLayers.Control.Attribution(),
|
new OpenLayers.Control.Attribution(),
|
||||||
new OpenLayers.Control.Permalink(),
|
new OpenLayers.Control.Permalink(),
|
||||||
new OpenLayers.Control.ScaleLine(),
|
new OpenLayers.Control.ScaleLine(),
|
||||||
new OpenLayers.Control.OverviewMap(),
|
new OpenLayers.Control.OverviewMap(),
|
||||||
new OpenLayers.Control.MousePosition()],
|
new OpenLayers.Control.MousePosition()],
|
||||||
maxResolution: 156543.0399,
|
maxResolution: 156543.0399,
|
||||||
numZoomLevels: 19,
|
numZoomLevels: 19,
|
||||||
units: 'm',
|
units: 'm',
|
||||||
projection: new OpenLayers.Projection("EPSG:900913"),
|
projection: new OpenLayers.Projection("EPSG:900913"),
|
||||||
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
||||||
} );
|
} );
|
||||||
|
|
||||||
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
|
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {opacity: 0.5});
|
||||||
map.addLayer(layerMapnik);
|
map.addLayer(layerMapnik);
|
||||||
|
|
||||||
var layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
|
var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
|
||||||
map.addLayer(layerTilesAtHome);
|
|
||||||
|
|
||||||
var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
|
var zoom = 11
|
||||||
map.addLayer(layerCycleMap);
|
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.addLayer(vectorLayer);
|
||||||
map.setCenter(center, zoom);
|
|
||||||
|
|
||||||
vectorLayer = new OpenLayers.Layer.GML("KML", 'geomap.kml',
|
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
|
||||||
{
|
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
|
||||||
projection: new OpenLayers.Projection("EPSG:4326"),
|
map.addControl(selectControl);
|
||||||
eventListeners: { 'loadend': kmlLoaded },
|
selectControl.activate();
|
||||||
format: OpenLayers.Format.KML,
|
|
||||||
formatOptions: {
|
|
||||||
style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
|
|
||||||
extractStyles: true,
|
|
||||||
maxDepth: 2,
|
|
||||||
extractAttributes: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer(vectorLayer);
|
var click = new OpenLayers.Control.Click();
|
||||||
|
map.addControl(click);
|
||||||
|
click.activate();
|
||||||
|
}
|
||||||
|
|
||||||
selectControl = new OpenLayers.Control.SelectFeature(map.layers[3],
|
function onPopupClose(evt)
|
||||||
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
|
{
|
||||||
map.addControl(selectControl);
|
selectControl.unselect(selectedFeature);
|
||||||
selectControl.activate();
|
}
|
||||||
|
|
||||||
var click = new OpenLayers.Control.Click();
|
function onFeatureSelect(feature)
|
||||||
map.addControl(click);
|
{
|
||||||
click.activate();
|
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)
|
function onFeatureUnselect(feature)
|
||||||
{
|
{
|
||||||
selectControl.unselect(selectedFeature);
|
map.removePopup(feature.popup);
|
||||||
}
|
feature.popup.destroy();
|
||||||
|
feature.popup = null;
|
||||||
|
}
|
||||||
|
|
||||||
function onFeatureSelect(feature)
|
function kmlLoaded()
|
||||||
{
|
{
|
||||||
selectedFeature = feature;
|
map.zoomToExtent(vectorLayer.getDataExtent());
|
||||||
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 onFeatureUnselect(feature)
|
</script>
|
||||||
{
|
|
||||||
map.removePopup(feature.popup);
|
|
||||||
feature.popup.destroy();
|
|
||||||
feature.popup = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function kmlLoaded()
|
|
||||||
{
|
|
||||||
map.zoomToExtent(vectorLayer.getDataExtent());
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="init()">
|
<body onload="init()">
|
||||||
|
|
@ -120,3 +141,4 @@
|
||||||
<h2>Knotenkarte</h2>
|
<h2>Knotenkarte</h2>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue