Who can tell can I by used JS API realize same-time displaying in several (different basemaps) maps?
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?
Client wants something like it Map Compare | Geofabrik Tools
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>
Robert, thank You a lot very useful information