[GIS] GeoJSON layer not displaying in OpenLayers 3

geojsonopenlayersweb-mapping

I am quite new to OpenLayers so it could be something simple. I have a map with the OS tile service and a number of boundaries layers in GeoJSON and they are in EPSG:27700. I have tried for quite sometime to get them to display but am having no luck, I thought it might be something to do with the CRS or the way I am referencing the GeoJSON.

I should point out that I am building the code in two separate files:

Map Render(ol3_test.js)

    //Invokes ScaleLine API
var scaleLineControl = new ol.control.ScaleLine(); //Invokes ScaleLine API

var coordinatesDisplay = new ol.control.MousePosition({ 
  coordinateFormat: ol.coordinate.createStringXY(0),
  projection: epsg27700Projection,
  undefinedHTML: ' '
});

var map = new ol.Map({
    controls: ol.control.defaults({}).extend([
            scaleLineControl,           // Scale Line Added here.
            coordinatesDisplay]),   // Coordinates Added here. 
    target: 'map',
    projection: epsg27700Projection,
    layers:layersList,
    view: new ol.View({
        extent: [321926,214348,-376941,277840],
        center: [351952, 241459],
        maxZoom: 20,
        minZoom: 7,
        zoom: 9
    })
});
map.addControl(new ol.control.ZoomSlider());
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);

Layers (layers/layers.js) 

var epsg27700 = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.999601 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +datum=OSGB36 +units=m +no_defs";

var url = "https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/wmts?key=MYKEYISHERE"

proj4.defs["EPSG:27700"] = epsg27700;

var epsg27700Projection = new ol.proj.Projection({
  code: epsg27700,
  extent: [-238375.0,0,700000,1300000]
});

var matrixIds = new Array(14);
for (var z = 0, i = 13; z < 14; z++, i--) {
    // generate resolutions and matrixIds arrays for this WMTS
    matrixIds[z] = "EPSG:27700:" + z;
}
var attribution = new ol.Attribution({
    html: '&copy; <a href="http://www.ordnancesurvey.co.uk/">Ordnance Survey</a>'
});
var extent = [0,0,700000,1300000];

var baseLayer = new ol.layer.Group({
    projection: epsg27700Projection,
    layers : [
        new ol.layer.Tile({
            extent: extent,
            source: new ol.source.WMTS({
                attributions: [attribution],
                url: url,
                layer: 'Light 27700',
                matrixSet: 'EPSG:27700',
                format: 'image/png',
                projection: epsg27700Projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-238375.0, 1376256.0],
                    resolutions: [896.0, 448.0, 224.0, 112.0,
                        56.0, 28.0, 14.0, 7.0, 3.5, 1.75,
                        0.875, 0.4375, 0.21875, 0.109375
                    ],
                    matrixIds: matrixIds
                }),
            })
        })
    ],
}); 

// LocalityStewardArea Layer

// Define a GeoJSON source that will load features via a http call. By
// specifying the projection of the map's view OL3 will transform the coordinates for display
var LocalityStewardArea_Source = new ol.source.GeoJSON({
    'projection': map.getView().getProjection(),
    'url': './HerefordshireBoundary.geojson'
});

// Create a vector layer to display the features within the GeoJSON source and
// applies a simple stroke
var LocalityStewardArea = new ol.layer.Vector({
    title: 'LocalityStewardArea',
    source: LocalityStewardArea_Source,
    style: new ol.style.Style({
        image: new ol.style.Stroke(({
            width: 2
        }))
    })
});

var layersList = [LocalityStewardArea];
//LocalityStewardArea.set('fieldLabels', {'name': 'inline label', });

Html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers 3</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="lib/ol3/ol.css" />
    <link rel="stylesheet" href="lib/ol3-popup/src/ol3-popup.css" />
    <link rel="stylesheet" href="ol3.css" />
  </head>
  <body>
    <div id="map"></div>
    <script src="../common/lib/reqwest.min.js"></script>
    <script src="lib/proj4.js"></script>
    <script src="lib/ol3/ol.js"></script>
    <script src="lib/ol3-popup/src/ol3-popup.js"></script>
    <script src="./styles/LayerStyles.js" type="text/javascript"></script> 
    <script src="./layers/layers.js" type="text/javascript"></script> 
    <script src="ol3_test.js"></script>
  </body>
</html>

The geoJSON used in the above example.

Best Answer

I suspect that your map projection is not OSGB (EPSG:27700) so the following:

var LocalityStewardArea_Source = new ol.source.GeoJSON({
    'projection': map.getView().getProjection(),
    'url': './HerefordshireBoundary.geojson'
});

won't work, instead be specific and try:

var LocalityStewardArea_Source = new ol.source.GeoJSON({
    'projection': epsg27700Projection,
    'url': './HerefordshireBoundary.geojson'
});

UPDATE

On reading the GeoJSON source documentation it says:

Destination projection. If provided, features will be transformed to this projection. If not provided, features will not be transformed.

It looks like OL assumes that GeoJSON is in EPSG:4326 by default and will reproject if you give the source a projection object. Try removing that line completely.

Related Question