<html xmlns="http://www.w3.org/1999/xhtml"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head> |
<!-- |
<script src="openlayers/OpenLayers.js"></script> |
/* |
<SCRIPT TYPE="text/javascript" SRC="OpenStreetMap.js"></SCRIPT> |
* Copyright 2010,2011 Alexander Sadleir |
<script type="text/javascript"> |
|
var map,select; |
Licensed under the Apache License, Version 2.0 (the "License"); |
|
you may not use this file except in compliance with the License. |
|
You may obtain a copy of the License at |
|
|
|
http://www.apache.org/licenses/LICENSE-2.0 |
|
|
|
Unless required by applicable law or agreed to in writing, software |
|
distributed under the License is distributed on an "AS IS" BASIS, |
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
See the License for the specific language governing permissions and |
|
limitations under the License. |
|
*/ |
|
--> |
|
<head> |
|
<script src="openlayers/OpenLayers.js"></script> |
|
<SCRIPT TYPE="text/javascript" SRC="OpenStreetMap.js"></SCRIPT> |
|
<script type="text/javascript"> |
|
var map,select; |
|
|
|
|
function init() |
function init() |
{ |
{ |
var extent = new OpenLayers.Bounds(148.98, -35.48, 149.25, -35.15); |
var extent = new OpenLayers.Bounds(148.98, -35.48, 149.25, -35.15); |
|
|
// set up the map options |
// set up the map options |
var options = |
var options = |
{ |
{ |
maxExtent: extent, |
maxExtent: extent, |
numZoomLevels: 20, |
numZoomLevels: 20, |
}; |
}; |
|
|
// create the ol map object |
// create the ol map object |
map = new OpenLayers.Map('map', options); |
map = new OpenLayers.Map('map', options); |
|
|
var osmtiles = new OpenLayers.Layer.OSM("OSM"); |
var osmtiles = new OpenLayers.Layer.OSM("OSM"); |
|
|
var nearmap = new OpenLayers.Layer.OSM.NearMap("NearMap"); |
var nearmap = new OpenLayers.Layer.OSM.NearMap("NearMap"); |
|
|
var stopbrowser = new OpenLayers.Layer.Vector("POI", { |
var stopbrowser = new OpenLayers.Layer.Vector("POI", { |
projection: new OpenLayers.Projection("EPSG:4326"), |
projection: new OpenLayers.Projection("EPSG:4326"), |
strategies: [ |
strategies: [ |
new OpenLayers.Strategy.BBOX(), |
new OpenLayers.Strategy.BBOX(), |
], |
], |
protocol: new OpenLayers.Protocol.HTTP({ |
protocol: new OpenLayers.Protocol.HTTP({ |
url: "stopBrowser.kml.php", //Note that it is probably worth adding a Math.random() on the end of the URL to stop caching. |
url: "stopBrowser.kml.php", //Note that it is probably worth adding a Math.random() on the end of the URL to stop caching. |
format: new OpenLayers.Format.KML({ |
format: new OpenLayers.Format.KML({ |
extractStyles: true, |
extractStyles: true, |
extractAttributes: true |
extractAttributes: true |
}), |
}), |
}) |
}) |
}); |
}); |
|
|
map.addLayers([osmtiles,stopbrowser,nearmap]); |
map.addLayers([osmtiles,stopbrowser,nearmap]); |
|
|
var lonLat = new OpenLayers.LonLat(149.11, -35.28).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); |
var lonLat = new OpenLayers.LonLat(149.11, -35.28).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); |
map.setCenter(lonLat, 15); |
map.setCenter(lonLat, 15); |
map.addControl( new OpenLayers.Control.LayerSwitcher({'ascending':false})); |
map.addControl( new OpenLayers.Control.LayerSwitcher({'ascending':false})); |
map.addControl(new OpenLayers.Control.MousePosition( |
map.addControl(new OpenLayers.Control.MousePosition( |
{ |
{ |
displayProjection: new OpenLayers.Projection("EPSG:4326"), |
displayProjection: new OpenLayers.Projection("EPSG:4326"), |
suffix: "__________________________________" |
suffix: "__________________________________" |
})); |
})); |
map.addControl(new OpenLayers.Control.MousePosition( |
map.addControl(new OpenLayers.Control.MousePosition( |
{ |
{ |
displayProjection: new OpenLayers.Projection("EPSG:900913") |
displayProjection: new OpenLayers.Projection("EPSG:900913") |
})); |
})); |
|
|
select = new OpenLayers.Control.SelectFeature(stopbrowser); |
select = new OpenLayers.Control.SelectFeature(stopbrowser); |
|
|
stopbrowser.events.on({ |
stopbrowser.events.on({ |
"featureselected": onFeatureSelect, |
"featureselected": onFeatureSelect, |
"featureunselected": onFeatureUnselect |
"featureunselected": onFeatureUnselect |
}); |
}); |
|
|
map.addControl(select); |
map.addControl(select); |
select.activate(); |
select.activate(); |
|
|
} |
|
function onPopupClose(evt) { |
|
select.unselectAll(); |
|
} |
|
function onFeatureSelect(event) { |
|
var feature = event.feature; |
|
// Since KML is user-generated, do naive protection against |
|
// Javascript. |
|
var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description; |
|
if (content.search("<script") != -1) { |
|
content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "<"); |
|
} |
} |
popup = new OpenLayers.Popup.FramedCloud("chicken", |
function onPopupClose(evt) { |
feature.geometry.getBounds().getCenterLonLat(), |
select.unselectAll(); |
new OpenLayers.Size(100,100), |
|
content, |
|
null, true, onPopupClose); |
|
feature.popup = popup; |
|
map.addPopup(popup); |
|
} |
|
function onFeatureUnselect(event) { |
|
var feature = event.feature; |
|
if(feature.popup) { |
|
map.removePopup(feature.popup); |
|
feature.popup.destroy(); |
|
delete feature.popup; |
|
} |
} |
} |
function onFeatureSelect(event) { |
</script> |
var feature = event.feature; |
|
// Since KML is user-generated, do naive protection against |
|
// Javascript. |
|
var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description; |
|
if (content.search("<script") != -1) { |
|
content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "<"); |
|
} |
|
popup = new OpenLayers.Popup.FramedCloud("chicken", |
|
feature.geometry.getBounds().getCenterLonLat(), |
|
new OpenLayers.Size(100,100), |
|
content, |
|
null, true, onPopupClose); |
|
feature.popup = popup; |
|
map.addPopup(popup); |
|
} |
|
function onFeatureUnselect(event) { |
|
var feature = event.feature; |
|
if(feature.popup) { |
|
map.removePopup(feature.popup); |
|
feature.popup.destroy(); |
|
delete feature.popup; |
|
} |
|
} |
|
</script> |
|
|
</head> |
</head> |
<body onload="init()"> |
<body onload="init()"> |
<div id="map" width="100%" height="100%" class="smallmap"></div> |
<div id="map" width="100%" height="100%" class="smallmap"></div> |
</body> |
</body> |
</html> |
</html> |
|
|
|
|