Last active
December 19, 2015 05:09
-
-
Save oevans/5902475 to your computer and use it in GitHub Desktop.
Sample story map template index.html file showing configuration changes needed so that it can be used with Portal for ArcGIS.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> | |
<head> | |
<title>Shortlist</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"> | |
<link rel="stylesheet" type="text/css" href="https://<YOUR WEB SERVER NAME HERE>/jsapi/arcgis/3.2/js/esri/css/esri.css" /> | |
<link rel="stylesheet" type="text/css" href="https://<YOUR WEB SERVER NAME HERE>/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> | |
<link rel="stylesheet" type="text/css" href="colorbox/colorbox.css"> | |
<link rel="stylesheet" type="text/css" href="css/style.css"> | |
<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script> | |
<script type="text/javascript" src="lib/common/helper_functions.js"></script> | |
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script> | |
<script type="text/javascript" src="https://<YOUR WEB SERVER NAME HERE>/arcgis/jsapi/jsapi"></script> | |
<script type="text/javascript" src="colorbox/jquery.colorbox-min.js"></script> | |
<script type="text/javascript" src="lib/jquery.animate-colors-min.js"></script> | |
<!--Social Media Links--> | |
<script type="text/javascript">var switchTo5x=true;</script> | |
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> | |
<script type="text/javascript">stLight.options({publisher:'77225c91-2742-42f7-b1b4-bddda99a9bde'});</script> | |
<!--END Social Media Links--> | |
<!--Google Analytics Start--> | |
<script type="text/javascript"> | |
if (window.location.href.toLowerCase().indexOf("storymaps.esri.com") >= 0) { | |
var _gaq = _gaq || []; | |
_gaq.push(['_setAccount', 'UA-26529417-1']); | |
_gaq.push(['_trackPageview']); | |
(function() { | |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |
})(); | |
} | |
</script> | |
<!--Google Analytics End--> | |
<script type="text/javascript"> | |
dojo.require("dijit.dijit"); | |
dojo.require("dijit.layout.BorderContainer"); | |
dojo.require("dijit.layout.ContentPane"); | |
dojo.require("esri.map"); | |
dojo.require("esri.arcgis.utils"); | |
/****************************************************** | |
******************** config section ****************** | |
*******************************************************/ | |
var SHARINGURL = "http://<YOUR WEB SERVER NAME HERE>/sharing/content/items"; | |
var WEBMAP_ID = "<YOUR WEB MAP ID HERE>"; | |
var BOOKMARKS_ALIAS = "Locations"; | |
var COLOR_ORDER = "blue,red,green"; // will only use as many colors as you have content (point) layers | |
var BINGMAPS_KEY = ""; | |
/****************************************************** | |
******************** app variables ******************** | |
*******************************************************/ | |
var COLOR_SCHEMES = [ | |
{iconDir:"blue",iconPrefix:"NumberIconb",color:"#177ff1"}, | |
{iconDir:"red",iconPrefix:"NumberIcon",color:"#fd2d29"}, | |
{iconDir:"green",iconPrefix:"NumberIcong",color:"#22880d"}, | |
{iconDir:"purple",iconPrefix:"IconPurple",color:"#9c46fd"} | |
]; | |
var COLOR_DIM = "#E7E7E7"; | |
var COLOR_FULL = "#FFFFFF"; | |
var _contentLayers = []; | |
var _isMobile = isMobile(); | |
var _map; | |
var _bookmarks; | |
var _layerCurrent; | |
var _selected; | |
var _initExtent; | |
var _dojoReady = false; | |
var _jqueryReady = false; | |
/****************************************************** | |
************************* init ************************ | |
*******************************************************/ | |
dojo.addOnLoad(function() {_dojoReady = true;init()}); | |
jQuery(document).ready(function() {_jqueryReady = true;init()}); | |
/* init comes in two parts because of async call to | |
createMap. */ | |
function init() { | |
if (!_jqueryReady) return; | |
if (!_dojoReady) return; | |
esri.arcgis.utils.arcgisUrl = SHARINGURL; | |
if (getParameterByName("webmap") != "") { | |
WEBMAP_ID = getParameterByName("webmap"); | |
} | |
if (getParameterByName("bookmarks_alias") != "") { | |
BOOKMARKS_ALIAS = getParameterByName("bookmarks_alias"); | |
} | |
if (getParameterByName("color_order") != "") { | |
COLOR_ORDER = getParameterByName("color_order") | |
} | |
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼'); | |
$(this).resize(handleWindowResize); | |
$("#zoomIn").click(function(e) { | |
_map.setLevel(_map.getLevel()+1); | |
}); | |
$("#zoomOut").click(function(e) { | |
_map.setLevel(_map.getLevel()-1); | |
}); | |
$("#zoomExtent").click(function(e) { | |
_map.setExtent(_initExtent); | |
}); | |
$(document).bind('cbox_complete', function(){ | |
$(".details .rightDiv").height($(".details").height() - 65); | |
}); | |
$("#bookmarksToggle").click(function(){ | |
if ($("#bookmarksDiv").css('display')=='none'){ | |
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▲'); | |
} | |
else{ | |
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼'); | |
} | |
$("#bookmarksDiv").slideToggle(); | |
}); | |
var mapDeferred = esri.arcgis.utils.createMap(WEBMAP_ID, "map", { | |
mapOptions: { | |
slider: false, | |
wrapAround180:false | |
}, | |
ignorePopups: true, | |
bingMapsKey: BINGMAPS_KEY | |
}); | |
mapDeferred.addCallback(function(response) { | |
document.title = response.itemInfo.item.title; | |
$("#title").html(response.itemInfo.item.title); | |
$("#subtitle").html(response.itemInfo.item.snippet); | |
_map = response.map; | |
//resize the map when the browser resizes | |
dojo.connect(dijit.byId('map'), 'resize', _map,_map.resize); | |
dojo.connect(_map, 'onExtentChange', refreshList); | |
// click action on the map where there's no graphic | |
// causes a deselect. | |
dojo.connect(_map, 'onClick', function(event){ | |
if (event.graphic == null) { | |
unselect(); | |
} | |
}); | |
_bookmarks = response.itemInfo.itemData.bookmarks; | |
if (_bookmarks) { | |
loadBookmarks(); | |
$("#bookmarksCon").show(); | |
} | |
var layers = response.itemInfo.itemData.operationalLayers; | |
if(_map.loaded){ | |
initMap(layers); | |
} else { | |
dojo.connect(_map,"onLoad",function(){ | |
initMap(layers); | |
}); | |
} | |
}); | |
mapDeferred.addErrback(function(error) { | |
console.log("Map creation failed: ", dojo.toJson(error)); | |
}); | |
} | |
function initMap(layers) { | |
var supportLayers = []; | |
var pointLayers = []; | |
$.each(layers,function(index,value){ | |
if (value.url == null) { | |
if (value.featureCollection.layers[0].featureSet.geometryType == "esriGeometryPoint") { | |
pointLayers.push(value); | |
} else { | |
supportLayers.push(value); | |
} | |
} else { | |
// if the layer has an url property (meaning that it comes from a service), just | |
// keep going...it will remain in the map, but won't be query-able. | |
} | |
}); | |
_initExtent = _map.extent; | |
var supportLayer; | |
$.each(supportLayers,function(index,value) { | |
supportLayer = findLayer(_map,value.title); | |
if (supportLayer == null) return; | |
$.each(supportLayer.graphics,function(index,value) { | |
value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity | |
}); | |
dojo.connect(supportLayer, "onMouseOver", baselayer_onMouseOver); | |
dojo.connect(supportLayer, "onMouseOut", baselayer_onMouseOut); | |
dojo.connect(supportLayer, "onClick", baselayer_onClick); | |
}); | |
if (COLOR_ORDER.split(",").length < pointLayers.length) { | |
// you have supplied fewer colors than point layers and | |
// therefore have lost your sorting privileges... | |
colorschemes = COLOR_SCHEMES; | |
} else { | |
// sort the colors | |
var colorschemes = getSortedColorSchemes(); | |
// burn off any extra colors, if you have more colors | |
// than points. | |
while (pointLayers.length < colorschemes.length) { | |
colorschemes.shift() | |
}; | |
} | |
var contentLayer; | |
$.each(pointLayers,function(index,value) { | |
_map.removeLayer(findLayer(_map,value.title)); | |
if (index <= 3) { // maximum of 4 point layers. | |
$.each(value.featureCollection.layers[0].featureSet.features,function(index,value) { | |
value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity | |
}); | |
contentLayer = buildLayer( | |
value.featureCollection.layers[0].featureSet.features.sort(SortByID), | |
colorschemes[index].iconDir, | |
colorschemes[index].iconPrefix | |
); | |
contentLayer.color = colorschemes[index].color; | |
contentLayer.title = value.title; | |
dojo.connect(contentLayer, "onMouseOver", layer_onMouseOver); | |
dojo.connect(contentLayer, "onMouseOut", layer_onMouseOut); | |
dojo.connect(contentLayer, "onClick", layer_onClick); | |
_map.addLayer(contentLayer); | |
_contentLayers.push(contentLayer); | |
} | |
}); | |
_contentLayers.reverse(); | |
$.each(_contentLayers,function(index,value){ | |
$("#tabs").append('<div class="tab" onclick="activateLayer(_contentLayers['+index+'])">'+value.title+'</div>'); | |
}); | |
activateLayer(_contentLayers[0]); | |
dojo.connect(_map.infoWindow,"onHide",infoWindow_onHide); | |
handleWindowResize(); | |
$("#zoomToggle").css("visibility","visible"); | |
} | |
/****************************************************** | |
******************** event handlers ******************* | |
*******************************************************/ | |
function tile_onMouseOver(e) { | |
$(this).stop().animate({'background-color' : COLOR_FULL}); | |
} | |
function tile_onMouseOut(e) { | |
if (_selected != null) { | |
// does this tile represent the selected graphic? | |
var id = parseInt($(this).attr("id").substring(4)); | |
if (_selected.attributes.getValueCI("Number") == id) { | |
return; | |
} | |
} | |
$(this).stop().animate({'background-color' : COLOR_DIM}); | |
} | |
function tile_onClick(e) { | |
// turn off the last selected tile... | |
if (_selected != null) { | |
var tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0]; | |
if ($(tile).attr("id") != $(this).attr("id")) $(tile).stop().animate({'background-color' : COLOR_DIM}); | |
} | |
$(this).stop().animate({'background-color' : COLOR_FULL}); | |
var id= $(this).attr("id").substring(4); | |
_selected = $.grep(_layerCurrent.graphics,function(n,i){return n.attributes.getValueCI("Number") == id})[0]; | |
postSelection(); | |
} | |
function infoWindow_onHide(event) { | |
unselect(); | |
} | |
function baselayer_onMouseOver(event) | |
{ | |
if (_isMobile) return; | |
_map.setMapCursor("pointer"); | |
var graphic = event.graphic; | |
$("#hoverInfo").html(graphic.attributes.getValueCI("Title")); | |
var pt = event.screenPoint; | |
hoverInfoPos(pt.x,pt.y); | |
} | |
function baselayer_onMouseOut(event) | |
{ | |
if (_isMobile) return; | |
_map.setMapCursor("default"); | |
$("#hoverInfo").hide(); | |
} | |
function baselayer_onClick(event) { | |
var feature = event.graphic; | |
_map.infoWindow.setTitle(event.graphic.attributes.getValueCI("Title")); | |
_map.infoWindow.setContent(event.graphic.attributes.getValueCI("Short_desc")+"<p><span class='infoWindowLink'>Details >></span></p>"); | |
_map.infoWindow.show(event.mapPoint); | |
$(".infoWindowLink").click(function(e) { | |
showDetails(feature); | |
}); | |
$("#hoverInfo").hide(); | |
} | |
function layer_onClick(event) | |
{ | |
var tile; | |
if (_selected != null) { | |
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0] | |
$(tile).stop().animate({'background-color' : COLOR_DIM}); | |
} | |
_selected = event.graphic; | |
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0] | |
$(tile).stop().animate({'background-color' : COLOR_FULL}); | |
postSelection(); | |
} | |
function layer_onMouseOver(event) | |
{ | |
if (_isMobile) return; | |
_map.setMapCursor("pointer"); | |
var graphic = event.graphic; | |
if (graphic == _selected) return; | |
graphic.setSymbol(graphic.symbol.setHeight(30).setWidth(24)); | |
$("#hoverInfo").html(graphic.attributes.getValueCI("Title")); | |
var pt = _map.toScreen(graphic.geometry); | |
hoverInfoPos(pt.x,pt.y); | |
} | |
function layer_onMouseOut(event) | |
{ | |
if (_isMobile) return; | |
_map.setMapCursor("default"); | |
var graphic = event.graphic; | |
graphic.setSymbol(graphic.symbol.setHeight(28).setWidth(22)); | |
$("#hoverInfo").hide(); | |
} | |
/****************************************************** | |
****************** other functions ******************** | |
*******************************************************/ | |
function unselect() { | |
if (_selected != null) { | |
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0] | |
$(tile).stop().animate({'background-color' : COLOR_DIM}); | |
} | |
_selected = null; | |
postSelection(); | |
} | |
// sort items by numeric ID | |
function SortByID(a, b){ | |
var aID = a.attributes.getValueCI("Number"); | |
var bID = b.attributes.getValueCI("Number"); | |
return ((aID < bID) ? -1 : ((aID > bID) ? 1 : 0)); | |
} | |
function loadBookmarks() { | |
$.each(_bookmarks,function(index,value){$("#bookmarksDiv").append("<p><a>"+value.name+"</a></p>")}); | |
$("#bookmarksDiv a").click(function(e) { | |
var name = $(this).html(); | |
var extent = new esri.geometry.Extent($.grep(_bookmarks,function(n,i){return n.name == name})[0].extent); | |
_map.setExtent(extent); | |
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼'); | |
$("#bookmarksDiv").slideToggle(); | |
}); | |
} | |
function activateLayer(layer) { | |
_selected = null; | |
postSelection(); | |
_layerCurrent = layer; | |
var tab = $.grep($(".tab"),function(n,i){return $(n).html() == _layerCurrent.title})[0]; | |
$(".tab").removeClass("tab-selected"); | |
$(tab).addClass("tab-selected"); | |
$.each(_contentLayers,function(index,value){ | |
value.setVisibility(value == _layerCurrent); | |
}); | |
$("#myList").empty(); | |
var display; | |
var tile; | |
var img; | |
var footer; | |
var num; | |
var title; | |
$.each(_layerCurrent.graphics,function(index,value){ | |
if (_map.extent.contains(value.geometry)) { | |
display = "visible" | |
} else { | |
display = "none"; | |
} | |
tile = $('<li id="item'+value.attributes.getValueCI("Number")+'" style="display:'+display+'">'); | |
img = $('<img src="'+value.attributes.getValueCI("Image_URL")+'">'); | |
footer = $('<div class="footer"></div>'); | |
num = $('<div class="num" style="background-color:'+_layerCurrent.color+'">'+value.attributes.getValueCI("Number")+'</div>'); | |
title = $('<div class="blurb">'+value.attributes.getValueCI("Title")+'</div>'); | |
$(footer).append(num); | |
$(footer).append(title); | |
$(tile).append(img); | |
$(tile).append(footer); | |
$("#myList").append(tile); | |
}); | |
// event handlers have to be re-assigned every time you load the list... | |
$("ul.tilelist li").mouseover(tile_onMouseOver); | |
$("ul.tilelist li").mouseout(tile_onMouseOut); | |
$("ul.tilelist li").click(tile_onClick); | |
$("ul.tilelist").animate({ scrollTop: 0 }, { duration: 200 } ); | |
} | |
function refreshList() { | |
var tile; | |
$.each(_layerCurrent.graphics,function(index,value){ | |
//find the corresponding tile | |
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+value.attributes.getValueCI("Number")})[0]; | |
if (_map.extent.contains(value.geometry)) { | |
if ($(tile).css("display") == "none") $(tile).stop().fadeIn(); | |
} else { | |
if ($(tile).css("display") != "none") $(tile).stop().fadeOut(1000); | |
} | |
}); | |
} | |
function buildLayer(arr,iconDir,root) { | |
var layer = new esri.layers.GraphicsLayer(); | |
var pt; | |
var sym; | |
$.each(arr,function(index,value){ | |
pt = new esri.geometry.Point(value.geometry.x,value.geometry.y,value.geometry.spatialReference); | |
sym = new esri.symbol.PictureMarkerSymbol("images/icons/"+iconDir+"/"+root+value.attributes.getValueCI("Number")+".png",22,28); | |
layer.add(new esri.Graphic(pt,sym,value.attributes)); | |
}); | |
return layer; | |
} | |
function getValueCI(field) { | |
var found; | |
$.each(this,function(index,value){ | |
if (index.toUpperCase() == field.toUpperCase()) { | |
found = index; | |
return false; | |
} | |
}); | |
return this[found]; | |
} | |
function handleWindowResize() { | |
var heightDoc = getViewportDimensions()[1]; | |
$("#mainWindow").height(heightDoc - ($("#header").height())); | |
dijit.byId("mainWindow").layout(); | |
$("#paneLeft").height($("#mainWindow").height() - 35); | |
$(".tilelist").height($("#paneLeft").height() - 20); | |
$("#map").height($("#mainWindow").height() - 35); | |
adjustPopup(); | |
} | |
function postSelection() { | |
if (_selected == null) { | |
_map.infoWindow.hide(); | |
} else { | |
_map.infoWindow.setTitle(_selected.attributes.getValueCI("Title")); | |
_map.infoWindow.setContent(_selected.attributes.getValueCI("Short_desc")+"<p><span class='infoWindowLink'>Details >></span></p>"); | |
_map.infoWindow.show(_selected.geometry); | |
$(".infoWindowLink").click(function(e) { | |
showDetails(_selected); | |
}); | |
} | |
$("#hoverInfo").hide(); | |
} | |
function showDetails(graphic) { | |
var mainDiv = $('<div class="details"></div>'); | |
var titleDiv = $('<div class="title">'+graphic.attributes.getValueCI("Title")+'</div>'); | |
var leftDiv = $('<div class="leftDiv"></div>'); | |
var rightDiv = $('<div class="rightDiv"></div>'); | |
var imageDiv = $('<img src="'+graphic.attributes.getValueCI("Image_URL")+'">'); | |
var pictureFrame = $('<div class="pictureFrame"></div>'); | |
$(pictureFrame).append(imageDiv); | |
$(leftDiv).append(pictureFrame); | |
if (graphic.attributes.getValueCI("Address") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Address")) != '') { | |
var addressDiv = $('<div class="address">'+graphic.attributes.getValueCI("Address")+'</div>'); | |
$(leftDiv).append(addressDiv); | |
} | |
} | |
if (graphic.attributes.getValueCI("Hours") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Hours")) != '') { | |
var hoursDiv = $('<div class="address">'+graphic.attributes.getValueCI("Hours")+'</div>'); | |
$(leftDiv).append(hoursDiv); | |
} | |
} | |
if (graphic.attributes.getValueCI("Website") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Website")) != '') { | |
var website = graphic.attributes.getValueCI("Website").toLowerCase(); | |
if (!(website.indexOf("http") >= 0)) { | |
website = "http://"+website; | |
} | |
var websiteDiv = $('<div class="address"><a href="'+website+'" target="_blank">Website</a></div>'); | |
$(leftDiv).append(websiteDiv); | |
} | |
} | |
if (graphic.attributes.getValueCI("Desc1") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Desc1")) != '') { | |
$(rightDiv).append('<div class="desc">'+graphic.attributes.getValueCI("Desc1")+'</div>'); | |
} | |
} | |
if (graphic.attributes.getValueCI("Desc2") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Desc2")) != '') { | |
$(rightDiv).append('<p>'); | |
$(rightDiv).append('<div class="desc">'+graphic.attributes.getValueCI("Desc2")+'</div>'); | |
} | |
} | |
if (graphic.attributes.getValueCI("Desc3") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Desc3")) != '') { | |
$(rightDiv).append('<p>'); | |
$(rightDiv).append('<div class="desc">'+graphic.attributes.getValueCI("Desc3")+'</div>'); | |
} | |
} | |
if (graphic.attributes.getValueCI("Desc4") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Desc4")) != '') { | |
$(rightDiv).append('<p>'); | |
$(rightDiv).append('<div class="desc">'+graphic.attributes.getValueCI("Desc4")+'</div>'); | |
} | |
} | |
if (graphic.attributes.getValueCI("Desc5") != null) { | |
if ($.trim(graphic.attributes.getValueCI("Desc5")) != '') { | |
$(rightDiv).append('<p>'); | |
$(rightDiv).append('<div class="desc">'+graphic.attributes.getValueCI("Desc5")+'</div>'); | |
} | |
} | |
$(mainDiv).append(titleDiv); | |
$(mainDiv).append("<hr>"); | |
$(mainDiv).append(leftDiv); | |
$(mainDiv).append(rightDiv); | |
if ($(mainDiv).find(".desc").length > 0) { | |
var lastDesc = $(mainDiv).find(".desc")[$(mainDiv).find(".desc").length - 1]; | |
$(lastDesc).css("margin-bottom","5px"); | |
} | |
$.fn.colorbox({ | |
html:mainDiv, | |
open:true, | |
maxHeight:$(document).height() - 100, | |
maxWidth:"575px", | |
scrolling:false | |
}); | |
} | |
function hoverInfoPos(x,y){ | |
if (x <= ($("#map").width())-230){ | |
$("#hoverInfo").css("left",x+15); | |
} | |
else{ | |
$("#hoverInfo").css("left",x-25-($("#hoverInfo").width())); | |
} | |
if (y >= ($("#hoverInfo").height())+50){ | |
$("#hoverInfo").css("top",y-35-($("#hoverInfo").height())); | |
} | |
else{ | |
$("#hoverInfo").css("top",y-15+($("#hoverInfo").height())); | |
} | |
$("#hoverInfo").show(); | |
} | |
function adjustPopup() { | |
if (_map) { | |
var box = dojo.contentBox(_map.container); | |
var width = 270, height = 300, // defaults | |
newWidth = Math.round(box.w * 0.45), | |
newHeight = Math.round(box.h * 0.40); | |
if (newWidth < width) { | |
width = newWidth; | |
} | |
if (newHeight < height) { | |
height = newHeight; | |
} | |
_map.infoWindow.resize(width, height); | |
} | |
} | |
function getSortedColorSchemes() { | |
var schemes = []; | |
$.each(COLOR_ORDER.split(","),function(index,value){ | |
schemes.push($.grep(COLOR_SCHEMES,function(n,i){return value == n.iconDir})[0]); | |
}); | |
schemes.reverse(); | |
return schemes; | |
} | |
</script> | |
</head> | |
<body class="claro"> | |
<!-- Header Section--> | |
<div id="header"> | |
<div id="headerText"> | |
<h1 id="title"></h1> | |
<h2 id="subtitle"></h2> | |
</div> | |
<div id="logoArea"> | |
<div id="social"><a id="msLink" href="http://storymaps.esri.com" target="_blank">A story map </a><span class='st_facebook' ></span><span class='st_twitter' ></span> | |
</div> | |
<div id="logo"><a id="logoLink" href="http://www.esri.com" target="_blank"><img id="logoImg" src="images/Logo.png" alt="Esri - Home"></a></div> | |
</div> | |
</div> | |
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" style="width:100%;height:100%" design="headline" gutters="false"> | |
<div region="top" dojotype="dijit.layout.ContentPane" style="width:100%;height:35px;margin:auto;overflow:visible;background-color:#7a7a7a;margin:0px;padding:0px;z-index:101"> | |
<div id="tabs" style="padding-left:17px;"></div> | |
<div id="bookmarksCon"> | |
<div id="bookmarksToggle"><p id="bookmarksTogText"></p></div> | |
<div id="bookmarksDiv"> | |
</div> | |
</div> | |
</div> | |
<div id="paneLeft" dojotype="dijit.layout.ContentPane" | |
region="left" | |
style="overflow:hidden;width:485px;background-color:#b9b9b9"> | |
<ul id="myList" class="tilelist"></ul> | |
</div> | |
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden"> | |
<div id="zoomToggle"> | |
<img id="zoomIn" src="images/ZoomLight_01.png"> | |
<img id="zoomExtent" src="images/ZoomHome.png"> | |
<img id="zoomOut" src="images/ZoomLight_03.png"> | |
</div><!--?zoomToggle--> | |
<div id="hoverInfo"></div> | |
</div> | |
</div> | |
</body> | |
</html> | |
/****************************************************** | |
******************** config section ****************** | |
*******************************************************/ | |
var SHARINGURL = "http://<YOUR WEB SERVER NAME HERE>/sharing/content/items"; | |
var WEBMAP_ID = "<YOUR WEB MAP ID HERE>"; | |
var BOOKMARKS_ALIAS = "Locations"; | |
var COLOR_ORDER = "blue,red,green"; // will only use as many colors as you have content (point) layers | |
var BINGMAPS_KEY = ""; | |
/****************************************************** | |
******************** app variables ******************** | |
*******************************************************/ | |
var COLOR_SCHEMES = [ | |
{iconDir:"blue",iconPrefix:"NumberIconb",color:"#177ff1"}, | |
{iconDir:"red",iconPrefix:"NumberIcon",color:"#fd2d29"}, | |
{iconDir:"green",iconPrefix:"NumberIcong",color:"#22880d"}, | |
{iconDir:"purple",iconPrefix:"IconPurple",color:"#9c46fd"} | |
]; | |
var COLOR_DIM = "#E7E7E7"; | |
var COLOR_FULL = "#FFFFFF"; | |
var _contentLayers = []; | |
var _isMobile = isMobile(); | |
var _map; | |
var _bookmarks; | |
var _layerCurrent; | |
var _selected; | |
var _initExtent; | |
var _dojoReady = false; | |
var _jqueryReady = false; | |
/****************************************************** | |
************************* init ************************ | |
*******************************************************/ | |
dojo.addOnLoad(function() {_dojoReady = true;init()}); | |
jQuery(document).ready(function() {_jqueryReady = true;init()}); | |
/* init comes in two parts because of async call to | |
createMap. */ | |
function init() { | |
if (!_jqueryReady) return; | |
if (!_dojoReady) return; | |
esri.arcgis.utils.arcgisUrl = SHARINGURL; | |
... | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment