Skip to content

Commit

Permalink
Merge pull request #318 from chrismayer/example-protocol-proxy
Browse files Browse the repository at this point in the history 
Add example for loading features via ProtocolProxy
  • Loading branch information
@chrismayer
chrismayer committed Nov 27, 2014
2 parents 905b7fe + 37d7102 commit b810d65
Show file tree
Hide file tree
Showing 3 changed files with 266 additions and 0 deletions.
88 changes: 88 additions & 0 deletions examples/data/busstops.geojson
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "osm-busstops.fid-450a1ab3_149e7ccb0c9_30ad",
"geometry": {
"type": "Point",
"coordinates": [1218828.5056681812,
6620850.261476886]
},
"geometry_name": "geometry",
"properties": {
"id": 1130170,
"osm_id": 1688977159,
"name": "Salomonsborn",
"type": "bus_stop",
"ref": ""
}
},
{
"type": "Feature",
"id": "osm-busstops.fid-450a1ab3_149e7da3233_e78",
"geometry": {
"type": "Point",
"coordinates": [599198.5191414315,
5359744.431373389]
},
"geometry_name": "geometry",
"properties": {
"id": 1130233,
"osm_id": 1689159158,
"name": "Barbini Loubon",
"type": "bus_stop",
"ref": ""
}
},
{
"type": "Feature",
"id": "osm-busstops.fid-450a1ab3_149e7ccb0c9_30af",
"geometry": {
"type": "Point",
"coordinates": [954416.1508209753,
6012682.402613947]
},
"geometry_name": "geometry",
"properties": {
"id": 1130181,
"osm_id": 1689025037,
"name": "Opfikon, Schulstrasse",
"type": "bus_stop",
"ref": ""
}
},
{
"type": "Feature",
"id": "osm-busstops.fid-450a1ab3_149e7ccb0c9_30b5",
"geometry": {
"type": "Point",
"coordinates": [1816615.967539551,
5948768.54551049]
},
"geometry_name": "geometry",
"properties": {
"id": 1130187,
"osm_id": 1689043500,
"name": "Unterlangzeil Nr.5",
"type": "bus_stop",
"ref": ""
}
},
{
"type": "Feature",
"id": "osm-busstops.fid-450a1ab3_149e7da3233_-20e8",
"geometry": {
"type": "Point",
"coordinates": [-696436.2255883364,
7037778.549495307]
},
"geometry_name": "geometry",
"properties": {
"id": 1130192,
"osm_id": 1689050200,
"name": "Churchtown Rd. Upper/Jct. Beaumont Avenue",
"type": "bus_stop",
"ref": "1035"
}
}]
}
47 changes: 47 additions & 0 deletions examples/grid/feature-grid-w-proxy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>GeoExt WFS FeatureStore in an Ext Grid</title>

<!-- ExtJS -->
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>

<!-- Shared -->
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
<!-- Basic example styling -->
<link rel="stylesheet" type="text/css" href="../shared/example.css" />

<style>
div.olControlAttribution {
background-color: rgb(237,237,237);
background-color: rgba(237,237,237,0.7);
}
</style>

<!-- You should definitely consider using a custom single-file version of OpenLayers -->
<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>

<script type="text/javascript" src="../loader.js"></script>
<script type="text/javascript" src="feature-grid-w-proxy.js"></script>

</head>
<body>
<h1>Grid Panel configured with a GeoExt.data.FeatureStore and a GeoExt.data.proxy.Protocol</h1>

<p>This example shows an Ext grid loaded with features read from a
GeoJSON document
(<a href="../data/busstops.geojson">../data/busstops.geojson</a>) via a GeoExt.data.proxy.Protocol.
The GeoJSON is taken from this <a href="http://ows.terrestris.de/geoserver/osm/wfs?service=wfs&version=1.1.0&request=GetCapabilities">WFS</a>
</p>

