Last active
February 29, 2016 17:48
-
-
Save ssylvia/e221ffadef823fe5d577 to your computer and use it in GitHub Desktop.
JavaScript used in this blog post: https://developerscorner.storymaps.arcgis.com/add-context-to-story-map-journal-with-an-index-map-ccc3c8ca12b5#.e8dcfwisq
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
// Loading all required dojo and esri modules used in index map | |
require([ | |
'dojo/topic', | |
'dojo/_base/array', | |
'dojo/dom-geometry', | |
'esri/map', | |
'esri/layers/CSVLayer', | |
'esri/Color', | |
'esri/symbols/SimpleMarkerSymbol', | |
'esri/renderers/UniqueValueRenderer', | |
], function( | |
topic, | |
array, | |
domGeom, | |
Map, | |
CSVLayer, | |
Color, | |
SimpleMarkerSymbol, | |
UniqueValueRenderer | |
) { | |
// Custom Javascript to be executed while the application is initializing goes here | |
// The application is ready | |
topic.subscribe("tpl-ready", function(){ | |
// Custom Javascript to be executed when the application is ready goes here | |
// CONFIGURATION VARIABLES START | |
// Update the label fields for those used in your CSV file. Be sure that it matches | |
// exactly (including case) | |
var LabelField = 'Label'; | |
var StoryIndexField = 'StoryIndex'; | |
var ActiveField = 'Active'; | |
// Change the colors of the default and active symbols on the map. | |
// Color documentation available here: | |
// https://dojotoolkit.org/reference-guide/1.10/dojo/_base/Color.html | |
var defaultMarkerColor = new Color([114, 100, 87, 0.7]); | |
var activeMarkerColor = new Color([0, 105, 0, 0.9]); | |
// The path to your csv file. | |
var csvPath = 'resources/index-map/index-map-layer.csv'; | |
// CONFIGURATION VARIABLES END | |
// variable stores currently selected graphic | |
var selectedGraphic = false; | |
// Removes the help text tooltip after the user first clicks on the map | |
$('#index-map').click(function(){ | |
$('#index-map-helper').removeClass('active'); | |
}); | |
// Create the index map | |
var indexMap = new Map('index-map',{ | |
// Change the following options to set the default view of your index map. | |
// Option documentation is here: | |
// https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1 | |
basemap: 'gray', | |
center: [-95,38], | |
zoom: 3, | |
minZoom: 1, | |
maxZoom: 8, | |
// You don't need to change these | |
logo: false, | |
showAttribution: false | |
}); | |
// Load CSV File as point later | |
var indexMapLayer = csv = new CSVLayer(csvPath); | |
// Create simple point symbols | |
var activeMarker = new SimpleMarkerSymbol('solid', 15, null, activeMarkerColor); | |
var defaultMarker = new SimpleMarkerSymbol('solid', 12, null, defaultMarkerColor); | |
// Change the CSV Layer renderer to use the symbols we just created | |
var renderer = new UniqueValueRenderer(defaultMarker,ActiveField); | |
renderer.addValue('TRUE', activeMarker); | |
indexMapLayer.setRenderer(renderer); | |
// Add CSV layer to map | |
indexMap.addLayer(indexMapLayer); | |
// Select current section in index map on Loading | |
setIconDisplay(app.data.getCurrentSectionIndex()); | |
// Add map events | |
indexMapLayer.on('click',function(event){ | |
$('#index-map-helper').removeClass('active'); | |
hideIndexMapInfo(); | |
topic.publish('story-navigate-section', event.graphic.attributes[StoryIndexField]); | |
}); | |
indexMapLayer.on('mouse-over',function(event){ | |
indexMap.setCursor('pointer'); | |
setIndexMapInfo(event.graphic); | |
}); | |
indexMapLayer.on('mouse-out',function(){ | |
indexMap.setCursor('default'); | |
hideIndexMapInfo(); | |
}); | |
indexMap.on('extent-change',function(){ | |
indexMap.setCursor('default'); | |
hideIndexMapInfo(); | |
moveSelectedToFront(); | |
}); | |
topic.subscribe('story-load-section', setIconDisplay); | |
// Select current section in index map (Update symbol color) | |
function setIconDisplay(index){ | |
selectedGraphic = false; | |
if (index !== null){ | |
array.forEach(indexMapLayer.graphics,function(g){ | |
if (g.attributes[StoryIndexField].toString() === index.toString()){ | |
g.attributes[ActiveField] = 'TRUE'; | |
if(g.getDojoShape()){ | |
selectedGraphic = g; | |
g.getDojoShape().moveToFront(); | |
} | |
indexMap.centerAt(g.geometry); | |
} | |
else{ | |
g.attributes[ActiveField] = 'FALSE'; | |
} | |
}); | |
indexMapLayer.redraw(); | |
} | |
} | |
// Make sure selected point is on top. | |
function moveSelectedToFront(){ | |
if (selectedGraphic) { | |
selectedGraphic.getDojoShape().moveToFront(); | |
} | |
} | |
// Hide point tooltip | |
function hideIndexMapInfo(){ | |
$('#index-map-info').hide(); | |
} | |
// Show point tooltip | |
function setIndexMapInfo(graphic){ | |
$('#index-map-info').html(graphic.attributes[LabelField]); | |
if (graphic.getDojoShape()){ | |
graphic.getDojoShape().moveToFront(); | |
} | |
positionIndexMapInfo(graphic); | |
} | |
// Move tooltip next to selected point | |
function positionIndexMapInfo(graphic){ | |
var pos = domGeom.position(graphic.getNode()); | |
$('#index-map-info').css({ | |
'top': pos.y - (pos.h/2) - 3, | |
'left': pos.x + pos.w | |
}).show(); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment