lelap/HighSeas_2014.html

## HighSeas_2014.html
<!--
This example is based on the work for the first iteration of the Ocean Health Index website built by Radical Media here: http://www.oceanhealthindex.org/Countries. Radical utelized ArcGIS Server to server the HighSeas and basemap data and ArcGIS Javascript API to build their interactive map. This is an example to demonstrate ArcGIS API functionality
-->
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>HighSeas 2014 ArcGIS JS API Example</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/soria/soria.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
    <style>
    html, body {
      padding:0;
      margin:0;
      height:100%;
    }

/*
Styling the map container
*/
    #mapDiv, .map.container {
      padding:0;
      margin:0;
      height:95%;
    }
    </style>
 <!--
ArcGIS JS API is buit ontop of dojo https://developers.arcgis.com/javascript/jshelp/inside_dojo.html
-->
    <script>var dojoConfig = { parseOnLoad:true };</script>
 <!-- calling the 3.12 (latest) version of ArcGIS JS API -->
    <script src="http://js.arcgis.com/3.12/"></script>

<!-- calling the 3.12 (latest) version of ArcGIS JS API -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

/* map variable set */
      var map;

/*dojo and esri common functions and resources used in this page */
	require(["dojo/on", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dijit/TooltipDialog", "esri/tasks/query", "esri/tasks/QueryTask","esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic", "esri/renderer", "dojo/parser", "dojo/domReady!"
      ], function(
        on,Map, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, InfoTemplate, FeatureLayer, TooltipDialog, query, QueryTask, SimpleFillSymbol, 	SimpleLineSymbol, Color, Graphic, renderer, parser
      ){

/*Country and HighSeas selection color - based on Radical Media's color choices. */
	var HighSeasSelectionOutlineColor = new Color([0,222,222]),
			HighSeasSelectionFillColor = new Color([0,222,222,0.5]),
			HighSeasSelectionOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, HighSeasSelectionOutlineColor, 1),
			HighSeasSelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, HighSeasSelectionOutlineSymbol, HighSeasSelectionFillColor);

	var countrySelectionOutlineColor = new Color([0,222,222,0]),
			countrySelectionFillColor = new Color([0,222,222]),
			countrySelectionOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, countrySelectionOutlineColor, 1),
			countrySelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, countrySelectionOutlineSymbol, countrySelectionFillColor);

/* Setting up the HighSeas mapservices to call on*/
	var MapServiceUrl = 'http://54.237.66.20:6080/arcgis/rest/services/OHI/HighSeas_2014/MapServer';

/*WORKING*/
	var selectedGoal;

/* initialize the map, starting at 0,0 and zoom of 2 */
      function init() {
        map = new Map("mapDiv", {
          center: [0, 0],
          zoom: 2
        });

/* Bring the background tiled basemap into the map first */
      var tiled = new ArcGISTiledMapServiceLayer("http://54.237.66.20:6080/arcgis/rest/services/OHI/Mollweide_Pacific/MapServer");
          map.addLayer(tiled);

/*
Setup HighSeas layer and Country data from the MapServer Feature Layers and selection symbols. Another option is ArcGISDynamicMapServiceLayer, but this has fewer possibilities for onHover interaction https://developers.arcgis.com/javascript/jsapi/featurelayer.html https://www.e-education.psu.edu/geog863/node/1952

Layer 1 is HighSeas, Layer 0 is Countries See numbering at the Mapserver page: http://54.237.66.20:6080/arcgis/rest/services/OHI/HighSeass_2014/MapServer
*/

	HighSeasFeatureLayer = new FeatureLayer(MapServiceUrl + '/1', {
		mode:FeatureLayer.MODE_ONDEMAND,
		outFields:["*"],
		opacity:0.8,
		visible:true
	});
	HighSeasFeatureLayer.setSelectionSymbol(HighSeasSelectionSymbol);

	countriesFeatureLayer = new FeatureLayer(MapServiceUrl + '/0', {
		mode:FeatureLayer.MODE_ONDEMAND,
		outFields:["*"],
		opacity:1,
		visible:true
	});
	countriesFeatureLayer.setSelectionSymbol(countrySelectionSymbol);

/*Set up on Hover info window interaction on HighSeas features*/
        HighSeasFeatureLayer.on("mouse-over", showTooltip);
        HighSeasFeatureLayer.on("mouse-out", closeDialog);

/*add the HighSeas and Country layers to the map */
        map.addLayer(HighSeasFeatureLayer);
	map.addLayer(countriesFeatureLayer);
      }

/* Function to get the attribute field selected from the combo box*/
	function updateHighSeasRenderer(goal) {
		HighSeasFeatureLayer.renderer.attributeField = goal;
		HighSeasFeatureLayer.refresh();
	}

/* On Mouseover Show an info Window with selected score and highlight the HighSeas and all Country features associated with that HighSeas by selecting all region id's' (i.e. Highlight the Mainland and Hawaii when US's HighSeas is moused over)*/
      function showTooltip(evt){
        closeDialog();

	var countryQuery = new query();
	countryQuery.where = "region_id = " + evt.graphic.attributes.REGION_ID + "";
	countriesFeatureLayer.selectFeatures(countryQuery, FeatureLayer.SELECTION_NEW);

	var HighSeasQuery = new query();
	HighSeasQuery.where = "region_id = " + evt.graphic.attributes.REGION_ID + "";
	HighSeasFeatureLayer.selectFeatures(HighSeasQuery, FeatureLayer.SELECTION_NEW);

/*content for the on Hover info window */
	var goalValue = $( "#theGoalsList option:selected" ).attr("data-value");
	var value = evt.graphic.attributes[goalValue];
	if (typeof value === "undefined" || value == -1) {
		value = 'N/A';
	}
        var tipContent = evt.graphic.attributes.rgn_name + "<br>" + $( "#theGoalsList option:selected" ).text() + ': ' + value;

/*stylign for the info window*/
        var dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          content: tipContent,
          style: "position: absolute; width: 250px; font: normal normal bold 6pt Tahoma;z-index:100"
        });
        dialog.startup();

        dojo.style(dialog.domNode, "opacity", 0.85);

/* Where info window should appear */
        dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
      }

/*close info window */
      function closeDialog() {
        var widget = dijit.byId("tooltipDialog");
        if (widget) {
          widget.destroy();
        }
	// clear selected features on mouseOut
	HighSeasFeatureLayer.clearSelection();
	countriesFeatureLayer.clearSelection();
      }
/*Listen for a selected goal in the goal combo box */
	$( "#theGoalsList" ).change(function() {
		selectedGoal = $( "#theGoalsList option:selected" ).attr("data-value");
		updateHighSeasRenderer(selectedGoal);
	});

/*dojo init function*/
    dojo.ready(init);
 });
</script>
</head>
<body class="soria">
<!-- ComboBox with Lits of Goals -->
<select id="theGoalsList">
	<option data-value="unweighted">Overall Index Score</option>
	<option data-value="FP">Food Provision</option>
	<option data-value="AO">Artisanal Fishing Opportunities</option>
	<option data-value="NP">Natural Products</option>
	<option data-value="CS">Carbon Storage</option>
	<option data-value="CP">Coastal Protection</option>
	<option data-value="LE">Coastal Livelihoods & Economies</option>
	<option data-value="TR">Tourism & Recreation</option>
	<option data-value="SP">Sense of Place</option>
	<option data-value="CW">Clean Waters</option>
	<option data-value="BD">Biodiversity</option>
</select>

<!-- Div for the Map -->
  <div id="mapDiv"></div>
</body>

