<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<html>
<head>
<title>ICGC WEB MAP</title>
<!-- leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.ie.css" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.3/esri-leaflet.js"></script>
<script src="js/esri-leaflet-related.js"></script>
<!-- script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script -->
<!--<script src="../js/basemap.js"></script>
<script src="../js/buttonPick.js"></script>-->
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/ebrelsford/Leaflet.loading/master/src/Control.Loading.css" />
<script src="https://rawgithub.com/ebrelsford/Leaflet.loading/master/src/Control.Loading.js"></script>
<style>
body
{
margin:0;
padding:0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#sidecol{
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 300px; /*Width of frame div*/
height: 100%;
overflow: auto;
background: #686868;
color: white;
border-left-width: thick;
border-left-color: white;
border-left-style:solid;
}
#map{
position: fixed;
top: 35px;
left: 0;
right: 305px; /*Set right value to WidthOfFrameDiv*/
bottom: 0;
overflow: hidden;
background: #fff;
}
#topsection{
position: absolute;
top: 0;
left: 0;
right: 305px; /*Set right value to WidthOfFrameDiv*/
background: #EAEAEA;
height: 35px; /*Height of top section*/
}
.innertube{
margin: 7px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
</style>
<script>
$(document).ready(function()
{
//basemap();
//buttonPick(map);
}); //end of ready
</script>
</head>
<body>
<div name="container" id="container">
<div id="topsection">
<div class="innertube">
<button type="button" class="btn btn-default" id="NSM" value="NSM">News</button>
<button type="button" class="btn btn-default" id="SDG" value="SDG">SDG Status</button>
<button type="button" class="btn btn-default" id="CMP" value ="CMP">City Models/Plans</button>
<button type="button" class="btn btn-default" id="CSM" value ="CSM">Story Maps</button>
<button type="button" class="btn btn-default" id="EDU" value ="EDU">Educational Games</button>
<button type="button" class="btn btn-default" id="USR" value ="USR">User Submitted</button>
<button type="button" class="btn btn-default" id="OPM" value ="OPM">Project Map</button>
</div>
</div>
<div id="map"></div>
<div id="sidecol">
<div id="sidecolcontent" class="innertube">SIDE PANEL</div>
</div>
</div>
<script>
var countries;
var admin;
var buttonPicked;
var buttonType;
var data = {}, key = [], value= [];
var map = L.map('map',{minZoom: 2}).setView([11.505, -0.09], 2);
var loadingControl = L.Control.loading({
spinjs: true
});
map.addControl(loadingControl);
L.esri.basemapLayer("Topographic").addTo(map);
var tileURL = 'https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png'
var featureURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/0"
var tableURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/1";
L.tileLayer(tileURL,
{
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
}).addTo(map);
cntrycodes = new L.esri.featureLayer(tableURL, {}).addTo(map);
$('#NSM').click(function(evt){
//$('#sidecolcontent').empty();
$('#sidecolcontent').html('Querying News...');
buttonPicked = 'NSM';
buttonType = document.getElementById('NSM');
var query = L.esri.Tasks.query(tableURL).where("type like '" + buttonType.value + "'");
var rquery = L.esri.Tasks.queryRelated(tableURL).relationshipId("0");
query.ids(function(error, ids, response){
rquery.objectIds([ids.join(',')]);
rquery.run(function(error, featureCollection, response){
var geojson = L.geoJson(featureCollection, {
style: function () {
return {color: 'blue'};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.NAME);
}
}).addTo(map);
$('#sidecolcontent').html('Done');
map.fitBounds(geojson.getBounds().pad(0.5));
});
});
})
</script>
</body>
</html>
