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>
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?
Yes if all basemaps are NOT in the same Spatial Reference then that will cause an issue with them being displayed.
I try this (code bellow) to get the same patial reference and use the same LODs. But get error -
TypeError: a.equals is not a function[Подробнее] 3.25:577:318
_convertGeometry https://js.arcgis.com/3.25/:577:318
_extentUtil https://js.arcgis.com/3.25/:590:113
constructor https://js.arcgis.com/3.25/:566:101
c/< https://js.arcgis.com/3.25/:200:83
<анонимная> http://localhost:63342/cherkassy05102018/index3.html:71:23
ja https://js.arcgis.com/3.25/:28:254
ha/< https://js.arcgis.com/3.25/:29:8
ka https://js.arcgis.com/3.25/:28:378
ha https://js.arcgis.com/3.25/:28:453
q https://js.arcgis.com/3.25/:31:179
g.injectUrl/g< https://js.arcgis.com/3.25/:35:419
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 });
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.