1

Got this code from a teacher and I don't know what I am doing wrong! I have searched around but I can't find the error. Visual studio shows no error.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers map</title>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<style type ="text/css">
    /*Stilsättning*/
    mapContainer
    {
        position:absolute;          /*Elementets position i förhållande till andra element*/
        padding:10px;               /*Elementets avstånd från andra element (10px åt alla håll)*/
        width:600px;                /*Elementets bredd */
        height:500px;               /*Elementets höjd*/
        border:1px solid black;     /*Ram runt elementet */
    }
</style>
<script type="text/javascript">
    //Variabel som kommer hantera OpenLayers.Map objektet.
    var map;

    //Funktion som anropas från <body> taggen, kör koden som finns i funktionen när sidan laddas (onload).
    function initMap() {
        //Initiera OpenLayers.Map objektet och tilldela till variabeln map.
        //"mapContainer" är en referens till den div (container) där du vill ha din karta.
        map = new OpenLayers.Map('mapContainer');

        //Variabeln osm tilldelas ett objekt med en OpenLayers-Lagertyp OSM(openstreetmap).
        //Ex på olika lagertyper:  OpenLayers.Layer.WMS  (vilken WMS-tjänst som helst kan kopplas in)
        //                         OpenLayers.Layer.Vector  (ett vektor lager där du kan lägga in tex punktdata)
        //                         OpenLayers.Layer.Google  (om du vill använda Googles bakgrundskartor)
        var osm = new OpenLayers.Layer.OSM();

        //Variabeln osm som innehåller Openstreetmap objektet läggs till kartobjektet genom map.addLayer()
        map.addLayer(osm);

        //När kartan initieras måste OpenLayers veta var du vill börja någonstanns, i det här fallet zoomas kartan till 
        //full utzoomning i förhållande till Openstreetmaps utbredning (extent).
        //Ett alternativ är att använda map.setCenter() då du anger exakta koordinater och zoomnivå men mer om det senare.  
        map.zoomToMaxExtent();
    }
</script>
</head>
<body onload="initMap();">
      <div id="mapContainer"></div>
</body>
</html>
3
  • What kind of problem do you have?
    – drnextgis
    Dec 17, 2012 at 9:22
  • Visual Basic or did you mean Visual Studio?
    – R.K.
    Dec 17, 2012 at 12:15
  • I can´t make the code work :( When I start the debugger I can´t se the Openstreetmap as I should. Yes, in visual studio.
    – Mimmi
    Dec 17, 2012 at 13:29

3 Answers 3

1

Your page is missing a map container tag and a call to the initMap() function. Basically add this to the end of your code:

  </head>
  <body onload="initMap()">
    <div id="mapContainer"></div>
  </body>
</html>
2
  • Sorry, i missed to copy my last code...!
    – Mimmi
    Dec 17, 2012 at 13:22
  • This is the code after </script> : </head> <body onload="initMap()"> <div id="mapContainer"></div> </body> </html>
    – Mimmi
    Dec 17, 2012 at 13:22
1

You missed the CSS-Selector for the ID(#) in the style definition of your document. Just change "mapContainer" to "#mapContainer":

<style type ="text/css">
/*Stilsättning*/
mapContainer
{
    position:absolute;
    ...

to

<style type ="text/css">
/*Stilsättning*/
#mapContainer
{
    position:absolute;
    ...

and it works just fine!

0

I don't know what your error is, and what Visual basic has to do with it.

You have most probably left out

<body onload="initmap();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="mapContainer"></div>
</body>
</html>

to get the map loadad. The extent, zoomlevel and name of the layer is also missing, as well as some controls to zoom and choose layers.

You can look into my adaption here: http://bahnradwandern.bplaced.net/gpxviewer.zip

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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