OpenLayers map.addLayer TypeError

I’m trying to do some simple drawing on OpenStreetMap data using OpenLayers (version 6.5.0). The map loads fine. I try to do the drawing when the button in the top right is clicked.

I convert this array of GPS coordinates into a Polygon, into a Feature, into an ol.source.Vector, into an ol.layer.Vector. I log every object constructed along the way on the console. This appears to go fine.

I finally want to add the (Vector) layer to the existing map using the .addLayer() function. At this point, things go wrong inside the OpenLayer 6.5.0 JavaScript code. Deep inside the ol.js code, it throws a TypeError: t.addEventListener is not a function. Browser screenshot

I’ve looked at multiple examples:

So far, I have no clue whether this a bug in OpenLayer 6.5.0 or I’m missing something during conversion of my GPS coordinates array into an ol.layer.vector object. Any hints on this?

Entire html/javascript code below:

<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="ol.css">
    <script src="ol.js"></script>
    <script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
    var vView = new ol.View({
        center: ol.proj.fromLonLat([szLon, szLat]),
        zoom: zoom
    });
    var lTile = new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    var map = new ol.Map({
        target: domDivId,
        layers: [lTile],
        view: vView
    });
    return map;
}

function drawBermuda(map) {
    // Bermuda triangle (approximate) GPS coordinates in [lat,lon] format
    var arPath = [
        [18.472282,-66.123934], // Bermuda
        [32.297504,-64.778447], // Puerto Rico
        [25.732447,-80.133221], // Miami
        [18.472282,-66.123934]  // Bermuda
    ];
    console.log(arPath);

    var pPath = {
        'type': 'Polygon',
        'coordinates': arPath
    };
    console.log(pPath);
    
    var fPath = {
        'type': 'Feature',
        'geometry': pPath
    };
    console.log(fPath);
    
    var svPath = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(fPath)
    });
    console.log(svPath);
    
    var lvPath = new ol.layer.Vector({
        source: svPath,
    });
    console.log(lvPath);
    
    map.addLayer([lvPath]);
}

    </script>
</head>
<body>
    <div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
    <script>
    map = loadMap('div_map', 25.0, -71.0, 5);
    </script>
    <div style="float:right">
        <button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
    </div>
</body>
</html>

JavaScript
​x
 
<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="ol.css">
    <script src="ol.js"></script>
    <script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
    var vView = new ol.View({
        center: ol.proj.fromLonLat([szLon, szLat]),
        zoom: zoom
    });
    var lTile = new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    var map = new ol.Map({
        target: domDivId,
        layers: [lTile],
        view: vView
    });
    return map;
}
​
function drawBermuda(map) {
    // Bermuda triangle (approximate) GPS coordinates in [lat,lon] format
    var arPath = [
        [18.472282,-66.123934], // Bermuda
        [32.297504,-64.778447], // Puerto Rico
        [25.732447,-80.133221], // Miami
        [18.472282,-66.123934]  // Bermuda
    ];
    console.log(arPath);
​
    var pPath = {
        'type': 'Polygon',
        'coordinates': arPath
    };
    console.log(pPath);
    
    var fPath = {
        'type': 'Feature',
        'geometry': pPath
    };
    console.log(fPath);
    
    var svPath = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(fPath)
    });
    console.log(svPath);
    
    var lvPath = new ol.layer.Vector({
        source: svPath,
    });
    console.log(lvPath);
    
    map.addLayer([lvPath]);
}
​
    </script>
</head>
<body>
    <div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
    <script>
    map = loadMap('div_map', 25.0, -71.0, 5);
    </script>
    <div style="float:right">
        <button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
    </div>
</body>
</html>
​

P.S. I am aware that I still may have to swap latitude and longitude and convert the coordinates in some other way for OpenLayer to interpret them correctly. But that’s not the main point here. I guess…

Answer

As well as missing and misplaced [ ] geojson coordinates must be specified in lon, lat order and features must be read into the view projection

<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
    var vView = new ol.View({
        center: ol.proj.fromLonLat([szLon, szLat]),
        zoom: zoom
    });
    var lTile = new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    var map = new ol.Map({
        target: domDivId,
        layers: [lTile],
        view: vView
    });
    return map;
}

function drawBermuda(map) {
    // Bermuda triangle (approximate) GPS coordinates in [lon,lat] format
    var arPath = [[
        [-66.123934, 18.472282], // Bermuda
        [-64.778447, 32.297504], // Puerto Rico
        [-80.133221, 25.732447], // Miami
        [-66.123934, 18.472282]  // Bermuda
    ]];

    var pPath = {
        'type': 'Polygon',
        'coordinates': arPath
    };
    
    var fPath = {
        'type': 'Feature',
        'geometry': pPath
    };
    
    var svPath = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(fPath, {featureProjection: map.getView().getProjection()})
    });
    
    var lvPath = new ol.layer.Vector({
        source: svPath,
    });
    
    map.addLayer(lvPath);
}

    </script>
</head>
<body>
    <div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
    <script>
    map = loadMap('div_map', 25.0, -71.0, 5);
    </script>
    <div style="float:right">
        <button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
    </div>
</body>
</html>

JavaScript
 
<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
    var vView = new ol.View({
        center: ol.proj.fromLonLat([szLon, szLat]),
        zoom: zoom
    });
    var lTile = new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    var map = new ol.Map({
        target: domDivId,
        layers: [lTile],
        view: vView
    });
    return map;
}
​
function drawBermuda(map) {
    // Bermuda triangle (approximate) GPS coordinates in [lon,lat] format
    var arPath = [[
        [-66.123934, 18.472282], // Bermuda
        [-64.778447, 32.297504], // Puerto Rico
        [-80.133221, 25.732447], // Miami
        [-66.123934, 18.472282]  // Bermuda
    ]];
​
    var pPath = {
        'type': 'Polygon',
        'coordinates': arPath
    };
    
    var fPath = {
        'type': 'Feature',
        'geometry': pPath
    };
    
    var svPath = new ol.source.Vector({
        features: new ol.format.GeoJSON().readFeatures(fPath, {featureProjection: map.getView().getProjection()})
    });
    
    var lvPath = new ol.layer.Vector({
        source: svPath,
    });
    
    map.addLayer(lvPath);
}
​
    </script>
</head>
<body>
    <div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
    <script>
    map = loadMap('div_map', 25.0, -71.0, 5);
    </script>
    <div style="float:right">
        <button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
    </div>
</body>
</html>

Advertisement

Answer