POST
|
<!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>
... View more
3 weeks ago
|
0
|
0
|
63
|
POST
|
I am still getting a broken picture. Can you show the rest of the code? I may be missing where getGraphics is being used. My code is below Thanks!
... View more
3 weeks ago
|
0
|
0
|
70
|
POST
|
Is there a way to do a carriage return using this method?
... View more
06-27-2023
09:32 AM
|
0
|
0
|
827
|
POST
|
Thanks for the information! I did try the Popup Actions. I need to work with it a bit more to get it to work.
... View more
06-27-2023
09:17 AM
|
0
|
0
|
188
|
POST
|
I used to be able to add a button to the pop code (see below and attachments). It worked until after ArcGIS API for JavaScript (legacy) 3.36. Anything after that the html tags do not work for buttons, inputs, etc. Is there a different way to do this? countyTemplate = new PopupTemplate ({
title: "Counties",
description: "<button type='button'onClick=javascript:countyAssessor('{jurisdicti}')>Click for {jurisdicti} County Assessor web page</button>"
});
... View more
06-23-2023
07:38 AM
|
0
|
0
|
2094
|
IDEA
|
I am using the JavaScript 3.x API to create a PDF print out from a print service. I would like tp only show the feature that are shown in the map extent. For example, I use the BLM Surface owner layer. There are about 20 different symbol classes in the symbology. Most of the time the user is zoomed in and there are two to three different symbols. When the map is exported all the symbols show up.
... View more
08-16-2022
11:47 AM
|
1
|
0
|
226
|
POST
|
How would i query value less than todays date? i was trying something like query.where = GETDATE() >= "EXPIRATION_DATE" But this is not working. Any thoughts?
... View more
06-15-2022
11:57 AM
|
0
|
2
|
946
|
POST
|
Not sure if this has been mentioned before, but I would really like to be able to use the same function that I am able to use in ArcGIS Layout View, where I can check to only display items in the TOC that are checked, or to only show items that are in the map extent. Right now in a web map, even after I filter, all of the items still show in the TOC and legend. I can somewhat bypass this by dragging all of the icons I don't want to show up in the legend of a web map/app under the Other option in the Change Style (Unique symbols) Has anyone solved this for the TOC widget?
... View more
02-02-2022
12:05 PM
|
0
|
0
|
473
|
IDEA
|
Can this be done in JavaScript using the Legend widget?
... View more
02-02-2022
12:01 PM
|
0
|
0
|
1127
|
POST
|
Is there a way to only show items in the legend that are displayed in the map? For example, I have 4 symbols for a feature. If I zoom in and only 2 symbols are visible can the legend update to show only those 2 symbols?
... View more
02-02-2022
09:10 AM
|
0
|
0
|
423
|
POST
|
Kory, Has this issue been figured out? The University of Wyoming is using WebRoot. They do not plan on changing that. This is a big issue for many of our staff on campus. Thanks
... View more
07-30-2020
02:21 PM
|
0
|
1
|
916
|
POST
|
Has this problem been fixed? This is a 2 year old thread and i think they should have more information for us by now? I am using ArcGIS Pro 2.5 and we also use Webroot. We have no access modify the Webroot settings.
... View more
02-20-2020
09:40 AM
|
0
|
2
|
2339
|
POST
|
This works, but then you cannot select any text inside the popup. is there a way to work around that?
... View more
11-22-2019
02:32 PM
|
0
|
0
|
1118
|
Title | Kudos | Posted |
---|---|---|
1 | 08-16-2022 11:47 AM | |
1 | 07-20-2017 06:07 AM | |
1 | 06-28-2017 06:36 AM | |
1 | 06-23-2016 06:54 AM | |
1 | 03-19-2015 01:21 PM |
Online Status |
Offline
|
Date Last Visited |
3 weeks ago
|