</html>
	<!--
	This example is based on the work for the first iteration of the Ocean Health Index website built by Radical Media here: http://www.oceanhealthindex.org/Countries. Radical utelized ArcGIS Server to server the HighSeas and basemap data and ArcGIS Javascript API to build their interactive map. This is an example to demonstrate ArcGIS API functionality
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--The viewport meta tag is used to improve the presentation and behavior of the samples
	on iOS devices-->
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
	<title>HighSeas 2014 ArcGIS JS API Example</title>

	<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/soria/soria.css">
	<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
	<style>
	html, body {
	padding:0;
	margin:0;
	height:100%;
	}

	/*
	Styling the map container
	*/
	#mapDiv, .map.container {
	padding:0;
	margin:0;
	height:95%;
	}
	</style>
	<!--
	ArcGIS JS API is buit ontop of dojo https://developers.arcgis.com/javascript/jshelp/inside_dojo.html
	-->
	<script>var dojoConfig = { parseOnLoad:true };</script>
	<!-- calling the 3.12 (latest) version of ArcGIS JS API -->
	<script src="http://js.arcgis.com/3.12/"></script>

	<!-- calling the 3.12 (latest) version of ArcGIS JS API -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script>

	/* map variable set */
	var map;

	/dojo and esri common functions and resources used in this page /
	require(["dojo/on", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dijit/TooltipDialog", "esri/tasks/query", "esri/tasks/QueryTask","esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic", "esri/renderer", "dojo/parser", "dojo/domReady!"
	], function(
	on,Map, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, InfoTemplate, FeatureLayer, TooltipDialog, query, QueryTask, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic, renderer, parser
	){

	/Country and HighSeas selection color - based on Radical Media's color choices. /
	var HighSeasSelectionOutlineColor = new Color([0,222,222]),
	HighSeasSelectionFillColor = new Color([0,222,222,0.5]),
	HighSeasSelectionOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, HighSeasSelectionOutlineColor, 1),
	HighSeasSelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, HighSeasSelectionOutlineSymbol, HighSeasSelectionFillColor);

	var countrySelectionOutlineColor = new Color([0,222,222,0]),
	countrySelectionFillColor = new Color([0,222,222]),
	countrySelectionOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, countrySelectionOutlineColor, 1),
	countrySelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, countrySelectionOutlineSymbol, countrySelectionFillColor);

	/* Setting up the HighSeas mapservices to call on*/
	var MapServiceUrl = 'http://54.237.66.20:6080/arcgis/rest/services/OHI/HighSeas_2014/MapServer';

	/WORKING/
	var selectedGoal;

	/* initialize the map, starting at 0,0 and zoom of 2 */
	function init() {
	map = new Map("mapDiv", {
	center: [0, 0],
	zoom: 2
	});

	/* Bring the background tiled basemap into the map first */
	var tiled = new ArcGISTiledMapServiceLayer("http://54.237.66.20:6080/arcgis/rest/services/OHI/Mollweide_Pacific/MapServer");
	map.addLayer(tiled);

	/*
	Setup HighSeas layer and Country data from the MapServer Feature Layers and selection symbols. Another option is ArcGISDynamicMapServiceLayer, but this has fewer possibilities for onHover interaction https://developers.arcgis.com/javascript/jsapi/featurelayer.html https://www.e-education.psu.edu/geog863/node/1952

	Layer 1 is HighSeas, Layer 0 is Countries See numbering at the Mapserver page: http://54.237.66.20:6080/arcgis/rest/services/OHI/HighSeass_2014/MapServer
	*/

	HighSeasFeatureLayer = new FeatureLayer(MapServiceUrl + '/1', {
	mode:FeatureLayer.MODE_ONDEMAND,
	outFields:["*"],
	opacity:0.8,
	visible:true
	});
	HighSeasFeatureLayer.setSelectionSymbol(HighSeasSelectionSymbol);

	countriesFeatureLayer = new FeatureLayer(MapServiceUrl + '/0', {
	mode:FeatureLayer.MODE_ONDEMAND,
	outFields:["*"],
	opacity:1,
	visible:true
	});
	countriesFeatureLayer.setSelectionSymbol(countrySelectionSymbol);

	/Set up on Hover info window interaction on HighSeas features/
	HighSeasFeatureLayer.on("mouse-over", showTooltip);
	HighSeasFeatureLayer.on("mouse-out", closeDialog);

	/add the HighSeas and Country layers to the map /
	map.addLayer(HighSeasFeatureLayer);
	map.addLayer(countriesFeatureLayer);
	}

	/* Function to get the attribute field selected from the combo box*/
	function updateHighSeasRenderer(goal) {
	HighSeasFeatureLayer.renderer.attributeField = goal;
	HighSeasFeatureLayer.refresh();
	}

	/* On Mouseover Show an info Window with selected score and highlight the HighSeas and all Country features associated with that HighSeas by selecting all region id's' (i.e. Highlight the Mainland and Hawaii when US's HighSeas is moused over)*/
	function showTooltip(evt){
	closeDialog();

	var countryQuery = new query();
	countryQuery.where = "region_id = " + evt.graphic.attributes.REGION_ID + "";
	countriesFeatureLayer.selectFeatures(countryQuery, FeatureLayer.SELECTION_NEW);

	var HighSeasQuery = new query();
	HighSeasQuery.where = "region_id = " + evt.graphic.attributes.REGION_ID + "";
	HighSeasFeatureLayer.selectFeatures(HighSeasQuery, FeatureLayer.SELECTION_NEW);

	/content for the on Hover info window /
	var goalValue = $( "#theGoalsList option:selected" ).attr("data-value");
	var value = evt.graphic.attributes[goalValue];
	if (typeof value === "undefined" \|\| value == -1) {
	value = 'N/A';
	}
	var tipContent = evt.graphic.attributes.rgn_name + "<br>" + $( "#theGoalsList option:selected" ).text() + ': ' + value;

	/stylign for the info window/
	var dialog = new dijit.TooltipDialog({
	id: "tooltipDialog",
	content: tipContent,
	style: "position: absolute; width: 250px; font: normal normal bold 6pt Tahoma;z-index:100"
	});
	dialog.startup();

	dojo.style(dialog.domNode, "opacity", 0.85);

	/* Where info window should appear */
	dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
	}

	/close info window /
	function closeDialog() {
	var widget = dijit.byId("tooltipDialog");
	if (widget) {
	widget.destroy();
	}
	// clear selected features on mouseOut
	HighSeasFeatureLayer.clearSelection();
	countriesFeatureLayer.clearSelection();
	}
	/Listen for a selected goal in the goal combo box /
	$( "#theGoalsList" ).change(function() {
	selectedGoal = $( "#theGoalsList option:selected" ).attr("data-value");
	updateHighSeasRenderer(selectedGoal);
	});

	/dojo init function/
	dojo.ready(init);
	});
	</script>
	</head>
	<body class="soria">
	<!-- ComboBox with Lits of Goals -->
	<select id="theGoalsList">
	<option data-value="unweighted">Overall Index Score</option>
	<option data-value="FP">Food Provision</option>
	<option data-value="AO">Artisanal Fishing Opportunities</option>
	<option data-value="NP">Natural Products</option>
	<option data-value="CS">Carbon Storage</option>
	<option data-value="CP">Coastal Protection</option>
	<option data-value="LE">Coastal Livelihoods & Economies</option>
	<option data-value="TR">Tourism & Recreation</option>
	<option data-value="SP">Sense of Place</option>
	<option data-value="CW">Clean Waters</option>
	<option data-value="BD">Biodiversity</option>
	</select>

	<!-- Div for the Map -->
	<div id="mapDiv"></div>
	</body>

	</html>