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: '© <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.
