ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Convert V examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-16 18:03:55 -07:00
parent baed03d50d
commit 8bd97532df
8 changed files with 64 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
examples/vector-esri-edit.html
View File

@@ -1,20 +1,16 @@
---
layout: example.html
title: esri ArcGIS REST Feature Service example with editing
layout: strapless.html
title: Editable ArcGIS REST Feature Service
shortdesc: Example of using an ArcGIS REST Feature Service in an editing application.
docs: >
This example loads features from ArcGIS REST Feature Service and allows to add new features or update existing features.
tags: "vector, esri, ArcGIS, REST, Feature, Service, bbox, loading, server, edit, updateFeature, addFeature"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<form class="form-inline">
<label>Draw or modify &nbsp;</label>
<select id="type">
<option value="DRAW">Draw</option>
<option value="MODIFY">Modify</option>
</select>
</form>
</div>
</div>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Draw or modify &nbsp;</label>
<select id="type">
<option value="DRAW">Draw</option>
<option value="MODIFY">Modify</option>
</select>
</form>

40
examples/vector-esri-edit.js
View File

@@ -29,20 +29,18 @@ var vectorSource = new ol.source.Vector({
',"spatialReference":{"wkid":102100}}') +
'&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
'&outSR=102100';
$.ajax({url: url, dataType: 'jsonp', success: function(response) {
if (response.error) {
alert(response.error.message + '\n' +
response.error.details.join('\n'));
} else {
// dataProjection will be read from document
var features = esrijsonFormat.readFeatures(response, {
featureProjection: projection
});
if (features.length > 0) {
vectorSource.addFeatures(features);
}
fetch(url).then(function(response) {
return response.json();
}).then(function(json) {
// dataProjection will be read from document
var features = esrijsonFormat.readFeatures(json, {
featureProjection: projection
});
if (features.length > 0) {
vectorSource.addFeatures(features);
}
}});
});
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
tileSize: 512
@@ -97,8 +95,12 @@ selected.on('remove', function(evt) {
featureProjection: map.getView().getProjection()
}) + ']';
var url = serviceUrl + layer + '/updateFeatures';
$.post(url, { f: 'json', features: payload }).done(function(data) {
var result = JSON.parse(data);
var data = new FormData();
data.append('f', 'json');
data.append('features', payload);
fetch(url, {method: 'POST', body: data}).then(function(response) {
return response.json();
}).then(function(result) {
if (result.updateResults && result.updateResults.length > 0) {
if (result.updateResults[0].success !== true) {
var error = result.updateResults[0].error;
@@ -117,8 +119,12 @@ draw.on('drawend', function(evt) {
featureProjection: map.getView().getProjection()
}) + ']';
var url = serviceUrl + layer + '/addFeatures';
$.post(url, { f: 'json', features: payload }).done(function(data) {
var result = JSON.parse(data);
var data = new FormData();
data.append('f', 'json');
data.append('features', payload);
fetch(url, {method: 'POST', body: data}).then(function(response) {
return response.json();
}).then(function(result) {
if (result.addResults && result.addResults.length > 0) {
if (result.addResults[0].success === true) {
feature.setId(result.addResults[0]['objectId']);

18
examples/vector-esri.html
View File

@@ -1,18 +1,12 @@
---
layout: example.html
title: esri ArcGIS REST Feature Service example
layout: strapless.html
title: ArcGIS REST Feature Service
shortdesc: Example of using an ArcGIS REST Feature Service with a BBOX strategy.
docs: >
This example loads new features from ArcGIS REST Feature Service when the view extent changes.
tags: "vector, esri, ArcGIS, REST, Feature, Service, bbox, loading, server"
resources:
- https://code.jquery.com/jquery-1.11.2.min.js
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

10
examples/vector-labels.html
View File

@@ -1,16 +1,12 @@
---
layout: example.html
title: Vector labels example
layout: strapless.html
title: Vector Labels
shortdesc: Example of GeoJSON features with labels.
docs: >
**Note:** The 'Text/Wrap' option is currently not working properly. This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping.
tags: "geojson, vector, openstreetmap, label"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>
<div class="edit-form">
<input id="refresh-points" type="button" value="Refresh" />

21
examples/vector-labels.js
View File

@@ -185,17 +185,20 @@ var map = new ol.Map({
})
});
$('#refresh-points').click(function() {
vectorPoints.setStyle(pointStyleFunction);
});
document.getElementById('refresh-points')
.addEventListener('click', function() {
vectorPoints.setStyle(pointStyleFunction);
});
$('#refresh-lines').click(function() {
vectorLines.setStyle(lineStyleFunction);
});
document.getElementById('refresh-lines')
.addEventListener('click', function() {
vectorLines.setStyle(lineStyleFunction);
});
$('#refresh-polygons').click(function() {
vectorPolygons.setStyle(polygonStyleFunction);
});
document.getElementById('refresh-polygons')
.addEventListener('click', function() {
vectorPolygons.setStyle(polygonStyleFunction);
});
/**

20
examples/vector-layer.html
View File

@@ -1,22 +1,10 @@
---
layout: example.html
title: Vector layer example
layout: strapless.html
title: Vector Layer
shortdesc: Example of a countries vector layer with country information.
docs: >
The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. Zoom in a few times to see country name labels.
tags: "vector, osm, xml, loading, server"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

10
examples/vector-osm.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: OSM XML example
layout: strapless.html
title: OSM XML
shortdesc: Example of using the OSM XML source.
docs: >
OSM XML vector data is loaded dynamically from a server using a tiling strategy.
@@ -8,8 +8,4 @@ tags: "vector, osm, xml, loading, server"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

10
examples/vector-wfs.html
View File

@@ -1,6 +1,6 @@
---
layout: example.html
title: WFS example
layout: strapless.html
title: WFS
shortdesc: Example of using WFS with a BBOX strategy.
docs: >
This example loads new features from GeoServer WFS when the view extent changes.
@@ -8,8 +8,4 @@ tags: "vector, WFS, bbox, loading, server"
cloak:
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>