CODEWITHSUNDEEP
javascriptmapsopenlayers-3
raddevon
raddevon

Reputation: 3340

OSM layer not drawn if vector layer has no features

My OpenLayers 3.7.0 map has an OSM layer and a vector layer. In a case where the vector layer will be empty of features, the OSM layer is not drawn either. I would like to still display the map even if it has no features.

When I refresh a map that would have an empty vector layer, the OSM layer starts drawing before vanishing entirely.

I suspect this is happening when I try to add features to the vector layer, but I'm not certain. Here's the code handling that:

drawPoints: function(data){
    var self = this;
    var holder = new Array();
      data.items.forEach(function(y) {
        if(y.userdefinedlatitude != null){
            y.latitude = y.userdefinedlatitude;
        }
        if(y.userdefinedlongitude != null){
            y.longitude = y.userdefinedlongitude;
        }
        if((y.latitude != "" || y.longitude != "") || (y.latitude != "0" || y.longitude != "0")){
          var streets = new Array();
          if(y.street1 != ""){
            streets.push(y.street1);
          }
          if(y.street2 != ""){
            streets.push(y.street2);
          }
          if(streets.length > 1){
            var name = streets.join(' & ');
          }else{
            var name = "Unnamed Site";
          }
          siteData = {
            name: name,
            id: y.siteid
          }

          if(typeof holder[y.latitude.toString()] == "undefined"){
            holder[y.latitude.toString()] = new Object;
          }
          if(typeof holder[y.latitude.toString()][y.longitude.toString()] == "undefined"){
            holder[y.latitude.toString()][y.longitude.toString()] = new Array;
          }

          holder[y.latitude.toString()][y.longitude.toString()].push(siteData);

        }
      });
      for(var x in holder){
        for(var y in holder[x]){
          var name = '';
          for(var xx in holder[x][y]){
            name = name + '<p style="margin: 0px;">' + holder[x][y][xx].name + '</p><p style="font-size: 80%; margin-top: -5px;"><a href="#" class="moreInfo" data-itemId="' + holder[x][y][xx].id + '">Info</a> - <a href="#" class="movePin" data-itemId="' + holder[x][y][xx].id + '">Move</a></p>';
          }
          if(holder[x][y].length > 1){
            name = '<p style="font-weight: bold;">' + holder[x][y].length + ' Locations</p>' + name;
          }
          self.addMarker(x,y,name,self.maps.vectorSource);
        }
      }
      if(self.extents.once){
        self.maps.map.getView().fit(self.maps.vectorSource.getExtent(),[$(window).height(),$(window).width()]);
        self.extents.once = false;
        }
},
addMarker: function(lat, long, name, source, siteid){
    if(lat > -91 && lat < 91 && long > -181 && long < 181){
          var point = ol.proj.transform([parseFloat(long), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857');
          if(!isNaN(point[0]) && !isNaN(point[1])){
            var iconFeature = new ol.Feature({
              geometry: new ol.geom.Point(point),
              name: name,
              siteid: siteid,
              population: 4000,
              rainfall: 500
            });

            var iconStyle = new ol.style.Style({
              image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 32],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: '/img/marker.png'
              }))
            });

            iconFeature.setStyle(iconStyle);

            source.addFeature(iconFeature);
          }
    }
}

If I draw a map with features in the vector layer, everything works perfectly. This worked as intended back in OL 3.1.1.

Upvotes: 0

Views: 104

Answers (1)

Alvin Lindstam
Alvin Lindstam

Reputation: 3142

From your code:

self.maps.map.getView().fit(self.maps.vectorSource.getExtent(),[$(window).height(),$(window).width()]);

It is meant to fit the extent of the source, but when the source is empty (no features) it's extent is infinite. Fitting infinity can't be done, but it seems that the method does not handle it graciously but crashes. Example: http://jsfiddle.net/7av5agym/2/

The solution: test for features in the source before trying to fitting it's extent.

Project ticket: https://github.com/openlayers/ol3/issues/3925

Upvotes: 1

Related Questions