topic BaseMapGallery Expand did not work in ArcGIS JavaScript Maps SDK Questions

BaseMapGallery Expand did not work

EssaddekMohammed — Tue, 19 Feb 2019 11:02:29 GMT

Hello,

I am implementing basemap gallery expand as indicated in the sandbox, but it is not working.

Is there an api issue ?

Regards.

Re: BaseMapGallery Expand did not work

RobertScheitlin__GISP — Tue, 19 Feb 2019 13:36:11 GMT

Essadek,

There is no API issue that I am aware of. Most likely there is an issue in your code. Please share your code for review.

Re: BaseMapGallery Expand did not work

EssaddekMohammed — Sat, 11 Dec 2021 14:07:35 GMT

Hello, this is my code combining two solutions in one page, by the way, your help mentioned here is not working in this page.

initView = function (settings) {
    var isSearchGra = false;

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Search",
        "esri/widgets/Locate",
        "esri/widgets/Compass",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/widgets/BasemapGallery",
        "esri/widgets/Expand",
        "esri/geometry/Point",
        "esri/geometry/support/webMercatorUtils",
        "esri/portal/Portal",
        "esri/widgets/BasemapGallery/support/PortalBasemapsSource",
        "esri/support/basemapUtils",
    ], function (Map, MapView, Search,
        Locate, Compass, Graphic, GraphicsLayer, BasemapGallery, SketchViewModel,
        Expand, Point, webMercatorUtils, Portal, PortalBasemapsSource, basemapUtils, ) {

            function GeoLocatePosition(longitude, latitude) {
                $.post("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location=" + longitude + "," + latitude + "",
                    function (data) {
                        var json = JSON.parse(data);
                        if (json.address) {
                            $("#location").val(json.address.Match_addr);
                        }
                    });

            }
        
            var basemap = settings.basemap !== "" ? settings.basemap : "hybrid";

            let editGraphic;

            // GraphicsLayer to hold graphics created via sketch view model
            const graphicsLayer = new GraphicsLayer({
                id: "tempGraphics"
            });

            var map = new Map({
                basemap: basemap,
                layers: [graphicsLayer]
            });

            var mapCenter = {
                latitude: settings.latitude !== '' ? settings.latitude : 34.01325,
                longitude: settings.longitude !== '' ? settings.longitude : -6.83255
            };

            var view = new MapView({
                container: settings.mapDivId,    // Reference to the DOM node that will contain the view
                map: map,               // References the map object created in step 3
                zoom: 14,                // Sets zoom level based on level of detail (LOD)
                center: [mapCenter.longitude, mapCenter.latitude]        // Sets center point of view using longitude,latitude
            });

            var searchWidget = new Search({
                view: view
            });

            var locate = new Locate({
                view: view
            });

            if (settings.showlocation) {
                view.ui.add(locate, {
                    position: settings.topleft
                });
            }

            var compass = new Compass({
                view: view
            });

            if (settings.showcompass) {
                view.ui.add(compass, {
                    position: settings.topleft
                });
            }

            // Add the search widget to the top right corner of the view
            view.ui.add(searchWidget, {
                position: settings.topright,
            });

            // Create a BasemapGallery widget instance and set
            // its container to a div element

            var allThoseEsriBasemaps = new PortalBasemapsSource({
                query: {
                    // title: "ArcGIS Online Basemaps",owner: "esri"
                    id: '702026e41f6641fb85da88efe79dc166'
                }
            });

            var basemapGallery = new BasemapGallery({
                source: allThoseEsriBasemaps,
                view: view,
                container: document.createElement("div")
            });

            // Create an Expand instance and set the content
            // property to the DOM node of the basemap gallery widget

            var bgExpand = new Expand({
                view: view,
                content: basemapGallery
            });

            // Add the expand instance to the ui

            view.ui.add(bgExpand, settings.bottomright);

            var point = {
                type: "point", // autocasts as new Point()
                longitude: mapCenter.longitude,
                latitude: mapCenter.latitude
            };

            // Create a symbol for drawing the point
            const pointSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                color: [226, 119, 40],
                outline: { // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 2
                }
            };

            const polylineSymbol = {
                type: "simple-line", // autocasts as new SimpleLineSymbol()
                color: "#8A2BE2",
                width: "4",
                style: "dash"
            };

            const polygonSymbol = {
                type: "simple-fill", // autocasts as new SimpleFillSymbol()
                color: "rgba(138,43,226, 0.8)",
                style: "solid",
                outline: {
                    color: "white",
                    width: 1
                }
            };

            var pointGraphic = new Graphic({
                geometry: webMercatorUtils.geographicToWebMercator(point),
                symbol: pointSymbol
            });

            GeoLocatePosition(mapCenter.longitude, mapCenter.latitude);

            $("#ShowCompassButton").on("ifChecked", function (e) {
                if (compass.destroyed) {
                    compass = new Compass({
                        view: view
                    });
                }
                view.ui.add(compass, {
                    position: settings.topleft
                });
            });

            $("#ShowCompassButton").on("ifUnchecked", function (e) {
                compass.destroy();
            });

            $("#ShowLocationButton").on("ifChecked", function (e) {
                if (locate.destroyed) {
                    locate = new Locate({
                        view: view
                    });
                }
                view.ui.add(locate, {
                    position: settings.topleft
                });
            });

            $("#ShowLocationButton").on("ifUnchecked", function (e) {
                locate.destroy();
            });


            searchWidget.on("select-result", function (event) {
                $("#location").val(event.result.name);
                $("#longitude").val(event.result.feature.geometry.longitude);
                $("#latitude").val(event.result.feature.geometry.latitude);
                console.log("The selected search result: ", event);
            });
        
            view.when(function () {

                graphicsLayer.graphics.add(pointGraphic);

                const sketchViewModel = new SketchViewModel({
                    view,
                    layer: graphicsLayer,
                    pointSymbol,
                    polylineSymbol,
                    polygonSymbol
                });

                setUpClickHandler();

                // Listen the sketchViewModel's update-complete and update-cancel events
                sketchViewModel.on("update-complete", updateGraphic);
                sketchViewModel.on("update-cancel", updateGraphic);

                // Runs when sketchViewModel's update-complete or update-cancel
                // events are fired.
                function updateGraphic(event) {
                    // Create a new graphic and set its geometry event.geometry
                    debugger;
                    var graphic = new Graphic({
                        geometry: event.geometry,
                        symbol: editGraphic.symbol
                    });
                    if (isSearchGra) {
                        graphic.attributes = editGraphic.attributes;
                        view.graphics.add(graphic);
                    } else {
                        graphicsLayer.add(graphic);
                    }
                    // set the editGraphic to null update is complete or cancelled.
                    editGraphic = null;
                }

                // set up logic to handle geometry update and reflect the update on "graphicsLayer"
                function setUpClickHandler() {
                    view.on("click", function (event) {
                        view.hitTest(event).then(function (response) {
                            var results = response.results;
                            if (results.length > 0) {
                                for (var i = 0; i < results.length; i++) {
                                    // Check if we're already editing a graphic
                                    var gra = results[i].graphic;
                                    if (!editGraphic && gra.attributes && gra.attributes.hasOwnProperty("Match_addr")) {
                                        isSearchGra = true;
                                        editGraphic = results[i].graphic;
                                        view.graphics.remove(editGraphic);
                                        sketchViewModel.update(editGraphic);
                                        break;
                                    } else if (!editGraphic && gra.layer.id === "tempGraphics") {
                                        isSearchGra = true;
                                        // Save a reference to the graphic we intend to update
                                        editGraphic = results[i].graphic;

                                        // Remove the graphic from the GraphicsLayer
                                        // Sketch will handle displaying the graphic while being updated
                                        graphicsLayer.remove(editGraphic);
                                        sketchViewModel.update(editGraphic);
                                        break;
                                    }
                                }
                            }
                        });
                    });
                }
            });

            map.watch('basemap', function (evt) {
                console.info(evt.portalItem.id);
                switch (evt.portalItem.id) {
                    case '8bf7167d20924cbf8e25e7b11c7c502c':
                        sbasemap = 'streets';
                        break;
                    case '86de95d4e0244cba80f0fa2c9403a7b2':
                        sbasemap = 'satellite';
                        break;
                    case '28f49811a6974659988fd279de5ce39f':
                        sbasemap = 'hybrid';
                        break;
                    case '6e03e8c26aad4b9c92a87c1063ddb0e3':
                        sbasemap = 'topo';
                        break;
                    case '979c6cc89af9449cbeb5342a439c6a76':
                        sbasemap = 'gray';
                        break;
                    case '8b3d38c0819547faa83f7b7aca80bd76':
                        sbasemap = 'gray-vector';
                        break;
                    case '358ec1e175ea41c3bf5c68f0da11ae2b':
                        sbasemap = 'dark-gray';
                        break;
                    case '5ae9e138a17842688b0b79283a4353f6':
                        sbasemap = 'oceans';
                        break;
                    case 'd94dcdbe78e141c2b2d3a91d5ca8b9c9':
                        sbasemap = 'national-geographic';
                        break;
                    case 'aab054ab883c4a4094c72e949566ad40':
                        sbasemap = 'terrain';
                        break;
                    case 'b834a68d7a484c5fb473d4ba90d35e71':
                        sbasemap = 'osm';
                        break;
                    case 'c50de463235e4161b206d000587af18b':
                        sbasemap = 'streets-navigation-vector';
                        break;
                    case '00f90f3f3c9141e4bea329679b257142':
                        sbasemap = 'streets-vector';
                        break;
                    default:
                        sbasemap = 'noStringConstant';
                }

                $("#MapType").val(sbasemap);
                console.info(sbasemap);
            });


        });

};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Regards.

