Skip to content

Instantly share code, notes, and snippets.

@nickdos

nickdos/index.html

Last active February 24, 2016 05:18
Show Gist options
  • Save nickdos/8c3075d4487ad2f334a8 to your computer and use it in GitHub Desktop.
Save nickdos/8c3075d4487ad2f334a8 to your computer and use it in GitHub Desktop.
Download ZIP
ALA occurrence record map demo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ALA Occurrence Records Map Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
.mapContainer {
height:650px;
width: 100%
border:1px solid gray;
}
/* typeahead styles */
.typeahead,
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 16px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 16px;
line-height: 16px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script type="text/javascript">
var map, ala_wms;
var alaBaseUrl = "http://biocache.ala.org.au/ws";
var wmsBaseUrl = alaBaseUrl + "/ogc/wms/reflect"; // see http://api.ala.org.au/ - Mapping
var defaultParamsObj = { q: "*:*", fq: "geospatial_kosher:true" };
$(document).ready(function() {
map = new OpenLayers.Map("map");
var ol_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: "basic"}
);
var mapParams = {
layers: 'ALA:occurrences',
transparent: "true",
format: "image/png",
outline: false,
ENV: "colormode:grid;name:circle;size:4;opacity:0.8"//"colormode:grid"
}
ala_wms = new OpenLayers.Layer.WMS(
"Occurrence records",
wmsBaseUrl,
$.extend(true, mapParams, defaultParamsObj),
{ opacity:0.5, isBaseLayer: false, visibility: true }
);
//var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});
map.addLayers([ol_wms, ala_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(134, -25), 4);
updateLegend(defaultParamsObj);
$(window).resize(function(){
$('#map').height( $(window).height() - $(".navbar").height()
- parseInt($(".navbar").css("margin-bottom"))
- parseInt($(".navbar").css("margin-top"))
- parseInt($('#map').css("margin-bottom"))
);
});
$(window).resize();
var bieJson = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
//prefetch: '../data/films/post_1960.json',
remote: {
url:'http://bie.ala.org.au/search/auto.jsonp?q=%QUERY',
filter: mungeBieJson,
ajax: { dataType:'jsonp' }}
});
bieJson.initialize();
$('.typeahead').typeahead(null, {
name: 'species-lookup',
displayKey: 'name',
source: bieJson.ttAdapter()
});
});
function mungeBieJson(resp) {
return resp.autoCompleteList;
}
function getAlaWmsBaseurl() {
var mappingUrl = "http://biocache.ala.org.au/ws";
return mappingUrl + "/webportal/wms/reflect" + params;
}
function updateMap() {
var query = $('#query').val();
var lsid = $('#lsid').val() ;
var newParams = $.extend(true, {}, defaultParamsObj); // copy contents
if (lsid) {
newParams.q = "q=lsid:" + lsid;
} else if (query) {
newParams.q = query;
}
console.log("updating layer", newParams);
ala_wms.mergeNewParams(newParams);
updateLegend(newParams);
}
function updateLegend(params) {
$('#legend span').html('<img id="gridLegendImg" src="' + alaBaseUrl + '/density/legend?' + $.param( params ) + '"/>');
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ALA map demo</a>
</div>
<div class="navbar-collapse collapse">
<form class="hide navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 sidebar">
<h3>Step 2: Create a subset</h3>
<div class="input-group">
<input type="text" id="query" class="form-control typeahead" value="" placeholder="Search for species"/>
<input type="hidden" id="lsid" value=""/>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="searchBtn" onClick="updateMap();">Search</button>
</span>
</div><!-- /input-group -->
<div>&nbsp;</div>
<table id="results" class="table table-bordered table-striped">
<thead>
<tr>
<th width="90%">Species</th>
<th width="10%">Add</th>
</tr>
<tbody>
<tr>
<td colspan="2" style="color:#999;">Species appear here following search</td>
</tr>
</tbody>
</table>
<div id="legend">Record density legend:<br/><span></span></div>
</div>
<div class="col-md-8 main">
<div id="map" class="mapContainer"></div>
</div>
</div>
<footer>
<p>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a></p>
</footer> -->
</div> <!-- /container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment