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,
    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();

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', });


<!DOCTYPE html>
    <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" />
    <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>

The geoJSON used in the above example.


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'


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.

  • It is set to the same projection, have tried the solution I get the same problem. All the map elements load but a blank screen. May 23 '17 at 12:57
  • I think I may have made an error trying your previous soloution as the map now loads with or without the 'projection': epsg27700Projection,' but the vector layer still doesn't display. Oddly if I try to drag the map it gets moved to the right so it does seem to be something wrong with the projection. May 23 '17 at 13:37
  • GeoJSON has to be in 4326 WGS84, to check your data use geojsonlint.com This check would rule out your data if it displays here, Our it could show you the code is fine and it's a data issue. Mar 1 '18 at 18:41
  • GeoServer takes a more sensible view of the world and will serve projected GeoJSON
    – Ian Turton
    Mar 2 '18 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.