OpenLayers map.addLayer TypeError

Question

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>

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...

A polygon is an array of linear rings so arPath needs an extra set of outer [ ]. addLayer adds a single layer, and does not need the [] — Mike
Thank you Mike! Changing map.addLayer([lvPath]) into map.AddLayer(lvPath) fixed the error message! Somehow while reading through the examples, I thought that adding layers can be done in arrays of multiple layers. — dedinext

Mike Mike · Accepted Answer · 2021-03-28T18:05:31

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>

OpenLayers map.addLayer TypeError

1 Answers