0

I am attempting to setup a website on GoDaddy and am having some problems with the OpenLayers API. The API hangs and I end up with a message to continue/debug/stop the script. I've tried both using OpenLayers using a CDN link and copying it to my site, but same results.

To make this question simpler, I went ahead and created a page using the osm.html page which is as simple as one can get. The URL is www.enjoytheparks.com/test.html.

Even this simple page using OpenLayers exhibits the same issue. The specific line is OpenLayers.js:59. I should probably use the non-minified version, but I'm hoping someone has seen this before and it is an easy fix, rather than having to debug through the OpenLayers.js file.

  • I'm not getting any errors, but I'm not getting a map, either. does it work locally? ie. save everything somehwere on your own computer, navigate to the local test.html and open in your browser – toms Mar 10 '15 at 0:01
  • Sorry, I should have stated that from the beginning. Yes, it works locally and it also works on the school website where I initially created it: personal.psu.edu/rci110/Lesson7/natparks.html – ringraham Mar 10 '15 at 0:08
1

It appears you did not put the two CSS files (which defines the style) into your code, and they are required when browser tries to render the map.

Everything works fine after I added these two CSS files into your code (line 6 and 7).

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>OpenLayers Basic OSM Example</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://personal.psu.edu/rci110/Lesson7/styles/style.css" type="text/css">

    <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
        function init(){
            map = new OpenLayers.Map("map");
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            map.addLayer(layer);          
            map.setCenter(
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 12
            );    
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Basic OSM Example</h1>

    <div id="tags">
        openstreetmap basic light
    </div>

    <div id="shortdesc">Show a Simple OSM Map</div>

    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>This example shows a very simple OSM layout with minimal controls.</p> 
    </div>
  </body>
</html>

I also tested your code on JSFiddle and it works ok. Here is the link

  • Great catch. The page is indeed working. This was only a test and my "real" page still doesn't load, but hopefully this will point me in the right direction. Thanks! – ringraham Mar 10 '15 at 23:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.