0

I'm following an OpenLayers tutorial and already there is something wrong after trying to represent a simple map.

I will show you the code I copied from the tutorial and when opening my HTML file with Firefox, it should show me a OSM map. However it doesn't do anything. I have tried to write "Test" into my html, and that worked, thus I guess the problem lies somewhere else.

That's the HTML code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./lib/OpenLayers/ol.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="js-map" class="map"> </div>
    <script src='./lib/OpenLayers/ol.js'> </script>
    <script src='./Main.js'> </script>
</body>
</html>

That's the js code: 

    window.onload = init;

    function init(){
        const map = new ol.Map({
        view: new ol.View({
            center: [8.25, 49.97],
            zoom: 11.1,
            maxZoom: 15,
            minZoom: 5
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'js-map'
    })
}

I guess, there is a typo somewhere but I just can't see it.

Another possible problem is that I'm using Ubuntu. Perhaps it has something to do with that?

Here is also a screenshot from the project folder:

enter image description here

Improve this question
6
  • 1
    Which version of OpenLayers is ./lib/OpenLayers/ol.js and what is in ./style.css? If it is version 6 the map div must be sized by in the css similar to openlayers.org/en/latest/doc/quickstart.html
    – Mike
    Commented Jan 10, 2020 at 17:53
  • ol.js is version 6.1.1. I just downloaded the file from openlayers.org/download There is nothing yet in style.css.
    – DGIS
    Commented Jan 10, 2020 at 21:02
  • 1
    If it is version 6 you will need to set height and width for your .map class
    – Mike
    Commented Jan 10, 2020 at 21:16
  • sorry I don't get it yet. When I check the docs openlayers.org/en/latest/apidoc/module-ol_Map-Map.html , there are height or width types. I also checked the types for the view object I can't adjust height and width. Or are you talking about the div box in the html file?
    – DGIS
    Commented Jan 10, 2020 at 21:59
  • 1
    It's a css setting as in openlayers.org/en/latest/doc/quickstart.html
    – Mike
    Commented Jan 10, 2020 at 23:10

1 Answer 1

Reset to default
4

In OpenLayers 6 the map div must have a size, such as

<style>
  .map {
    height: 400px;
    width: 100%;
  }
</style>

in the quick start example https://openlayers.org/en/latest/doc/quickstart.html

Improve this answer

Your Answer

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

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