Last active
September 9, 2017 21:49
-
-
Save HaydenElza/9e0920b51f33c60d139a to your computer and use it in GitHub Desktop.
Format GeoServer getCapabilities into a table with layers and download links.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Coastal Data Access Matrix</title> | |
| <style> | |
| .Layers-Table { | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 14px; | |
| font-weight: normal; | |
| border-left: 1px solid black; | |
| border-bottom: 1px solid black; | |
| } | |
| .Layers-Table th { | |
| background-color: #494A4A; | |
| color: white; | |
| border-right: 1px solid black; | |
| border-top: 1px solid black; | |
| } | |
| .Layers-Table th * { | |
| color: white; | |
| } | |
| .Layers-Table th, .Layers-Table td { | |
| padding: 10px 15px 10px 15px; | |
| text-align: center; | |
| } | |
| .Layers-Table td { | |
| border-right: 1px solid black; | |
| border-top: 1px solid black; | |
| text-align: center; | |
| } | |
| .layer-col { | |
| max-width: 346px; | |
| word-wrap: break-word; | |
| } | |
| .dl-links { | |
| position: relative; | |
| color: #494A4A; | |
| font-size: 11px; | |
| font-weight: bold; | |
| } | |
| .dl-links:hover { | |
| color: #666; | |
| text-decoration: underline; | |
| } | |
| .dl-links:visited { | |
| color: #8C69B1; | |
| } | |
| .Archive-Table { | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 14px; | |
| font-weight: normal; | |
| text-align: left; | |
| } | |
| .Archive-Title { | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .Archive-Table a { | |
| color: #000000; | |
| text-decoration: underline; | |
| } | |
| .Archive-Table a:hover { | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main table of layers, generated by the js below --> | |
| <table id="output" class="Layers-Table" cellspacing="0" cellpadding="0"></table> | |
| <br> | |
| <!-- List of archives available --> | |
| <table class="Archive-Table" cellspacing="0" cellpadding="0" border="0"> | |
| <tr><td> | |
| <div class="Archive-Title">Green Bay Storm Events: March 2003 - Sept 2015</div> | |
| <a href="http://144.92.44.184/data-archive/Green_Bay_NEXRAD_Storm_Events_Mar2003_Sept2015.zip">Download ZIP</a> | |
| <br> | |
| <em>This dataset consists of Level II weather radar data collected from Next-Generation Radar (NEXRAD) stations located in Green Bay, WI. Storm events were collected between March 2003 and September 2015.</em> | |
| <br> | |
| <br> | |
| </td></tr> | |
| <!--<tr><td> | |
| <div class="Archive-Title">Green Bay Storm Events: March 2003 - Sept 2015</div> | |
| <a href="http://144.92.44.184/data-archive/Green_Bay_NEXRAD_Storm_Events_Mar2003_Sept2015.zip">Download ZIP</a> | |
| <br> | |
| <em>This dataset consists of Level II weather radar data collected from Next-Generation Radar (NEXRAD) stations located in Green Bay, WI. Storm events were collected between March 2003 and September 2015.</em> | |
| <br><br> | |
| </td></tr>--> | |
| </table> | |
| <!-- Load jquery and Open Layers --> | |
| <script src="js/jquery-1.11.3.js"></script> | |
| <script src="js/ol.js"></script> | |
| <!-- or CDNs if you like --> | |
| <!--<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>--> | |
| <!-- Generate Layers Table --> | |
| <script> | |
| // Define parser | |
| var parser = new ol.format.WMSCapabilities(); | |
| // Get capabilites from server | |
| $.ajax('http://144.92.44.184/geoserver/wms/filedata?request=GetCapabilities').then(function(response){ | |
| // Parse response, create json, load into object | |
| var result = parser.read(response); | |
| var json = window.JSON.stringify(result, null, 2); | |
| var obj = JSON.parse(json); | |
| // Table Header | |
| var table_rows = '<tr><th style="text-align:left;">Layer</th><th>SHP</th><th>KML</th><th>GeoJSON</th><th>PNG</th><th>Metadata</th></tr>' | |
| // For each layer in get capabilities | |
| for (var lyr in obj.Capability.Layer.Layer) { | |
| // Filter out hydrologic layers by skipping over in loop | |
| if ((obj.Capability.Layer.Layer[lyr].Title).indexOf("ntp") > -1) { continue; } | |
| // Set max size of png (neither width or height will exceed) | |
| var max_size = 768 //Math.max(window.innerWidth,window.innerHeight) | |
| // Calculate the aspect ratio of the layer, asign the larger dimension the max size and calculate the other | |
| var aspect_ratio = Math.abs(obj.Capability.Layer.Layer[lyr].EX_GeographicBoundingBox[0]-obj.Capability.Layer.Layer[lyr].EX_GeographicBoundingBox[2])/Math.abs(obj.Capability.Layer.Layer[lyr].EX_GeographicBoundingBox[1]-obj.Capability.Layer.Layer[lyr].EX_GeographicBoundingBox[3]); | |
| if (aspect_ratio >= 1) { | |
| var width = max_size | |
| var height = parseInt(max_size/aspect_ratio) | |
| } else { | |
| var width = parseInt(max_size*aspect_ratio) | |
| var height = max_size | |
| } | |
| // Metadata Prep, not all layers have metadata | |
| if (typeof obj.Capability.Layer.Layer[lyr].MetadataURL != "undefined") { | |
| var metadata = '<a class="dl-links" href="' + obj.Capability.Layer.Layer[lyr].MetadataURL[0].OnlineResource + '" target="_blank">metadata</a>' | |
| } else { | |
| // If there is no metadata availiable we need to use a non-breaking space otherwise the cell border will not display in firefox or safari | |
| var metadata = " " | |
| } | |
| // Generate html for table | |
| if (obj.Capability.Layer.Layer.hasOwnProperty(lyr)) { | |
| var row = '<tr><td class="layer-col" style="text-align:left;">' + obj.Capability.Layer.Layer[lyr].Title + '</td><td><a class="dl-links" href="http://144.92.44.184/geoserver/UWSeaGrant/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=' + obj.Capability.Layer.Layer[lyr].Name + '&outputFormat=SHAPE-ZIP" target="_blank">.shp</a></td><td><a class="dl-links" href="http://144.92.44.184/geoserver/UWSeaGrant/wms/kml?layers=' + obj.Capability.Layer.Layer[lyr].Name + '" target="_blank">.kml</a></td><td><a class="dl-links" href="http://144.92.44.184/geoserver/UWSeaGrant/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=' + obj.Capability.Layer.Layer[lyr].Name + '&outputFormat=application/json" target="_blank">.geojson</a></td><td><a class="dl-links" href="http://144.92.44.184/geoserver/UWSeaGrant/wms?service=WMS&version=1.1.0&request=GetMap&layers=' + obj.Capability.Layer.Layer[lyr].Name + '&styles=&bbox=' + obj.Capability.Layer.Layer[lyr].EX_GeographicBoundingBox + '&width=' + width + '&height=' + height + '&srs=CRS:84&format=image/png" target="_blank">.png</a></td><td>' + metadata + '</td></tr>' | |
| var table_rows = table_rows + row | |
| } | |
| }; | |
| // Set content of output table | |
| $('#output').html(table_rows); | |
| // Message parent at wicoastalatlas.net the height of the table | |
| window.parent.postMessage( | |
| // Get height of the content | |
| document.body.scrollHeight | |
| // Set origin otherWindow must be for event to be dispatched | |
| ,"http://www.wicoastalatlas.net" | |
| ) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi ,
i am beginner in programming with javascript and web map application.
thank you very much for your code , indeed it retrieves the list of layers in geoserver , but what i am looking for is to retrive the list of time dimension of a given layer.
i have tried to change the attributes in your code but i get nothing , for example i tried " for lyr in obj.Capability.Layer.Layer.Dimension {alert (lyr )}" only for testing , but gives nothing .
please can you tell how to achieve that , it ll be really very usefull .
thank you
this is my e-mail "*[email protected]"