How to add shapefiles to a Bing Map using Openlayers 3

Question

I am using Openlayers3 with Bing Maps to build my application. I have a point shapefile and would like to show it on the map. I could do it using Openlayers2 using the OpenLayers.Layer.GML() construct but am facing difficulty while trying to the same with Openlayers 3. I tried searching for this and the openlayer example gives me an error: 'Cannot read property 'ogc' of undefined'. My shapefile is on GeoServer in my own system.

So any help regarding this matter is highly appreciated :)

Answer 1

The example you linked is from a very old beta version of OpenLayers 3. You can find the examples from the last release here.

You are talking about shapefiles, but given the fact that you used OpenLayers.Layer.GML in OpenLayers 2 and have tagged this post with geoserver and gml as well, I assume you have uploaded your shapefile to GeoServer and use WFS to access the data.

So the relevant example to look at will be http://openlayers.org/en/v3.3.0/examples/vector-wfs.html. That example uses JSONP as transport. In your case, with a local GeoServer, your vector source definiton would be a bit simpler and could look like this:

var vectorSource = new ol.source.ServerVector({
  format: new ol.format.GeoJSON(),
  loader: function(extent, resolution, projection) {
    var url = 'geoserver/wfs?service=WFS&version=1.1.0&' +
        'request=GetFeature&typename=osm:water_areas&outputFormat=json' +
        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
    $.ajax(url).then(function(response) {
      vectorSource.addFeatures(vectorSource.readFeatures(response));
    });
  },
  strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
    maxZoom: 19
  }))
});

In the above snippet, you will have to replace osm:water_areas with your workspace and layer (feature type) name.

To use that source in a vector layer, you can also add some style if you don't want the default blueish fill. The one below renders the features with just a blue outline that is 2 pixels wide:

var vector = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});