Permalink
Browse files

update FeaturePanel example with explicit feature fetch and load

  • Loading branch information...
1 parent 569c595 commit d3dd107e46d838345e2f33a6e4001f05870291fb @justb4 justb4 committed Dec 17, 2016
@@ -28,7 +28,7 @@ Heron.options.map.settings.zoom = 10;
Ext.onReady(function() {
// create a panel and add the map panel and grid panel
- // inside it
+ // inside it: fixed column layout
new Ext.Window({
title: __('Click Map or Grid to Select - Double Click to Zoom to feature'),
layout: "fit",
@@ -62,19 +62,78 @@ Ext.onReady(function() {
protocol: new OpenLayers.Protocol.HTTP({
url: 'data/parcels.json',
format: new OpenLayers.Format.GeoJSON()
-// url: 'data/addresses.gml',
-// format: new OpenLayers.Format.GML()
})
}),
autoLoad: true
},
zoomOnRowDoubleClick : true,
zoomOnFeatureSelect : false,
- zoomLevelPointSelect : 8,
+ zoomLevelPointSelect : 12,
separateSelectionLayer: false
}
}
]
}).show();
+
+ //
+ // Alternatively: a more programmatic approah:
+ // features can be read and passed in constructor of FeaturePanel and
+ // then passed to the Window. The column layout is automatic (autoConfig: true).
+ //
+
+ function createFeaturePanelPopup(features) {
+ // Create the FeaturePanel
+ var featurePanel = new Heron.widgets.search.FeaturePanel({
+ id: 'hr-featuregridpanel',
+ title: __('Addresses'),
+ features: features,
+ header: false,
+ autoConfig: true,
+ hropts: {
+ zoomOnRowDoubleClick : true,
+ zoomOnFeatureSelect : true,
+ zoomLevelPointSelect : 13,
+ separateSelectionLayer: true
+ }
+ });
+
+ new Ext.Window({
+ title: __('Click Map or Grid to Select - Double Click to Zoom to feature'),
+ layout: "fit",
+ x: 280,
+ y: 100,
+ height: 400,
+ width: 360,
+ items: [featurePanel]
+ }).show();
+
+ // FeaturePanel (now) needs explicit loading when no "store" configured
+ featurePanel.loadFeatures(features, features[0]['type']);
+ }
+
+ // HTTP endpoint: results are parsed as GeoJSON and formatted in JS object.
+ var http = new OpenLayers.Protocol.HTTP({
+ format: new OpenLayers.Format.GeoJSON()
+ });
+
+ // Async callback from Ajax XmlHttpRequest
+ var httpCallback = function (resp) {
+ if (resp.code == OpenLayers.Protocol.Response.SUCCESS) {
+ // Get Feature arrays from parsed response
+ var features = resp.features;
+
+ // Create the FeaturePanel
+ createFeaturePanelPopup(features);
+ } else {
+ alert('Error retrieving features');
+ }
+ };
+
+ // Invoke HTTP GET to read features from server
+ // Request is async: pass result to callback function
+ http.read({
+ url: 'data/addresses.json',
+ callback: httpCallback
+ });
});
@@ -0,0 +1,150 @@
+{
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "15",
+ "huisletter": "A",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JX"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155294.01,
+ 463066.28
+ ]
+ },
+ "id": "inspireadressen.2266615"
+ },
+
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "13",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JX"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155289.01,
+ 463070.81
+ ]
+ },
+ "id": "inspireadressen.2262390"
+ },
+
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "11",
+ "huisletter": "A",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JX"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155280.74,
+ 463072.68
+ ]
+ },
+ "id": "inspireadressen.2291796"
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "17",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JX"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155299.47,
+ 463060.82
+ ]
+ },
+ "id": "inspireadressen.2269301"
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "18",
+ "huisletter": "A",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JZ"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155303.37,
+ 463072.06
+ ]
+ },
+ "id": "inspireadressen.2272744"
+ },
+
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "15",
+ "huisletter": "G",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JX"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155291.04,
+ 463063.32
+ ]
+ },
+ "id": "inspireadressen.2284910"
+ },
+
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Nieuwstraat",
+ "huisnummer": "19",
+ "huisletter": "D",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811JX"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155303.69,
+ 463054.27
+ ]
+ },
+ "id": "inspireadressen.2301728"
+ },
+ {
+ "type": "Feature",
+ "properties": {
+ "straatnaam": "Stovestraat",
+ "huisnummer": "12",
+ "woonplaats": "Amersfoort",
+ "postcode": "3811KB"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ 155278.56,
+ 463060.75
+ ]
+ },
+ "id": "inspireadressen.2309017"
+ }
+ ]
+}
Oops, something went wrong.

0 comments on commit d3dd107

Please sign in to comment.