<p>Because the layer and the store are bound to each other, the
features loaded into the store are automatically added to the layer. A
GeoExt feature selection model is also used so that selecting rows in
the grid selects features in the layer, and vice-versa.</p>

<p>See <a href="feature-grid-w-proxy.js">feature-grid-w-proxy.js</a>.</p>

<div id="mainpanel"></div>
</body>
</html>
131 changes: 131 additions & 0 deletions examples/grid/feature-grid-w-proxy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*
* Copyright (c) 2008-2014 The Open Source Geospatial Foundation
*
* Published under the BSD license.
* See https://github.com/geoext/geoext2/blob/master/license.txt for the full
* text of the license.
*/

/** api: example[feature-grid-w-proxy]
* Grid with Features via Proxy
* ------------------
* Synchronize selection of features between a grid and a layer.
*/

var mapPanel, store, gridPanel, mainPanel;

Ext.require([
'GeoExt.panel.Map',
'GeoExt.data.FeatureStore',
'GeoExt.data.proxy.Protocol',
'GeoExt.selection.FeatureModel',
'Ext.grid.GridPanel',
'Ext.layout.container.Border'
]);

Ext.application({
name: 'Feature Grid with Proxy - GeoExt2',
launch: function() {
// create map instance
var map = new OpenLayers.Map({projection: 'EPSG:900913'});
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenStreetMap WMS",
"http://ows.terrestris.de/osm-gray/service?",
{layers: 'OSM-WMS'},
{
attribution: '&copy; terrestris GmbH & Co. KG <br>' +
'Data &copy; OpenStreetMap ' +
'<a href="http://www.openstreetmap.org/copyright/en"' +
'target="_blank">contributors<a>'
}
);

// create vector layer
var template = {
cursor: "pointer",
fillOpacity: 0.8,
fillColor: "blue",
pointRadius: 9,
label: 'H',
labelAlign: "center",
fontColor: "white",
fontSize: "12px",
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "yellow",
graphicName: "circle"
};
var style = new OpenLayers.Style(template);
var defStyle = new OpenLayers.Style(template);
var selStyle = new OpenLayers.Style(
Ext.apply(
Ext.apply({}, template),
{
strokeWidth: 3,
pointRadius: 15,
fontSize: "15px",
fontWeight: "bold"
}
)
);
var vecLayer = new OpenLayers.Layer.Vector("vector", {
styleMap: new OpenLayers.StyleMap({
'default': defStyle,
'select': selStyle
})
});
map.addLayers([wmsLayer, vecLayer]);

// create map panel
mapPanel = Ext.create('GeoExt.panel.Map', {
title: "Map",
region: "center",
height: 400,
width: 600,
map: map,
center: new OpenLayers.LonLat(670199.86402052, 6178328.5593591),
zoom: 4
});

// create feature store, binding it to the vector layer
store = Ext.create('GeoExt.data.FeatureStore', {
layer: vecLayer,
fields: [
{name: 'name', type: 'string'}
],
autoLoad: true,
proxy: Ext.create('GeoExt.data.proxy.Protocol', {
reader: Ext.create('GeoExt.data.reader.Feature', {root: 'features'}),
protocol: new OpenLayers.Protocol.HTTP({
url: "../data/busstops.geojson",
format: new OpenLayers.Format.GeoJSON({})
})
})
});

// create grid panel configured with feature store
gridPanel = Ext.create('Ext.grid.GridPanel', {
title: "Feature Grid",
region: "east",
store: store,
width: 340,
columns: [{
header: "Name",
flex: 1,
dataIndex: "name"
}],
selType: 'featuremodel'
});

// create a panel and add the map panel and grid panel
// inside it
mainPanel = Ext.create('Ext.Panel', {
renderTo: "mainpanel",
layout: "border",
height: 400,
width: 920,
items: [mapPanel, gridPanel]
});
}
});

0 comments on commit b810d65

Please sign in to comment.