Skip to content

Instantly share code, notes, and snippets.

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

What would you like to do?
<!DOCTYPE html>
<title>Box Selection</title>
<link rel="stylesheet" href="" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src=",Element.prototype.classList,URL"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div id="map" class="map"></div>
var extent = ol.proj.transformExtent([-8.74, 49.81, 1.84, 60.9], 'EPSG:4326', 'EPSG:27700');
var projection = ol.proj.get('EPSG:27700');
var vectorSource = new ol.source.Vector({
format: new ol.format.WFS(),
loader: function(extent, resolution, projection) {
var url = '' +
'version=1.1.0&request=GetFeature&typename=la_areas&' +
'outputFormat=text/xml; subtype=gml/3.1.1&srsname=EPSG:27700';
.then(response => response.text())
.then(text => {
vectorSource.getFormat().readFeatures(text, {
dataProjection: 'EPSG:27700',
featureProjection: 'EPSG:3857'
url: function(extent) {
// Possible to remove
// Added to manage CORS issue as I don't own the server
return '' +
'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
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.