topic Re: How make custom basemaps toogle in ArcGIS JavaScript Maps SDK Questions

How make custom basemaps toogle

TokarAndrii — Sat, 11 Dec 2021 23:29:13 GMT

Hi, I have such code. Need to show only custom basemaps (that published as services) at 2 different frames with sync effect. Why It doesn't work, how fix it?


<script>
    var map, map2;

    require(["esri/map", "dojo/on", "esri/dijit/Basemap",
            "esri/dijit/BasemapGallery", "esri/dijit/BasemapLayer", "esri/arcgis/utils", "dojo/parser",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dojo/domReady!"],
        function (Map, on, Basemap, BasemapGallery, BasemapLayer, arcgisUtils, parser) {

            parser.parse();


            var basemaps = [];

            var customBasemapLayer1 = new BasemapLayer({
                url: "http://ags-pro.ecomm.pp.ua/portal/apps/webappviewer/index.html?id=6e5ced0707fd44219eb95209680784d9"
            });
            var customBasemapLayer2 = new BasemapLayer({
                url: "http://ags-pro.ecomm.pp.ua/portal/apps/webappviewer/index.html?id=6e5ced0707fd44219eb95209680784d9"
            });

            var customBasemap1 = new Basemap({
                layers: [customBasemapLayer1],
                title: "custom Basemap1",
                thumbnailUrl: "custom.png"
            });
            var customBasemap2 = new Basemap({
                layers: [customBasemapLayer2],
                title: "custom Basemap2",
                thumbnailUrl: "custom.png"
            });
            basemaps.push(customBasemap1);
            basemaps.push(customBasemap2);


            map = new Map("map", {
                basemap: "customBasemap1", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
                center: [37.15, 48.18,], // longitude, latitude
                zoom: 12
            });

            map2 = new Map("map2", {
                basemap: "customBasemap2", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
                center: [37.15, 48.18,], // longitude, latitude
                zoom: 12
            });


            //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
            var basemapGallery = new BasemapGallery({
                showArcGISBasemaps: false,
                map: map,
                basemaps: basemaps,
            }, "basemapGallery");
            basemapGallery.startup();

            basemapGallery.on("error", function (msg) {
                console.log("basemap gallery error:  ", msg);
            });

            var basemapGallery2 = new BasemapGallery({
                showArcGISBasemaps: false,
                map: map2,
                basemaps: basemaps,
            }, "basemapGallery2");
            basemapGallery2.startup();

            basemapGallery2.on("error", function (msg) {
                console.log("basemap gallery error:  ", msg);
            });


            //Fires when the zoom is complete.
            map.on("zoom-end", function (evt) {
                map2.setZoom(evt.target.__LOD.level);
            });

            map2.on("zoom-end", function (evt) {
                map.setZoom(evt.target.__LOD.level);
            });

            // Fires when a mouse button is pressed down and the user starts to drag the mouse.
            map.on("mouse-drag-start", function (evt) {
                //The resume() method will cause the listener to be called again.
                handler1.resume();
            });
            map2.on("mouse-drag-start", function (evt) {
                handler2.resume();
            });

            //https://developers.arcgis.com/javascript/3/jsapi/map-amd.html - see docs

            /*The pausable() method provides a means for pausing an event listener, while still preserving the listeners order and state.
             The pausable() method can be called just like on(). The only difference is the returned signal handler will include pause() and resume() methods.*/

            //Fires when the pan is complete.
            var handler1 = on.pausable(map, "pan-end", function (evt) {
                //The pause() method will cause the listener to not be called when the specified event takes place
                handler2.pause();
                map2.centerAt(evt.extent.getCenter());
            });
            var handler2 = on.pausable(map2, "pan-end", function (evt) {
                handler1.pause();
                map.centerAt(evt.extent.getCenter());

            });


        });
</script>

<body class="claro">
<header>
    <div class="toogle" style="position:absolute; left:100px; top:20px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap1', open:false">
            <div data-dojo-type="dijit/layout/ContentPane"
                 style="width:380px; height:280px; overflow:auto;">
                <div id="basemapGallery"></div>
            </div>
        </div>
    </div>
    <div class="toogle" style="position:absolute; right:100px; top:20px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane"
             data-dojo-props="title:'Switch Basemap2', open:false">
            <div data-dojo-type="dijit/layout/ContentPane"
                 style="width:380px; height:280px; overflow:auto;">
                <div id="basemapGallery2"></div>
            </div>
        </div>
    </div>
</header>
<div class="mapContainer">
    <div id="map" class="claro"></div>
    <div id="map2" class="claro"></div>
</div>

Re: How make custom basemaps toogle

RobertScheitlin__GISP — Fri, 05 Oct 2018 12:56:22 GMT

Tokar,

The url that you are attempting to use for a basemap is actually a Web App url not a map service so that is your issue:

http://ags-pro.ecomm.pp.ua/portal/apps/webappviewer/index.html?id=6e5ced0707fd44219eb95209680784d9

is a WAB application url.

You need a map service url (normally a cached/tiled map service).

Re: How make custom basemaps toogle

TokarAndrii — Fri, 05 Oct 2018 13:02:05 GMT

http://mirnograd.ecomm-services.net/portal/apps/webappviewer/index.html?id=34056ac2bbae41b78547daf7f0736c5e

i tied this link and it is the same effect...

Re: How make custom basemaps toogle

RobertScheitlin__GISP — Fri, 05 Oct 2018 13:03:46 GMT

Tokar,

That is still a url to a WAB app NOT a map service.

Notice mirnograd.ecomm-services.net/portal/apps/webappviewer/index.html is is a clue that you are trying to use an app.

The url should have MapServer in the url.

Re: How make custom basemaps toogle

TokarAndrii — Fri, 05 Oct 2018 13:22:00 GMT

http://ags-pro.ecomm.pp.ua/portal/home/webmap/viewer.html?webmap=97459e60f61d4f3eb9c27127f42fd67d is it right link? sorry i am not good yet at differences between them (my gis colleags says it is right link but it not work and cant understand where problem at code or at link)..

Re: How make custom basemaps toogle

RobertScheitlin__GISP — Fri, 05 Oct 2018 13:36:48 GMT

Tokar,

No it is NOT the right link. As I said already the fact that the url has apps/webappviewer/index.html

is is a clue that you are trying to use an app. The url should have MapServer in the url.

Re: How make custom basemaps toogle

TokarAndrii — Sat, 11 Dec 2021 23:29:16 GMT

Robert, I have got links that needed, thank you for advice... and It started work, but with them came problems 1. with sync zoom at different windows -

map.setZoom(evt.target.__LOD.level); dont work...as at this topic Setting initial extent sets to closest zoom level in basemap 
2.when first document loading it is not set different maps (my custom basemaps) at different maps but toogle works correctly. 
Have you any ideas how fix it? Also can you advice me some useful recources to grow me knowledges (except js api for arcgis)

Re: How make custom basemaps toogle

TokarAndrii — Sat, 11 Dec 2021 23:29:19 GMT

for the 1 question

map2.on("zoom-end", function (evt) {
    map2.setExtent(evt.extent)
});

works fine but the other one need solution...

Re: How make custom basemaps toogle

TokarAndrii — Mon, 08 Oct 2018 12:11:13 GMT

A hace got such error

Re: How make custom basemaps toogle

RobertScheitlin__GISP — Mon, 08 Oct 2018 12:49:55 GMT

Tokar,

All baseemaps have to be in the same spatial reference and use the same LODs. I am not sure what your basemaps spatial reference is but the error is stating that it can not reproject to 4326.

Re: How make custom basemaps toogle

TokarAndrii — Mon, 08 Oct 2018 13:12:12 GMT

I think that my basemaps that customs from the services have same spatial reference and use the same LODs. Maybe it is needs to remove all default baseMaps and it cause some conflict? Can this affects the fact that when loads on both maps only one basemap show?

Re: How make custom basemaps toogle

RobertScheitlin__GISP — Mon, 08 Oct 2018 13:16:10 GMT

Yes if all basemaps are NOT in the same Spatial Reference then that will cause an issue with them being displayed.

Re: How make custom basemaps toogle

TokarAndrii — Sat, 11 Dec 2021 23:29:21 GMT

I try this (code bellow) to get the same patial reference and use the same LODs. But get error -

var initialExtent = new Extent({
    "xmin": -7775.523464807349,
    "ymin": -2343.962606496798,
    "xmax": 1825.6498743763282,
    "ymax": 3586.173867704885,
    "spatialReference": {
        "wkid": 4326
    }
});


map = new Map("map", {
    extent: initialExtent,
    basemap: "customBasemap1",
    center: [37.15, 48.18],
    zoom: 12
});

Re: How make custom basemaps toogle

RobertScheitlin__GISP — Mon, 08 Oct 2018 14:54:15 GMT

Tokar,

WKID 4326 should NOT have any values higher then 180 but you have values like -7k and 3586... Your extent values are NOT in the WKID 4326 proper range.