render geomap from nodes.json

This commit is contained in:
Nils Schneider 2012-06-12 01:58:29 +02:00
commit 913608ae4f
2 changed files with 130 additions and 88 deletions

View file

@ -19,94 +19,8 @@
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
<script type="text/javascript">
var map;
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")
} );
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {opacity: 0.5});
map.addLayer(layerMapnik);
var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var zoom = 11
map.setCenter(center, zoom);
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
}
});
map.addLayer(vectorLayer);
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}
function onPopupClose(evt)
{
selectControl.unselect(selectedFeature);
}
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 onFeatureUnselect(feature)
{
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function kmlLoaded()
{
map.zoomToExtent(vectorLayer.getDataExtent());
}
</script>
<script type="text/javascript" src="d3.v2.js"></script>
<script type="text/javascript" src="geomap.js"></script>
</head>
<body onload="init()">