Re: BaseMapGallery Expand did not work

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:07:38 GMT

Your require array and Subsequent vars are out of order. You had BasemapGallery then SketchViewModel instead of SketchViewModel then BasemapGallery.

require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Search",
        "esri/widgets/Locate",
        "esri/widgets/Compass",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/widgets/BasemapGallery",
        "esri/widgets/Expand",
        "esri/geometry/Point",
        "esri/geometry/support/webMercatorUtils",
        "esri/portal/Portal",
        "esri/widgets/BasemapGallery/support/PortalBasemapsSource",
        "esri/support/basemapUtils",
    ], function (Map, MapView, Search,
        Locate, Compass, Graphic, GraphicsLayer, SketchViewModel, BasemapGallery,
        Expand, Point, webMercatorUtils, Portal, PortalBasemapsSource, basemapUtils, ) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: BaseMapGallery Expand did not work

EssaddekMohammed — Tue, 19 Feb 2019 14:23:33 GMT

Hello, this solved the problem.

What about the second ? moving the search result ? I've mentioned your above help in a link.

Thanks in advance.

Re: BaseMapGallery Expand did not work

RobertScheitlin__GISP — Tue, 19 Feb 2019 14:36:08 GMT

So what is the error in the console and if there is no error then have you added a code break to be able to step through the code and see there it is failing?

