Skip to content

Instantly share code, notes, and snippets.

@ThomasG77 ThomasG77/index.html Secret
Last active Jun 6, 2018

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Box Selection</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
<script src="http://epsg.io/27700.js"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var extent = ol.proj.transformExtent([-8.74, 49.81, 1.84, 60.9], 'EPSG:4326', 'EPSG:27700');
var projection = ol.proj.get('EPSG:27700');
projection.setExtent(extent);
var vectorSource = new ol.source.Vector({
format: new ol.format.WFS(),
loader: function(extent, resolution, projection) {
var url = 'https://cors-anywhere.herokuapp.com/http://www.trafficorders.uk/cgi-bin/mapserv?map=/var/www/vhosts/trafficorders.uk/httpdocs/maps/wfsareas.map&service=WFS&' +
'version=1.1.0&request=GetFeature&typename=la_areas&' +
'outputFormat=text/xml; subtype=gml/3.1.1&srsname=EPSG:27700';
fetch(url)
.then(response => response.text())
.then(text => {
console.log(text)
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(text, {
dataProjection: 'EPSG:27700',
featureProjection: 'EPSG:3857'
})
);
})
},
url: function(extent) {
// Possible to remove https://cors-anywhere.herokuapp.com/
// Added to manage CORS issue as I don't own the server
return 'https://cors-anywhere.herokuapp.com/http://www.trafficorders.uk/cgi-bin/mapserv?map=/var/www/vhosts/trafficorders.uk/httpdocs/maps/wfsareas.map&service=WFS&' +
'version=1.1.0&request=GetFeature&typename=la_areas&' +
'outputFormat=text/xml; subtype=gml/3.1.1&srsname=EPSG:27700';
},
strategy: ol.loadingstrategy.all
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: vectorSource
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-2.78624, 54.90409]),
zoom: 5
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.