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">
    <meta charset="UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/OpenLayers/ol.css">
    <link rel="stylesheet" href="./style.css">
    <div id="js-map" class="map"> </div>
    <script src='./lib/OpenLayers/ol.js'> </script>
    <script src='./Main.js'> </script>

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


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

  .map {
    height: 400px;
    width: 100%;

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

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.