From 11c20e9609c07a3bbec1702f2e5052ce3182e3b6 Mon Sep 17 00:00:00 2001 From: alrocar Date: Sat, 11 Feb 2012 19:02:08 +0100 Subject: [PATCH 1/2] Added OverviewMap plugin and two demo examples of the plugin --- examples/viewer-overviewmap-osm.html | 31 +++++ examples/viewer-overviewmap-osm.js | 101 ++++++++++++++++ examples/viewer-overviewmap.html | 31 +++++ examples/viewer-overviewmap.js | 113 ++++++++++++++++++ src/script/plugins/OverviewMap.js | 165 +++++++++++++++++++++++++++ 5 files changed, 441 insertions(+) create mode 100644 examples/viewer-overviewmap-osm.html create mode 100644 examples/viewer-overviewmap-osm.js create mode 100644 examples/viewer-overviewmap.html create mode 100644 examples/viewer-overviewmap.js create mode 100644 src/script/plugins/OverviewMap.js diff --git a/examples/viewer-overviewmap-osm.html b/examples/viewer-overviewmap-osm.html new file mode 100644 index 00000000..9112f59a --- /dev/null +++ b/examples/viewer-overviewmap-osm.html @@ -0,0 +1,31 @@ + + + + Viewer with OverviewMap + + + + + + + + + + + + + + + + + + + +

Viewer with OverviewMap

+

This example shows a map viewer and the OverviewMap plugin configured with a OSM layer.

+ +

The js is not minified so it is readable. + See viewer-overviewmap-osm.js.

