same-time displaying in several maps

377
4
08-20-2018 06:18 AM
TokarAndrii
New Contributor III

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

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
TokarAndrii
New Contributor III

Client wants something like it Map Compare | Geofabrik Tools 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

Robert, thank You a lot very useful information

0 Kudos