• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Javascript in a page node

optrex

Well-known member
#1
I have an html page as below that I would like to put as a page node

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?
 

Brogan

XenForo moderator
Staff member
#2
Typically I put the CSS first, then the javascript and then the content last.

You have the javascript and css enclosed in the content div - move it outside it.
For example:
Code:
<style type="text/css"> #map { width: 100%; height: 99%; border: 1px solid black; } </style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
Code
</script>

<div class="messageText ugc baseHtml">
Content
</div>