+ + + diff --git a/examples/viewer-overviewmap-osm.js b/examples/viewer-overviewmap-osm.js new file mode 100644 index 00000000..ce44120c --- /dev/null +++ b/examples/viewer-overviewmap-osm.js @@ -0,0 +1,101 @@ +var app; +Ext.onReady(function() { + app = new gxp.Viewer({ + proxy: "/geoserver/rest/proxy?url=", + portalConfig: { + renderTo: document.body, + layout: "border", + width: 600, + height: 400, + border: false, + items: [{ + xtype: "panel", + region: "center", + border: false, + layout: "fit", + items: ["map-viewport"] + }, { + id: "tree-container", + xtype: "container", + layout: "fit", + region: "west", + width: 200 + }] + }, + + // configuration of all tool plugins for this application + tools: [{ + ptype: "gxp_layertree", + outputConfig: { + id: "tree", + border: true, + tbar: [] // we will add buttons to "tree.bbar" later + }, + outputTarget: "tree-container" + }, { + ptype: "gxp_zoomtoextent", + actionTarget: "map.tbar" + }, { + ptype: "gxp_zoom", + actionTarget: "map.tbar" + }, { + ptype: "gxp_navigationhistory", + actionTarget: "map.tbar" + }, { + ptype: "gxp_overviewmap", + layer: { + source: "osm", + name: "mapnik" + }, + mapOptions: { projection: "EPSG:900913" }, + size : [120, 100] + }], + + // layer sources + defaultSourceType: "gxp_wmssource", + sources: { + local: { + title: "Local GeoServer", + url: "/geoserver/wms", + version: "1.1.1" + }, + suite: { + title: "Remote GeoServer", + url: "http://v2.suite.opengeo.org/geoserver/wms", + version: "1.1.1" + }, + google: { + ptype: "gxp_googlesource" + }, + osm: { + ptype: "gxp_osmsource" + } + }, + + // map and layers + map: { + id: "map-viewport", // id needed to reference map in items above + title: "Map", + projection: "EPSG:900913", + units: "m", + maxResolution: 156543.0339, + maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34], + center: [-10764594.758211, 4523072.3184791], + zoom: 3, + layers: [{ + source: "google", + name: "TERRAIN", + group: "background" + }, { + source: "local", + name: "usa:states", + selected: true + }], + items: [{ + xtype: "gx_zoomslider", + vertical: true, + height: 100 + }] + } + }); +}); diff --git a/examples/viewer-overviewmap.html b/examples/viewer-overviewmap.html new file mode 100644 index 00000000..7a4f48ab --- /dev/null +++ b/examples/viewer-overviewmap.html @@ -0,0 +1,31 @@ + + + + Viewer with OverviewMap + + + + + + + + + + + + + + + + + + + +

Viewer with OverviewMap

+

This example shows a map viewer and the OverviewMap plugin configured with a WMS layer.

+ +

The js is not minified so it is readable. + See viewer-overviewmap.js.

+ + + diff --git a/examples/viewer-overviewmap.js b/examples/viewer-overviewmap.js new file mode 100644 index 00000000..b4f0350f --- /dev/null +++ b/examples/viewer-overviewmap.js @@ -0,0 +1,113 @@ +var app; +Ext.onReady(function() { + app = new gxp.Viewer({ + proxy: "/geoserver/rest/proxy?url=", + portalConfig: { + renderTo: document.body, + layout: "border", + width: 600, + height: 400, + border: false, + items: [{ + xtype: "panel", + region: "center", + border: false, + layout: "fit", + items: ["map-viewport"] + }, { + id: "tree-container", + xtype: "container", + layout: "fit", + region: "west", + width: 200 + }] + }, + + // configuration of all tool plugins for this application + tools: [{ + ptype: "gxp_layertree", + outputConfig: { + id: "tree", + border: true, + tbar: [] // we will add buttons to "tree.bbar" later + }, + outputTarget: "tree-container" + }, { + ptype: "gxp_zoomtoextent", + actionTarget: "map.tbar" + }, { + ptype: "gxp_zoom", + actionTarget: "map.tbar" + }, { + ptype: "gxp_navigationhistory", + actionTarget: "map.tbar" + }, { + ptype: "gxp_overviewmap", + layer: { + source: "ol", + type: "OpenLayers.Layer.WMS", + name: "Catastro_", + "args" : [ + "Catastro", + "http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx", + { + "layers" : "Catastro", + "type" : "jpeg", + "isBaseLayer": false + } + ], + visibility : true, + group: "background" + }, + mapOptions: { projection: "EPSG:4326" }, + size : [120, 100] + }], + + // layer sources + defaultSourceType: "gxp_wmssource", + sources: { + local: { + title: "Local GeoServer", + url: "/geoserver/wms", + version: "1.1.1" + }, + suite: { + title: "Remote GeoServer", + url: "http://v2.suite.opengeo.org/geoserver/wms", + version: "1.1.1" + }, + google: { + ptype: "gxp_googlesource" + }, + ol: { + ptype: "gxp_olsource" + } + }, + + // map and layers + map: { + id: "map-viewport", // id needed to reference map in items above + title: "Map", + projection: "EPSG:900913", + units: "m", + maxResolution: 156543.0339, + maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34], + center: [-42346.11366998777, 4789773.503433999], + zoom: 7, + layers: [{ + source: "google", + name: "TERRAIN", + group: "background" + }, { + source: "local", + name: "usa:states", + selected: true + }], + items: [{ + xtype: "gx_zoomslider", + vertical: true, + height: 100 + }] + } + }); +}); diff --git a/src/script/plugins/OverviewMap.js b/src/script/plugins/OverviewMap.js new file mode 100644 index 00000000..025f5e92 --- /dev/null +++ b/src/script/plugins/OverviewMap.js @@ -0,0 +1,165 @@ +/** + * Copyright (c) 2012 Prodevelop S.L. + * + * Published under the GPL license. + * See https://github.com/opengeo/gxp/raw/master/license.txt for the full text + * of the license. + */ + + /** + * @requires plugins/Tool.js + * @requires OpenLayers/Control/OverviewMap.js + * @requires OpenLayers/Layer/OSM.js + * @requires OpenLayers/Layer/WMS.js + * @requires OpenLayers/Bounds.js + */ + + +/** api: (define) + * module = gxp.plugins + * class = OverviewMap + * base_link = `gxp.plugins.Tool `_ + */ + +/** api: (extends) + * plugins/Tool.js + */ +Ext.namespace("gxp.plugins"); + +/** api: constructor + * .. class:: OverviewMap(config) + * + * Provides a OverviewMap + * requires ``OpenLayers.Control.OverviewMap``, ``OpenLayers.Layer.OSM``, ``OpenLayers.Layer.WMS``, ``OpenLayers.Bounds``, ``gxp.plugins.Tool`` + * + * .. code-block:: javascript + * + * { + * ptype: "gxp_overviewmap", + * //layerName: "OpenStreetMap", //you can provide either a layerName already added to the map or a layer object + * layer: { + * source: "ol", + * type: "OpenLayers.Layer.WMS", + * name: "Catastro_", + * "args" : [ + * "Catastro", + * "http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx", + * { + * "layers" : "Catastro", + * "type" : "jpeg", + * "isBaseLayer": false + * } + * ], + * visibility : true, + * fixed: true, + * selected: false, + * group: "background" + * }, + * mapOptions: { projection: "EPSG:4326" }, + * size : [220, 200] + * } + * + */ +gxp.plugins.OverviewMap = Ext.extend(gxp.plugins.Tool, { + + /** api: ptype = gxp_overviewmap */ + ptype: "gxp_overviewmap", + + /** api: config[mapOptions] + * ``Object`` The options object of the ``OpenLayers.Control.OverviewMap`` + */ + mapOptions: null, + + /** api: config[layerName] + * ``String`` The name of a ``OpenLayers.Layer.OSM`` or ``OpenLayers.Layer.WMS`` layer already added to the map + */ + layerName: null, + + added: false, + + /** api: config[layer] + * ``Object`` A layer configuration object + */ + layer: null, + + /** private: method[constructor] + */ + constructor: function(config) { + gxp.plugins.OverviewMap.superclass.constructor.apply(this, arguments); + }, + + /** private: method[constructor] + */ + init: function(target) { + gxp.plugins.OverviewMap.superclass.init.apply(this, arguments); + target.on("ready", this.addOverviewMap, this); + }, + + /** api: method[addOverviewMap] + * + * Adds the ``OpenLayers.Control.OverviewMap`` to the map. If a ``layerName`` property is provided, it will try to load it into the ``OpenLayers.Control.OverviewMap`` otherwise it will try to instantiate a ``layer`` + */ + addOverviewMap : function() { + var map = this.target.mapPanel.map; + if (map.layers.length <= 0 && this.layerName) { + return; + } + if (this.added) { + return; + } + + //first instantiate the layer defined in the OverviewMap + var lyr; + if (this.layerName) { + var lyrs = map.getLayersByName(this.layerName); + if (lyrs && lyrs.length > 0) { + var lyr_ = lyrs[0].clone(); + delete lyr_.params["ISBASELAYER"]; + if (lyr_ instanceof OpenLayers.Layer.OSM) { + lyr = new OpenLayers.Layer.OSM(); + } else { + lyr = new OpenLayers.Layer.WMS("OverviewMap", + lyr_.url, + {layers: lyr_.params.LAYERS}, lyr_.options); + } + } else { + throw new Error("The layer of the OverviewMap cannot be found in the Map"); + } + } else { + if (this.layer) { + var source = this.target.layerSources[this.layer.source]; + + if (source) { + record = source.createLayerRecord(this.layer); + lyr = record.getLayer(); + } + } + } + + var size = this.initialConfig.size || [200, 220]; + + if (this.mapOptions && this.mapOptions.maxExtent) { + this.mapOptions.maxExtent = OpenLayers.Bounds.fromArray(this.mapOptions.maxExtent); + } + + //create the OverviewMap object + var mconopt = { + size : new OpenLayers.Size(size[0],size[1]), + layers : [ lyr ] + }; + mconopt.mapOptions = this.mapOptions; + + //we attach the OverviewMap to a div if the outputTarget was specified + if (this.initialConfig.outputTarget) { + var divComp = Ext.get(this.initialConfig.outputTarget); + mconopt.div = divComp.dom; + } + + //finally add the control to the map + map.addControl(new OpenLayers.Control.OverviewMap(mconopt)); + this.added = true; + } + +}); + +Ext.preg(gxp.plugins.OverviewMap.prototype.ptype, gxp.plugins.OverviewMap); \ No newline at end of file From b7de51cc5a5e10c45826381df1c90c30ddade149 Mon Sep 17 00:00:00 2001 From: alrocar Date: Sat, 11 Feb 2012 19:45:01 +0100 Subject: [PATCH 2/2] Added OverviewMap.js to loader.js --- src/script/loader.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/script/loader.js b/src/script/loader.js index 4dd7b342..a36421bd 100644 --- a/src/script/loader.js +++ b/src/script/loader.js @@ -93,6 +93,7 @@ "plugins/Print.js", "plugins/LoadingIndicator.js", "plugins/Playback.js", + "plugins/OverviewMap.js", "locale/es.js", "locale/ca.js" );