same-time displaying in several maps

TokarAndrii — Mon, 20 Aug 2018 13:18:54 GMT

Who can tell can I by used JS API realize same-time displaying in several (different basemaps) maps?

Re: same-time displaying in several maps

RobertScheitlin__GISP — Mon, 20 Aug 2018 13:40:54 GMT

Tokar,

Are you asking if you can have several different basemaps displaying at the same time? If that is your question then my question is why, since only one basemap can been seen at a time?

Re: same-time displaying in several maps

TokarAndrii — Mon, 20 Aug 2018 13:43:13 GMT

Client wants something like it Map Compare | Geofabrik Tools

Re: same-time displaying in several maps

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:11:58 GMT

Tokar,

OK that explains your request a lot better. Yes in the JS API you can have several maps all with different basemaps and have them linked like that. Here is a simple sample:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Simple Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    div#table {
      position: fixed;
      width: 100%;
      height: 100%;
    }

    tr {
      display: table-row;
      vertical-align: inherit;
      border-color: inherit;
    }

    table {
      display: table;
      border-collapse: separate;
      border-spacing: 2px;
      border-color: grey;
    }
  </style>
  <script src="https://js.arcgis.com/3.25/"></script>
  <script>
    var map, map2, map3, map4;

    require(["esri/map", "dojo/on", "dojo/domReady!"], function(Map, on) {
      map = new Map("map", {
        basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 13
      });
      map2 = new Map("map2", {
        basemap: "streets", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 13
      });
      map3 = new Map("map3", {
        basemap: "hybrid", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 13
      });
      map4 = new Map("map4", {
        basemap: "osm", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        center: [-122.45, 37.75], // longitude, latitude
        zoom: 13
      });

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

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

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

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

      map.on("mouse-drag-start", function(evt) {
        handler1.resume();
      });
      map2.on("mouse-drag-start",function(evt){
        handler2.resume();
      });
      map3.on("mouse-drag-start", function(evt) {
        handler3.resume();
      });
      map4.on("mouse-drag-start",function(evt){
        handler4.resume();
      });

      var handler1 = on.pausable(map, "pan-end", function(evt) {
        handler2.pause();
        handler3.pause();
        handler4.pause();
        map2.centerAt(evt.extent.getCenter());
        map3.centerAt(evt.extent.getCenter());
        map4.centerAt(evt.extent.getCenter());
      });
      var handler2 = on.pausable(map2, "pan-end", function(evt) {
        handler1.pause();
        handler3.pause();
        handler4.pause();
        map.centerAt(evt.extent.getCenter());
        map3.centerAt(evt.extent.getCenter());
        map4.centerAt(evt.extent.getCenter());
      });
      var handler3 = on.pausable(map3, "pan-end", function(evt) {
        handler1.pause();
        handler2.pause();
        handler4.pause();
        map.centerAt(evt.extent.getCenter());
        map2.centerAt(evt.extent.getCenter());
        map4.centerAt(evt.extent.getCenter());
      });
      var handler4 = on.pausable(map4, "pan-end", function(evt) {
        handler1.pause();
        handler2.pause();
        handler3.pause();
        map.centerAt(evt.extent.getCenter());
        map2.centerAt(evt.extent.getCenter());
        map3.centerAt(evt.extent.getCenter());
      });
    });
  </script>
</head>

<body>
  <div id="table">
    <table width="100%">
      <!-- first row -->
      <tbody>
        <tr id="tr0">
          <td class="maps" id="column0" style="width: 50%; display: table-cell;">
            <div id="map"></div>
          </td>
          <td class="maps" id="column1" style="width: 50%; display: table-cell;">
            <div id="map2"></div>
          </td>
        </tr>
        <tr id="tr1">
          <td class="maps" id="column2" style="width: 50%; display: table-cell;">
            <div id="map3"></div>
          </td>
          <td class="maps" id="column3" style="width: 50%; display: table-cell;">
            <div id="map4"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: same-time displaying in several maps

TokarAndrii — Tue, 21 Aug 2018 06:27:40 GMT

Robert, thank You a lot very useful information

topic Re: same-time displaying in several maps in ArcGIS JavaScript Maps SDK Questions

same-time displaying in several maps

Re: same-time displaying in several maps

Re: same-time displaying in several maps

Re: same-time displaying in several maps

Re: same-time displaying in several maps