Adding controls and fuctionalities to the map

[المشرف العام]

Can someone please help me how to do this tool bar. I've trying to do it on my own but as a beginner, I'm failing. Attached is the picture of what I need you guys to help me do.

Thanks!

Below is my code:

// custom layer node UI classvar LayerNodeUI = Ext.extend( GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());

Ext.onReady(function() { Ext.QuickTips.init();

var map = new OpenLayers.Map({ controls:[ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.ScaleLine({geodesic: true}), new OpenLayers.Control.Permalink('Cursor Position'), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.Attribution()], maxExtent: new OpenLayers.Bounds(1247348.5486233, -4263307.2348958, 4260801.9513187, -2448386.4355452)}); //adding more controls to the map(area, length and so on...)

var length = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, { eventListeners: { measure: function(evt) { alert("The length was " + evt.measure + evt.units); } }});

var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, { eventListeners: { measure: function(evt) { alert("The area was " + evt.measure + evt.units); } }});

mapPanel.map.addControl(length);mapPanel.map.addControl(area);

var toggleGroup = "measure controls";

var lengthButton = new Ext.Button({ text: 'Measure Length', enableToggle: true, toggleGroup: toggleGroup, handler: function(toggled){ if (toggled) { length.activate(); } else { length.deactivate(); } }});

var area = new Ext.Button({ text: 'Measure Area', enableToggle: true, toggleGroup: toggleGroup, handler: function(toggled){ if (toggled) { area.activate(); } else { area.deactivate(); } }});

//End of adding more controls to the map(area, length and so on...)

// Creating a control instance

var osm_layer = new OpenLayers.Layer.OSM();// create MapPanel with center-point in epsg 3857!

var mapPanel = new GeoExt.MapPanel({ title: " RURAL ROAD ASSET MANAGEMENT SYSTEM ", region: "center", height: 400, width: 300, map: map, center: new OpenLayers.LonLat(3094067.15174,-2937583.41650).transform( ([3094067.15174,-2937583.41650], 'EPSG:4326', 'EPSG:3857')), zoom: 11 //center: ol.proj.transform([27.795971,-25.609990], 'EPSG:4326', 'EPSG:3857'),});// create wms layer var wmsLayer1 = new OpenLayers.Layer.WMS( "South Africa", "http://gis.lib.virginia.edu:8080/geoserver/South_Africa/wms", { layers: 'South_Africaonet_polygon', transparent: true }, { isBaseLayer: false, displayOutsideMaxExtent: true });

var wmsLayer = new OpenLayers.Layer.WMS( "Outer layer", "http://gis.lib.virginia.edu:8080/geoserver/South_Africa/wms", { layers: 'South_Africaopoint_point', transparent: true }, { isBaseLayer: false, //displayOutsideMaxExtent: true }); var city = new OpenLayers.Layer.WMS("Madibeng City", "http://localhost:8080/geoserver/cite/wms", { layers: "topp:Madibeng0", transparent: true, format: "image/gif" }, { buffer: 0 });var road = new OpenLayers.Layer.WMS("Madibeng Road Network", "http://localhost:8080/geoserver/cite/wms", { layers: "Madibeng_LM_RoadNetwork0", transparent: true, format: "image/gif" }, { buffer: 0 });var pave = new OpenLayers.Layer.WMS("Madibeng Paved Locations", "http://localhost:8080/geoserver/cite/wms", { layers: "topp:Verf_Paved0", transparent: true, format: "image/gif" }, { buffer: 0 });// add Layers

map.addLayers([wmsLayer1, wmsLayer, city, road, pave, osm_layer]);var tree = new Ext.tree.TreePanel({ region: "west", title: "Layers", width: 250, autoScroll: true, enableDD: true,// apply the tree node component plugin to layer nodes plugins: [{ ptype: "gx_treenodecomponent" }], loader: { applyLoader: false, uiProviders: { "custom_ui": LayerNodeUI } }, root: { nodeType: "gx_layercontainer", loader: { baseAttrs: { uiProvider: "custom_ui" }, createNode: function(attr) { // add a WMS legend to each node created attr.component = { xtype: "gx_wmslegend", layerRecord: mapPanel.layers.getByLayer(attr.layer), showTitle: false, // custom class for css positioning // see tree-legend.html cls: "legend" } return GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr); } } }, rootVisible: false, lines: false });

new Ext.Viewport({ layout: "fit", hideBorders: true, items: { layout: "border", items: [ mapPanel, tree, { contentEl: desc, region: "east", width: 250, bodyStyle: {padding: "5px"} } ] }});});



أكثر...