Skip to content

Instantly share code, notes, and snippets.

@lelap

lelap/EEZs_2014.html

Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lelap/9de5166d8ab277655861 to your computer and use it in GitHub Desktop.
Save lelap/9de5166d8ab277655861 to your computer and use it in GitHub Desktop.
Download ZIP
EEZs Example of ArcGIS JS API map
Raw
EEZs_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 EEZ 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>EEZ 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>
<!-- JQuery is here for the switching map layers with the dropdown menu -->
<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 EEZ selection color - based on Radical Media's color choices. */
var eezSelectionOutlineColor = new Color([0,222,222]),
eezSelectionFillColor = new Color([0,222,222,0.5]),
eezSelectionOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, eezSelectionOutlineColor, 1),
eezSelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, eezSelectionOutlineSymbol, eezSelectionFillColor);
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 EEZ mapservices to call on*/
var MapServiceUrl = 'http://54.237.66.20:6080/arcgis/rest/services/OHI/EEZs_2014/MapServer';
/*WORKING*/
var selectedGoal = 'undefined';
/* 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/MapServer");
map.addLayer(tiled);
/*
Setup EEZ 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 EEZ, Layer 0 is Countries See numbering at the Mapserver page: http://54.237.66.20:6080/arcgis/rest/services/OHI/EEZs_2014/MapServer
*/
eezFeatureLayer = new FeatureLayer(MapServiceUrl + '/1', {
mode:FeatureLayer.MODE_ONDEMAND,
outFields:["*"],
opacity:0.8,
visible:true
});
eezFeatureLayer.setSelectionSymbol(eezSelectionSymbol);
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 EEZ features*/
eezFeatureLayer.on("mouse-over", showTooltip);
eezFeatureLayer.on("mouse-out", closeDialog);
/*add the EEZ and Country layers to the map */
map.addLayer(eezFeatureLayer);
map.addLayer(countriesFeatureLayer);
}
/* Function to get the attribute field selected from the combo box*/
function updateEEZRenderer(goal) {
eezFeatureLayer.renderer.attributeField = goal;
eezFeatureLayer.refresh();
}
/* On Mouseover Show an info Window with selected score and highlight the EEZ and all Country features associated with that EEZ by selecting all region id's' (i.e. Highlight the Mainland and Hawaii when US's EEZ 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 eezQuery = new query();
eezQuery.where = "region_id = " + evt.graphic.attributes.REGION_ID + "";
eezFeatureLayer.selectFeatures(eezQuery, 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.CNTRY_NAME + "<br>" + $( "#theGoalsList option:selected" ).text() + ': ' + value;
/*stylign for the info window*/
var dialog = new dijit.TooltipDialog({
id: "tooltipDialog",
content: tipContent,
style: "position: absolute; font: normal normal bold 6pt Helvetica; 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
eezFeatureLayer.clearSelection();
countriesFeatureLayer.clearSelection();
}
/*Listen for a selected goal in the goal combo box */
$( "#theGoalsList" ).change(function() {
selectedGoal = $( "#theGoalsList option:selected" ).attr("data-value");
updateEEZRenderer(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment