Unable to add Marks on ESRI map in Portal Widget

[ahammoud]

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):

[James Chun]

Hey @ahammoud ,

Did you make sure that you added all the JS Includes [sp_js_include] and Dependency JS Includes [m2m_sp_dependency_js_include] records?

And can you try initializing the PictureMarkerSymbol object to something like:

var pictureMarkerSymbol = new PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 51);

Refer to the documentation for details - https://developers.arcgis.com/javascript/3/jsapi/picturemarkersymbol-amd.html#

Thanks

[ahammoud]

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;

[James Chun · Accepted solution]

Hi @ahammoud ,

A different error this time!

I don't have experience in implementing ArcGIS but shouldn't the following

map.graphics.add(graphicMark);

BE INSTEAD

view.graphics.add(graphicMark);

Thanks

[ahammoud]

Yes that worked, thank you. But I thought I have to add it to the "map" object not "view" object, why the "view" how did you figure it out ?  

Now I have to figure out the rest how to make it clickable with a window pop-up and layers to it.