Re: BaseMapGallery Expand did not work

EssaddekMohammed — Sat, 11 Dec 2021 14:07:41 GMT

Hello, the error in the consol could be find in the image bellow;

In the line :

else if (!editGraphic && gra.layer.id === "tempGraphics") {
      isSearchGra = true;
      // Save a reference to the graphic we intend to update
      editGraphic = results[i].graphic;
      // Remove the graphic from the GraphicsLayer
      // Sketch will handle displaying the graphic while being updated
      graphicsLayer.remove(editGraphic);
      sketchViewModel.update(editGraphic);
      break;
}‍‍‍‍‍‍‍‍‍‍

in the line : sketchViewModel.update(editGraphic);

Regards

Re: BaseMapGallery Expand did not work

EssaddekMohammed — Tue, 26 Feb 2019 09:58:55 GMT

Hello Robert,

I am waiting for your intervention.

Regards

Mohammed

Re: BaseMapGallery Expand did not work

RobertScheitlin__GISP — Tue, 26 Feb 2019 13:56:14 GMT

Mohammed,

So have you tried as I suggested. Put a breakpoint in your code and inspect the editGraphic to see if it is undefined or null?

Re: BaseMapGallery Expand did not work

EssaddekMohammed — Sat, 11 Dec 2021 14:07:43 GMT

Hello,

At the first call editGraphics's value is null,

The error comes after this line of code :

      sketchViewModel.update(editGraphic);

Regards.

Re: BaseMapGallery Expand did not work

RobertScheitlin__GISP — Thu, 28 Feb 2019 13:56:22 GMT

Then you need to debug why editGraphic is null.