Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using group optional attribute to create an hierarchical layer tree #355

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Using group optional attribute to create an hierarchical layer tree #355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f37309
hierarchical layer trees
jgrocha May 2, 2015
df4ec85
Handle tree nodes without associated layer
jgrocha May 3, 2015
00442e3
Layer tree-hierarchy example
jgrocha May 4, 2015
f7c68db
Bug fix
jgrocha May 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions examples/tree/tree-hierarchy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>GeoExt Tree Components</title>

<!-- ExtJS -->
<script type="text/javascript" src="../include-ext.js"></script>
<script type="text/javascript" src="../options-toolbar.js"></script>

<!-- Basic example styling -->
<link rel="stylesheet" type="text/css" href="../shared/example.css" />

<!-- Load specific css based on selected theme -->
<script src="../shared/theme.js"></script>

<!-- 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="tree-hierarchy.js"></script>

</head>
<body>
<div id="desc">
<h1>GeoExt.tree Components</h1>

<p>This example shows how to work with a hierarchy layer tree.</p>

<p>Each layer can have an optional <code>group</code> attribute. The <code>group</code> attribute can have <code>'/'</code> to create the hierarchy, like:
<pre><code>group: 'Additional layers/World/Administrative'</code></pre>
</p>

<p>If no group attribute is assigned, the layer goes by to either the <code>baseLayers</code> or <code>otherLayers</code> group. The default labels for these two groups are:

<pre><code>baseLayersText: "Base layers",
otherLayersText: "Other layers"
</code></pre>

These labels can be changed.
</p>






<p>The js is not minified so it is readable. See
<a href="tree-hierarchy.js">tree-hierarchy.js</a>.</p>

</div>
</body>
</html>
140 changes: 140 additions & 0 deletions examples/tree/tree-hierarchy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/*
* Copyright (c) 2008-2015 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.
*/

Ext.require([
'Ext.container.Viewport',
'Ext.layout.container.Border',
'GeoExt.tree.Panel',
'Ext.tree.plugin.TreeViewDragDrop',
'GeoExt.panel.Map',
'GeoExt.tree.OverlayLayerContainer',
'GeoExt.tree.BaseLayerContainer',
'GeoExt.data.LayerTreeModel',
'GeoExt.tree.View',
'GeoExt.tree.Column',
'GeoExt.tree.LayerTreeBuilder'
]);

var mapPanel, tree;

Ext.application({
name: 'Tree',
launch: function() {
// create a map panel with some layers that we will show in our layer tree
// below.
mapPanel = Ext.create('GeoExt.panel.Map', {
border: true,
region: "center",
// we do not want all overlays, to try the OverlayLayerContainer
map: {allOverlays: false},
center: [14, 37.5],
zoom: 7,
layers: [
new OpenLayers.Layer.WMS("Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms", {
layers: "bluemarble",
format: "image/png8"
}, {
buffer: 0,
visibility: false,
group: 'World base maps/Imagery'
}
),
new OpenLayers.Layer.WMS("OpenStreetMap WMS",
"http://ows.terrestris.de/osm/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>',
group: 'World base maps/Vector'
}
),
new OpenLayers.Layer.WMS("Country Borders",
"http://ows.terrestris.de/geoserver/osm/wms", {
layers: "osm:osm-country-borders",
transparent: true,
format: "image/png"
}, {
isBaseLayer: false,
resolutions: [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625
],
buffer: 0,
group: 'Additional layers/World/Administrative'
}
),
new OpenLayers.Layer.WMS("Gas Stations",
"http://ows.terrestris.de/geoserver/osm/wms", {
layers: "osm:osm-fuel",
transparent: true,
format: "image/png"
}, {
isBaseLayer: false,
buffer: 0
}
),
new OpenLayers.Layer.WMS("Bus Stops",
"http://ows.terrestris.de/osm-haltestellen?",
{
layers: 'OSM-Bushaltestellen',
format: 'image/png',
transparent: true
},
{
singleTile: true,
visibility: false
}
)
]
});

var novatree = Ext.create('GeoExt.tree.LayerTreeBuilder', {
enableWmsLegends: false,
enableVectorLegends: false,
otherLayersText: 'Utilities',
border: true,
layerStore: mapPanel.layers,
region: "west",
title: "Layers",
width: 250,
split: true,
collapsible: true,
collapseMode: "mini",
autoScroll: true
});

Ext.create('Ext.Viewport', {
layout: "fit",
hideBorders: true,
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, novatree, {
contentEl: "desc",
region: "east",
bodyStyle: {"padding": "5px"},
collapsible: true,
collapseMode: "mini",
split: true,
width: 200,
title: "Description"
}]
}
});
}
});
112 changes: 112 additions & 0 deletions src/GeoExt/tree/LayerGroupContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/*
* Copyright (c) 2008-2012 The Open Source Geospatial Foundation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please bump the copyright date (2008-2015)

*
* Published under the BSD license.
* See https://github.com/geoext/geoext2/blob/master/license.txt for the full
* text of the license.
*/

/*
* @include GeoExt/tree/LayerContainer.js
* @include GeoExt/container/WmsLegend.js
* @include GeoExt/container/VectorLegend.js
* @include GeoExt/data/LayerStore.js
*/

/**
*
*/
Ext.define('GeoExt.tree.LayerGroupContainer', {
extend: 'GeoExt.tree.LayerContainer',
requires: [
'GeoExt.container.WmsLegend',
'GeoExt.container.VectorLegend',
'GeoExt.data.LayerStore'
],
alias: 'plugin.gx_layergroupcontainer',

defaultText: 'Layers',

enableLegends: true,

enableWmsLegends: true,

enableVectorLegends: true,

layerGroup: null,

/**
* @private
*/
init: function(target) {
var me = this,
loader = me.loader,
createNode,
superProto = GeoExt.tree.LayerLoader.prototype;

// set the 'createNode' method for the loader
if (me.enableLegends) {
createNode = function(attr) {
if (attr.layer.href) {
attr.href = attr.layer.href;
attr.cls = 'linknode';
if (attr.layer.hrefTarget) attr.hrefTarget = attr.layer.hrefTarget;
}
if (attr.layer.qtip) attr.qtip = attr.layer.qtip;
var record = this.store.getByLayer(attr.layer),
layer = record.getLayer();

if (layer instanceof OpenLayers.Layer.WMS &&
me.enableWmsLegends
) {
attr.component = {
xtype: "gx_wmslegend",
layerRecord: record,
showTitle: false,
hidden: !layer.visibility || layer.hideInLegend
|| !layer.inRange,
cls: "gx-layertreebuilder-legend"
};
} else if (layer instanceof OpenLayers.Layer.Vector &&
me.enableVectorLegends
) {
attr.component = {
xtype: "gx_vectorlegend",
layerRecord: record,
showTitle: false,
hidden: !layer.visibility || layer.hideInLegend
|| !layer.inRange,
cls: "gx-layertreebuilder-legend"
};
}

if (layer.hideInLegend) {
record.set("hideInLegend", layer.hideInLegend);
}

return superProto.createNode.call(this, attr);
}
}
else {
createNode = function(attr) {
return superProto.createNode.call(this, attr);
}
}

// set the loader
me.loader = Ext.applyIf(loader || {}, {
baseAttrs: Ext.applyIf((loader && loader.baseAttrs) || {}, {
uiProvider: "custom_ui",
layerGroup: this.layerGroup
}),
createNode: createNode,
filter: function(record) {
var layer = record.getLayer();
return layer.displayInLayerSwitcher === true &&
layer.options.group === this.baseAttrs.layerGroup;
}
});

me.callParent(arguments);
}
});
Loading