same-time displaying in several maps

TokarAndrii · ‎08-20-2018

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

RobertScheitlin__GISP · ‎08-20-2018

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?

TokarAndrii · ‎08-20-2018

Client wants something like it Map Compare | Geofabrik Tools

RobertScheitlin__GISP · ‎08-20-2018

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TokarAndrii · ‎08-20-2018

Robert, thank You a lot very useful information