optrex
Well-known member
I have an html page as below that I would like to put as a page node
I think it should be like this in my page node
But I cant get it to display. Any suggestions please?
HTML:
<html>
<head>
<title>Open Weather Map</title>
<style type="text/css">
#map {
width: 100%;
height: 99%;
border: 1px solid black;
}
</style>
</head>
<body onload="init()">
<div id="basicMap"></div>
</body>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
<script type="text/javascript">
var map;
function init() {
//Center ( mercator coordinates )
var lat = 7486473;
var lon = 4193332;
// if you use WGS 1984 coordinate you should convert to mercator
// lonlat.transform(
// new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
// new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// );
var lonlat = new OpenLayers.LonLat(lon, lat);
map = new OpenLayers.Map("basicMap");
// Create overlays
// map layer OSM
var mapnik = new OpenLayers.Layer.OSM();
// Create station layer
var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
// Create weather layer
var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
//connect layers to map
map.addLayers([mapnik, stations, city]);
// Add Layer switcher
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter( lonlat, 10 );
}
</script>
</html>I think it should be like this in my page node
Code:
<div class="messageText ugc baseHtml">
<style type="text/css">
#map {
width: 100%;
height: 99%;
border: 1px solid black;
}
</style>
<div id="basicMap"></div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
<script type="text/javascript">
var map;
function init() {
//Center ( mercator coordinates )
var lat = 7486473;
var lon = 4193332;
// if you use WGS 1984 coordinate you should convert to mercator
// lonlat.transform(
// new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
// new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// );
var lonlat = new OpenLayers.LonLat(lon, lat);
map = new OpenLayers.Map("basicMap");
// Create overlays
// map layer OSM
var mapnik = new OpenLayers.Layer.OSM();
// Create station layer
var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
// Create weather layer
var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
//connect layers to map
map.addLayers([mapnik, stations, city]);
// Add Layer switcher
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter( lonlat, 10 );
}
</script>
</div>But I cant get it to display. Any suggestions please?
