<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
position: absolute;
}
body {
border: 0px;
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
<!--
var map, gml;
function style_osm_feature(feature) {
feature.style = OpenLayers.Util.extend({'fill':'black'}, OpenLayers.Feature.Vector.style['default']);
if (feature.attributes.highway) {
feature.style.strokeColor = "blue";
feature.style.strokeWidth = 5;
}
}
function init(){
map = new OpenLayers.Map('map',
{ maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
numZoomLevels: 19,
maxResolution: 156543.0399,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayer(layerTah);
gml = new OpenLayers.Layer.GML("18323", "www.openstreetmap.org/api/0.5/relation/18323/full", {format: OpenLayers.Format.OSM});
map.addLayer(gml);
gml.preFeatureInsert = style_osm_feature;
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-114.0882927,49.1267311).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 15);
}
// -->
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>