Hello Community,
I saw a very interesting example on how to display an ESRI map in a Widget on a Portal by John Spirko found HERE.
I am trying to add to the code a bunch of mark symbols that represent open Incidents based on their Latitude and longitude info. The code works fine and the map displays except the part where I am trying to add the mark symbols code on the map it fails with with the error: "markSymbol.setHeight is not a function" (see screenshot) (it's the code from line 31 to 51 in the Client Controller).
I started with something really simple just trying to add a single Symbol at a hard-coded location, and then that marker would be clickable and it opens a popup window with the Incident info but I can't get it to work. Any help is much appreciated.
Here is the Client Controller:
function initializeMap($scope) {
AddArcGISLibrary();
var c = this;
setTimeout(function() {
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/rest/locator", "esri/widgets/Zoom", "esri/widgets/Search", "esri/geometry/Point", "esri/Graphic",
"esri/symbols/PictureMarkerSymbol"
],
function(esriConfig, Map, MapView, locator, Zoom, Search, Point, Graphic, PictureMarkerSymbol) {
esriConfig.apiKey = c.data.apiKey;
var map = new Map({
//https://www.arcgis.com/home/group.html?id=702026e41f6641fb85da88efe79dc166#overview
basemap: "arcgis-navigation"
//basemap: "arcgis-streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
//center: [-117.63321, 33.61281]
center: [-73.431714, 45.514088] //HDV
});
//start of marker drawing on map
var pointMark = new Point(-73.4063889, 45.4784544); //rue Davidson
var markSymbol = drawMark();
var graphicMark = new Graphic(pointMark, markSymbol);
map.graphics.add(graphicMark);
function drawMark() {
console.log("Entering drawMark Function ");
var markSymbol = new PictureMarkerSymbol();
markSymbol.setHeight(16);
markSymbol.setWidth(16);
markSymbol.setUrl("https://dev166272.service-now.com/92cfc09e4754c2105a361098c26d4317.iix");
return markSymbol;
}
//end of marker drawings on map
view.ui.move(["zoom"], "bottom-right");
view.on("click", function(evt) {
search.searchTerm = "";
setMark(evt.mapPoint);
//alert(evt.mapPoint.x);
});
var search = new Search({ //Add Search widget
view: view,
resultGraphicEnabled: false,
popupEnabled: false
});
search.on("search-complete", function(event) {
setMark(event.results[0].results[0].feature.geometry);
});
view.ui.add(search, "top-left"); //Add to the map
function setMark(geometryPoint) {
var serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
var params = {
"location": geometryPoint
};
locator.locationToAddress(serviceUrl, params).then(
function(response) {
// Show the address found
//alert(response.attributes.Region);
view.openPopup({
title: response.attributes.LongLabel,
location: geometryPoint
});
//This centers the map on the click point and zooms in to 18
view.goTo({
center: geometryPoint,
zoom: 18
});
/* // to set values to variables on portal form
$scope.page.g_form.setValue("u_latitude", response.location.y);
$scope.page.g_form.setValue("u_longitude", response.location.x);
$scope.page.g_form.setValue("u_street", response.attributes.ShortLabel);
$scope.page.g_form.setValue("u_city", response.attributes.City);
$scope.page.g_form.setValue("u_region", response.attributes.Region);
$scope.page.g_form.setValue("u_zipcode", response.attributes.Postal)
*/
},
function(err) {
// Show no address found
showAddress("No address found.", geometryPoint);
}
);
}
});
}, 2000);
}
function AddArcGISLibrary() {
var arcGISLib = document.createElement('script');
arcGISLib.setAttribute('src', 'https://js.arcgis.com/4.27');
document.head.appendChild(arcGISLib);
}
Server Script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.apiKey = gs.getProperty('x_snc_esri_service.esri.maps.key');
})();
Body HTML:
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<div id="viewDiv"></div>
I believe the approach would be to add
Documentation on Base Map Places
Documentation on Picture Marker Symbol from ESRI
Working Example before adding mark Symbols (line 31 - 51)
Error when trying to add Markers (line 31-51):
Hello James,
Thanks for the reply yes I did try initializing the PictureMarkerSymbol and it still not working.
var markSymbol = new PictureMarkerSymbol('https://dev166272.service-now.com/92cfc09e4754c2105a361098c26d4317.iix', 25, 25);
//markSymbol.setHeight(16);
//markSymbol.setWidth(16);
//markSymbol.setUrl("https://dev166272.service-now.com/92cfc09e4754c2105a361098c26d4317.iix");
return markSymbol;
