API tools faq
paste
Advertisement
Guest User

Map.html

a guest
Nov 28th, 2015
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta name="keywords" content="jQuery Splitter, AngularJS, Angular Splitter, AngularJS Splitter, Splitter Widget, Splitter, jqxSplitter" />
  5.    
  6.    <title id='Description'> Dairy Manager
  7.     </title>
  8.     <!-- dojo -->
  9.     <link rel="stylesheet" href="libs/dojo_toolkit/dijit/themes/soria/soria.css">
  10.     <script>dojoConfig = {parseOnLoad: true}</script>
  11.    
  12.     <script src="libs/dojo_toolkit/dojo/dojo.js" data-dojo-config="async: true,parseOnLoad: true, gfxRenderer: 'svg,silverlight,vml,canvas'"></script>
  13.    
  14.     <!-- jquery -->
  15.     <link rel="stylesheet" href="libs/jqwidgets/styles/jqx.base.css" type="text/css" />
  16.     <!-- bootstrap -->
  17.     <link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css" type="text/css" />
  18.  
  19.     <!-- jquery -->
  20.     <script type="text/javascript" src="libs/scripts/jquery-1.11.1.min.js"></script>
  21.     <script type="text/javascript" src="libs/jqwidgets/jqxcore.js"></script>
  22.     <script type="text/javascript" src="libs/jqwidgets/jqxsplitter.js"></script>
  23.    
  24.     <script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
  25.      
  26.     <!-- openlayers lib -->
  27.     <script type="text/javascript" src= "libs/OpenLayers-2.13.1/OpenLayers.js"></script>
  28.    
  29.     <!-- EXT lib-->
  30.     <link rel="stylesheet" type="text/css" href="libs/ext-3.4.1.1-gpl/ext-3.4.1/resources/css/ext-all.css">
  31.     <link rel="stylesheet" type="text/css" href="libs/ext-3.4.1.1-gpl/ext-3.4.1/resources/css/xtheme-gray.css">
  32.     <script type="text/javascript" src="libs/ext-3.4.1.1-gpl/ext-3.4.1/adapter/ext/ext-base.js"></script>
  33.     <script type="text/javascript" src="libs/ext-3.4.1.1-gpl/ext-3.4.1/ext-all-debug.js"></script>
  34.     <script type="text/javascript" src="libs/ext-3.4.1.1-gpl/ext-3.4.1/ext-all.js"></script>
  35.    
  36.     <!-- GeoExt resources -->
  37.     <link rel="stylesheet" type="text/css" href="libs/GeoExt-1.1/GeoExt/resources/css/popup.css">
  38.     <link rel="stylesheet" type="text/css" href="libs/GeoExt-1.1/GeoExt/resources/css/layerlegend.css">
  39.     <link rel="stylesheet" type="text/css" href="libs/GeoExt-1.1/GeoExt/resources/css/gxtheme-gray.css">
  40.     <script type="text/javascript" src="libs/GeoExt-1.1/GeoExt/script/GeoExt.js"></script>
  41.  
  42.     <script>
  43.     require(["dojo/parser","dojox/form/CheckedMultiSelect","dijit/form/Button","dijit/form/TextBox","dijit/form/DateTextBox", "dijit/layout/BorderContainer", "dojox/form/CheckedMultiSelect", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionPane"]);
  44.     /*dojo.require("dijit.form.Button");
  45.             dojo.require("dijit.form.TextBox");
  46.            
  47.             dojo.require("dijit.form.DateTextBox");*/
  48.     </script>
  49.    
  50.    
  51.     <style>
  52.     body{
  53.     padding-top:50px;
  54.     }
  55.     </style>
  56.    
  57.    
  58.     <script type="text/javascript">
  59.         $(document).ready(function () {
  60.             $('#mainSplitter').jqxSplitter({ width: '100%', height: 625, panels: [{ size: 200 }] });
  61.             $('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '75%', collapsible: false }] });
  62.         });
  63.     </script>
  64.    
  65.    
  66.    
  67.     <script>
  68.         OpenLayers.ProxyHost = "proxy/proxy.cgi?url=";
  69.    
  70.         var map;
  71.        
  72.         function init() {
  73.        
  74.                
  75.                 map = new OpenLayers.Map("map-id", {controls: []});
  76.                
  77.                 map.addControl(new OpenLayers.Control.Navigation());
  78.  
  79.                 map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
  80.                
  81.                 map.addControl(new OpenLayers.Control.ScaleLine());
  82.                        
  83.                 var position       = new OpenLayers.LonLat(36.99371,-1.25793);
  84.                 var zoom           = 15;
  85.                
  86.                
  87.                 //add layers
  88.                 var osm_layer= new OpenLayers.Layer.WMS("OpenStreetMap WMS",
  89.                             "https://ows.terrestris.de/osm/service?",
  90.                             {layers: 'OSM-WMS'},{isBaseLayer: true}
  91.                         );
  92.                
  93.                
  94.                 //geoserver wms layers
  95.                 var boundary= new OpenLayers.Layer.WMS("Ruai Area",
  96.                             "http://localhost:8080/geoserver/Dairy/wms",
  97.                             { layers: 'Dairy:ruai2', transparent: true},
  98.                             {isBaseLayer: false}
  99.                         );
  100.                
  101.                 var farmer_layer= new OpenLayers.Layer.WMS("Farmers",
  102.                             "http://localhost:8080/geoserver/Dairy/wms",
  103.                             {layers: 'Dairy:farmer', transparent: true},
  104.                             {opacity:0.5, isBaseLayer: false}
  105.                         );
  106.                        
  107.                
  108.                 var supplier_layer= new OpenLayers.Layer.WMS("Suppliers",
  109.                             "http://localhost:8080/geoserver/Dairy/wms",
  110.                             {layers: 'Dairy:suppliers', transparent: true},
  111.                             {isBaseLayer: false}
  112.                         );
  113.                        
  114.                 // wfs layer       
  115.                 var Supplier = new OpenLayers.Layer.Vector("Suppliers_selected", {
  116.                             strategies: [new OpenLayers.Strategy.Fixed()],
  117.                             protocol: new OpenLayers.Protocol.WFS({
  118.                             version: "1.1.0",
  119.                             url: "http://localhost:8080/geoserver/Dairy/wfs",
  120.                             featureType: "suppliers",
  121.                             featureNS: "http://localhost:8080/dairy",
  122.                             srsName: "EPSG:32737"
  123.                             }),
  124.                      
  125.                             filter: new OpenLayers.Filter.Comparison({
  126.                             type: OpenLayers.Filter.Comparison.LIKE,
  127.                             property: "name",
  128.                             value: "A*"
  129.                             })
  130.                            
  131.                         });
  132.              
  133.                 map.addLayers([osm_layer,farmer_layer]);
  134.                 map.setCenter(position, zoom);
  135.                 //supplier layer
  136.                 var supplier_style = new OpenLayers.Style(
  137.                                // the first argument is a base symbolizer
  138.                                // all other symbolizers in rules will extend this one
  139.                                {
  140.                                   strokeColor: "red",
  141.                                   strokeWidth: 3,
  142.                                   fillColor:'red',
  143.                                   pointRadius: 4,
  144.                                   strokeOpacity: 1,
  145.                                   fillOpacity : 2                                          
  146.                                }
  147.                             );
  148.                            
  149.                            
  150.                 var supplier_stylemap = new OpenLayers.StyleMap({'default': supplier_style});      
  151.                 // Define the GeoJSON layer
  152.                 var supplier_stlayer = new OpenLayers.Layer.Vector("Supplier_GJson", {
  153.                                projection: 'EPSG:32737',
  154.                                strategies: [new OpenLayers.Strategy.Fixed()],
  155.                                protocol: new OpenLayers.Protocol.HTTP({
  156.                                   url: "geojson_files/supplier_gjson.geojson",
  157.                                   format: new OpenLayers.Format.GeoJSON()
  158.                                }),
  159.                                styleMap: supplier_stylemap
  160.                             });
  161.                            
  162.                 map.addLayers([supplier_stlayer]);
  163.                            
  164.                 var selectCtrl = new OpenLayers.Control.SelectFeature(supplier_stlayer);           
  165.                        
  166.                 function createPopup(feature) {
  167.                    
  168.                     //var url = ' "src/geoext/resources/GeoEXT/Signage1.JPG" '
  169.                
  170.                     var bogusMarkup = "<strong> SUPPLIER CATEGORY : </strong> " + feature.attributes.Name +
  171.                     "</br> <strong> NAME : <strong> " + feature.attributes.Name_+
  172.                     "</br> <strong> PHONE NUMBER : <strong> " + feature.attributes.Contact;
  173.                    
  174.                     popup = new GeoExt.Popup({
  175.                    
  176.                         title: 'FEATURE PROPERTIES',
  177.                         location: feature,
  178.                         width:300,
  179.                         height:150,
  180.                         html: bogusMarkup,
  181.                         maximizable: true,
  182.                         collapsible: true
  183.                     });
  184.                     // unselect feature when the popup
  185.                     // is closed
  186.                     popup.on({
  187.                         close: function() {
  188.                             if(OpenLayers.Util.indexOf(supplier_stlayer.selectedFeatures,
  189.                                                        this.feature) > -1)
  190.                             {
  191.                                 selectCtrl.unselect(this.feature);
  192.                             }
  193.                         }
  194.                     });
  195.                     popup.show();
  196.                 }
  197.  
  198.                 // create popup on "featureselected"
  199.                 supplier_stlayer.events.on({
  200.                     featureselected: function(e) {
  201.                         createPopup(e.feature);
  202.                     }
  203.                 });
  204.                
  205.                 map.addControl(selectCtrl);
  206.                 selectCtrl.activate();
  207.  
  208.                    
  209.                 // create feature store, binding it to the vector parcel layer
  210.                 store = new GeoExt.data.FeatureStore({
  211.                     layer: supplier_stlayer,
  212.                     fields: [
  213.                         {name: 'Name', type: 'string'},
  214.                         {name: 'Contact', type: 'float'},
  215.                         {name: 'Name_', type: 'string'}
  216.                     ],
  217.                     proxy: new GeoExt.data.ProtocolProxy({
  218.                         protocol: new OpenLayers.Protocol.HTTP({
  219.                             url: "geojson_files/supplier_gjson.geojson",
  220.                             format: new OpenLayers.Format.GeoJSON()
  221.                             })
  222.                         })
  223.                     });
  224.  
  225.                 // create grid panel configured with feature store
  226.                
  227.                 gridPanel = new Ext.grid.GridPanel({
  228.                     title: "Suppliers Feature Grid",
  229.                     region: "center",
  230.                     store: store,
  231.                     height: 300,
  232.                     width: '100%',
  233.                     columns:[  
  234.                         {
  235.                             header: "Category",
  236.                             width: 150,
  237.                             dataIndex: "Name"
  238.                         }, {
  239.                             header: "Name",
  240.                             width: 150,
  241.                             dataIndex: "Name_"
  242.                         }, {
  243.                             header: "Phone number",
  244.                             width: 150,
  245.                             dataIndex: "Contact"
  246.                         }
  247.                     ],
  248.                     sm: new GeoExt.grid.FeatureSelectionModel()
  249.                 });
  250.                            
  251.                     // create a panel and add the map panel and grid panel
  252.                     // inside it
  253.                 mainPanel = new Ext.Panel({
  254.                         renderTo: "bottomPanel",
  255.                         //layout: "border",
  256.                         height: 300,
  257.                         width: 450,
  258.                         items: [gridPanel]
  259.                 });
  260.            
  261.                    
  262.         }   //close function init(){}
  263.        
  264.         //new function
  265.         function displayGeoJSON(jsondata){
  266.                         results = JSON.parse(jsondata);
  267.                        
  268.                         balls = JSON.stringify(jsondata);
  269.  
  270.                         alert (balls);
  271.         }
  272.        
  273.         function querySupplierLayer(){
  274.                    
  275.             valueSupplierName = document.getElementById('supp_name').value;
  276.                
  277.             var supplierbyNameStyl = new OpenLayers.Style(
  278.                // the first argument is a base symbolizer
  279.                // all other symbolizers in rules will extend this one
  280.                {
  281.                   strokeColor: 'yellow',
  282.                   strokeWidth: 3,
  283.                   fillColor:'orange',
  284.                   pointRadius: 8,
  285.                   strokeOpacity: 1,
  286.                   fillOpacity : 1
  287.                   //graphicYOffset: 0, // shift graphic up 28 pixels
  288.                },
  289.                 // the second argument is the set of rules
  290.                {
  291.                rules: [
  292.                   new OpenLayers.Rule({
  293.                        filter: new OpenLayers.Filter.Comparison({
  294.                         type: OpenLayers.Filter.Comparison.LIKE,
  295.                         property: "Name",
  296.                         value: valueSupplierName}) //valueSupplierName is value from placeholder input in query
  297.                         //symbolizer: {fillColor: '#aaee77', fillOpacity:.8,
  298.                                 //  pointRadius:14, strokeColor: '#669933',
  299.                                 //  strokeWidth:5}
  300.                      })
  301.                 ]}
  302.             );
  303.             var Supplierbynamemap = new OpenLayers.StyleMap({'default': supplierbyNameStyl});
  304.                
  305.                
  306.                 // Define the GeoJSON layer
  307.             var SupplierLayer = new OpenLayers.Layer.Vector("Query: Supplier = " + valueSupplierName, {
  308.                //projection: toProjection,
  309.                strategies: [new OpenLayers.Strategy.Fixed()],
  310.                protocol: new OpenLayers.Protocol.HTTP({
  311.                   url: "geojson_files/supplier_gjson.geojson",
  312.                   format: new OpenLayers.Format.GeoJSON()
  313.                }),
  314.                styleMap: Supplierbynamemap
  315.             });
  316.        
  317.             map.addLayers([SupplierLayer]);
  318.            
  319.            
  320.        
  321.         }
  322.        
  323.        
  324.        
  325.      
  326.      </script>
  327.      
  328. </head>
  329.  
  330.  
  331. <body onload = "init()" class="soria">
  332.  
  333.  
  334.     <nav class="navbar navbar-inverse navbar-fixed-top">
  335.       <div class="container">
  336.         <div class="navbar-header">
  337.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  338.             <span class="sr-only">Toggle navigation</span>
  339.             <span class="icon-bar"></span>
  340.             <span class="icon-bar"></span>
  341.             <span class="icon-bar"></span>
  342.           </button>
  343.           <a class="navbar-brand" href="#">Dairy Know-how</a>
  344.         </div>
  345.         <div id="navbar" class="collapse navbar-collapse">
  346.           <ul class="nav navbar-nav">
  347.             <li class="active"><a href="#">Home</a></li>
  348.             <li><a href="#about">About</a></li>
  349.             <li><a href="#contact">Contact</a></li>
  350.           </ul>
  351.         </div><!--/.nav-collapse -->
  352.       </div>
  353.     </nav>
  354.  
  355.     <div id="mainSplitter">
  356.         <div>
  357.             Query Skeleton
  358.              
  359.              <strong> Search By : </strong> </br></br>
  360.                
  361.                 <input type = "radio" id = "SupplierName" name = "Supplier_name" checked = "checked" data-dojo-type = "dijit/form/RadioButton" > Supplier Category: </br>(e.g. Agrovet,Hay,Molasses,Vet) </input></br>
  362.                 <input type = "text" name = "supp_name" placeholder = "Enter Name" class = "txtbox" id = "supp_name" data-dojo-type = "dijit/form/TextBox" /></br>
  363.                 <button dojoType="dijit.form.Button" onclick = "querySupplierLayer()" type="submit" name="submitSupplierName" value="Supplier_name" class="myButton" tabIndex=> Search</button> </br></br>
  364.              
  365.              
  366.              
  367.  
  368.         </div>
  369.         <div>
  370.             <div id="rightSplitter">
  371.                 <div id = "map-id">
  372.                     Map Panel
  373.                 </div>
  374.                 <div id= "bottomPanel">  
  375.                 </div>
  376.             </div>
  377.         </div>
  378.     </div>
  379. </body>
  380. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!