Added map layer. No error. Layer not visible

Question

I generate a map layer with the following code:

var GeoJSON = {};
GeoJSON.type = "FeatureCollection";
GeoJSON.features = [];

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: "~/icons/delivery-truck.png"
    }))
});

for (var i = 0; i < data.length; i++) {

    var machineGeoObject = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [data[i]["longitude"], data[i]["latitude"]],
        },
        "properties": data[i],
        "style": iconStyle
    }
    GeoJSON.features.push(machineGeoObject);
} //end of loop

var format = new ol.format.GeoJSON({
    featureProjection: "EPSG:3857"
});

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
       features: format.readFeatures(GeoJSON)
    })
});

map.addLayer(vector);

There is no error. When I call map.getLayers() in the console, I see the added layer. The layer's property 'visible' is true. Why can't I see the pinpointed locations with icons on the map? Why do I only see a bare map?

score 0 · Answer 1 · answered Sep 22 '19 at 14:19

You probably have features visible within 180 meters of lon/lat 0,0 in the Atlantic styled by the OpenLayers default style. You cannot set an OpenLayers style via a GeoJSON, it must be set on the layer, or on the feature using setStyle(). Also featureProjection on the format is only used in layer source setups, if you use readFeatures it must be specified there:

var GeoJSON = {};
GeoJSON.type = "FeatureCollection";
GeoJSON.features = [];

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: "~/icons/delivery-truck.png"
    }))
});

for (var i = 0; i < data.length; i++) {

    var machineGeoObject = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [data[i]["longitude"], data[i]["latitude"]],
        },
        "properties": data[i],
    }
    GeoJSON.features.push(machineGeoObject);
} //end of loop

var format = new ol.format.GeoJSON();

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
       features: format.readFeatures(GeoJSON, {
         featureProjection: "EPSG:3857"
       })
    }),
    style: iconStyle
});

Also check that your icon src url is correct (should ~ be . or .. ?) and ensure data[i]["longitude"] and data[i]["latitude"] are numbers and not strings (use Number() if necessary).

Added map layer. No error. Layer not visible

1 Answers1