<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Adoption Statistics Prototype</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
/*******STYLE FOR THE HOVER FEATURE */
.esri-feature {
letter-spacing: 0em;
font-family: "Oswald", sans-serif;
line-height: 1.55rem;
font-feature-settings: "liga" 1, "calt" 0;
background: fff;
padding: 1em;
}
</style>
<!------------REFERECING ESRI CDN FOR JAVASCRIPT 4.11------------->
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer", //Adding feature layer to the application using FeatureLayer module
"esri/widgets/Legend", //Adding Legend to the application
"esri/widgets/LayerList",
"esri/widgets/Feature"
], function(Map, MapView, FeatureLayer, Legend, LayerList, Feature) { //functions must match the require statements
/***************SETTING THE BASEMAP*********** */
var map = new Map({
basemap: "dark-gray-vector", //specify the type of basemap (gray, topo, streets, dark-gray, etc)
});
/*************** CONTAINER FOR THE ACTUAL MAP WITH DIMENSIONS*********** */
var view = new MapView({
container: "viewDiv",
map: map,
center: [-25.432,34.09042], //longitude, latitude--- this is the center location of the map
zoom: 2 //zoom level, lower number = more zoomed out
});
/*************** ADDING LAYERS TO THE MAP*********** */
var adoptionstats = new FeatureLayer({
portalItem: {
id: "e5683bb09bad438aae49eef2a8796296"
}
});
map.add(adoptionstats, 0); // the zero is for adding order, since only one layer technically do not need this
/***************ADD FEATURE POP UP HERE*************************/
view.when().then(function() {
var legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
var layerList = new LayerList({
view: view
});
// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");
// Create a default graphic for when the application starts
var graphic = {
popupTemplate: {
content: "Mouse over features to show details..."
}
};
// Provide graphic to a new instance of a Feature widget
var feature = new Feature({
graphic: graphic,
view: view
});
view.ui.add(feature, "bottom-right");
view.whenLayerView(adoptionstats).then(function(layerView) {
let highlight;
// listen for the pointer-move event on the View
view.on("pointer-move", function(event) {
// Perform a hitTest on the View
view.hitTest(event).then(function(event) {
// Make sure graphic has a popupTemplate
let results = event.results.filter(function(result) {
return result.graphic.layer.popupTemplate;
});
let result = results[0];
highlight && highlight.remove();
// Update the graphic of the Feature widget
// on pointer-move with the result
if (result) {
feature.graphic = result.graphic;
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}
});
});
});
});
/****************END FEATURE POP UP HERE */
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
