<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<link rel="shortcut icon" href="//uwoperations.uwyo.edu/uwopsmaps/Documents/Icons/favicon.ico" />
<title>Query Attachments Buildings</title>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#attachmentsDiv {
height: 100%;
width: 30%;
float: left;
padding: 20px;
overflow: auto;
min-width: 240px;
}
#viewDiv {
height: 100%;
max-width: 70%;
}
.queryImg {
width: 175px;
padding-right: 5px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" />
<link rel="stylesheet" href="css/allStyles.css">
<script src="https://js.arcgis.com/4.29/"></script>
<!-- <script src="js/map.js"></script>
<script src="js/baseQueries.js"></script>-->
<script>
require ([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/PopupTemplate",
"esri/popup/content/AttachmentsContent",
"esri/popup/content/support/ImageMediaInfoValue",
"esri/popup/content/ImageMediaInfo",
"esri/popup/content/MediaContent"
], function (
Map, MapView, FeatureLayer, Legend, PopupTemplate, AttachmentsContent, ImageMediaInfoValue, ImageMediaInfo, MediaContent
)
{
function showAtts (event)
{
view.hitTest (event).then (function getGraphics (response)
{
if (response.results.length) {
graphic = response.results[0].graphic;
console.log (graphic);
lyrUrl = graphic.layer.url + "/0/";
objID = graphic.getAttribute ('RemarkPoint.OBJECTID');
attID = graphic.getAttribute ('RemarkPoint__ATTACH.ATTACHMENTID');
imgUrlPath = lyrUrl + objID + "/attachments/" + attID;
let imageMediaInfoValue = new ImageMediaInfoValue ({
sourceURL: imgUrlPath
});
let imageElement = new ImageMediaInfo ({
title: "{LONGNAME}",
caption: "Photo",
value: imageMediaInfoValue
});
let mediaElement = new MediaContent ({
mediaInfos: [imageElement]
});
let template = new PopupTemplate ({
title: "{LONGNAME}",
outFields: ["*"],
showAttachments: true,
content: [mediaElement]
});
layer.popupTemplate = template;
}
});
}
// get layer from online portal
const layer = new FeatureLayer ({
url:
"https://uwoperations.uwyo.edu/hostgis/rest/services/CampusMap/CampusMap_Buildings/FeatureServer/0",
//popupTemplate: template,
outFields: ["*"]
});
// setup the map
const map = new Map ({
basemap: "topo-vector",
layers: [layer]
});
const view = new MapView ({
container: "viewDiv",
map: map,
center: [-105.567, 41.313193],
zoom: 16
});
view.ui.add (new Legend ({view: view}), "bottom-left");
let highlight;
view.on ("click", function (event)
{
clearMap ();
queryFeatures (event);
showAtts (event);
});
function queryFeatures (screenPoint)
{
const point = view.toMap (screenPoint);
// Query the for the object ids within 800m from where the user clicked
layer.queryObjectIds ({
geometry: point,
spatialRelationship: "intersects",
distance: 10,
units: "meters",
returnGeometry: false,
outFields: ["*"]
})
.then (function (objectIds)
{
if (!objectIds.length) {
showMessage ();
return;
}
// Highlight the query-area on the map
view.whenLayerView (layer).then (function (layerView)
{
if (highlight) {
highlight.remove ();
}
highlight = layerView.highlight (objectIds);
});
// Query the for the attachments from the object ids found
return layer.queryAttachments ({
attachmentTypes: ["image/jpeg"],
objectIds: objectIds
});
})
.then (function (attachmentsByFeatureId)
{
if (!attachmentsByFeatureId) {
return;
}
if (Object.keys (attachmentsByFeatureId).length === 0) {
const infoP = document.createElement ("p");
infoP.innerHTML = "<b>There are no building image/jpeg attachments located in your query area.</b>";
document.getElementById ("queryResults").appendChild (infoP);
}
// Display the attachments
Object.keys (attachmentsByFeatureId)
.forEach (function (objectId)
{
const attachments = attachmentsByFeatureId[objectId];
attachments.forEach (function (attachment)
{
const image = document.createElement ("img");
image.src=attachment.url;
image.className = "queryImg";
document.getElementById ("queryResults").appendChild (image);
});
});
})
.catch (function (error)
{
showMessage ();
})
}
function showMessage ()
{
clearMap ();
const infoP = document.createElement ("p");
infoP.innerHTML = "<b>There are no building image/jpeg attachments located in your query area. Please click within the feature layer to get results.</b>";
document.getElementById ("queryResults").appendChild (infoP);
}
// Clear attachments from div
function clearMap ()
{
if (highlight) {
highlight.remove ();
}
const att = document.getElementById ("queryResults");
while (att.firstChild) {
att.removeChild (att.firstChild);
}
}
});
</script>
</head>
<body>
<div id="attachmentsDiv" class="esri-widget">
<h2 align="center"> <input id="LogoA" title="UW Website" type="image" alt="LogoA" src="Icons/UWWebA.png"
onClick="javascript: return popitup ('http://www.uwyo.edu/')" /></h2>
<h2>Building Photos</h2>
<p>Click somewhere in the map to query for images of trees located on a block within 800m of your desired location.
</p>
<div id="queryResults"></div>
</div>
<div id="viewDiv"></div>
</body>
</html>
