PSaaS GeoExt2 Prototype GUI

by spydmobile

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">
<link rel="stylesheet" href="http://openlayers.org/api/2.13/theme/default/style.css">
<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-dev.js"></script>
<div id="desc"></div>

CSS

*:focus {
    outline: none;
}
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

JavaScript

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false,
    paths: {
        GeoExt: "http://geoext.github.com/geoext2/src/GeoExt/",
        Ext: "http://cdn.sencha.com/ext/gpl/4.2.1/src"
    }
});

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.container.WmsLegend',
    'GeoExt.container.UrlLegend',
    'GeoExt.container.VectorLegend',
    'GeoExt.panel.Legend',
    'Ext.Window',
    'GeoExt.window.Popup']);

var mapPanel, tree, map, legendPanel, selectCtrl, features;
var arrLayers = [];
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var epsg900913 = new OpenLayers.Projection('EPSG:900913');
var geoserver = "http://gs.vm.sparcsonline.com/geoserver/wms";
var format = 'image/png';
var proxyurl = "http://www.sparcsonline.com/tng/sparcsmap/getinfo?t=smjs&url=";

          OpenLayers.ProxyHost = proxyurl;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

var extent = new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34).transform(epsg4326, epsg900913);
   // here we choose geodesic measures, solves accuracy problems in northern regions
    OpenLayers.Control.Measure.prototype.geodesic = true;
var resolutions = OpenLayers.Layer.Bing.prototype.serverResolutions.slice(16, 20);
map = new OpenLayers.Map('map', {
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34),
      numZoomLevels: 22,
    units: 'm',
   // restrictedExtent: extent,
    controls: [
    new OpenLayers.Control.PanZoomBar(),
    new OpenLayers.Control.Navigation(),
        
    new OpenLayers.Control.ScaleLine(),
    new OpenLayers.Control.MousePosition()],
    projection: epsg900913,
    displayProjection:...