Merge pull request #3 from 2gis/JAM-0_Add_osm_in_compare

JAM-0: Add OSM map in compare tool

index.html

@@ -9,6 +9,9 @@
         <script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
         <link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet" />
 
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""/>
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
+
         <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
         <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
         <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
@@ -46,11 +49,17 @@
                 position: absolute;
                 top: 10px;
                 right: 10px;
+                // Лефлет накладывает карту с большим z-уровнем 
+                // (зачем - не знаю), поэтому чтобы контролы были видны - делаем так
+                z-index: 1000;
             }
             #langSelect {
                 position: absolute;
                 top: 35px;
                 right: 10px;
+                // Лефлет накладывает карту с большим z-уровнем 
+	        // (зачем - не знаю), поэтому чтобы контролы были видны - делаем так
+                z-index: 1000;
             }
         </style>
     </head>
@@ -69,6 +78,7 @@
         <script src="./mapbox.js"></script>
         <script src="./here.js"></script>
         <script src="./yandex.js"></script>
+        <script src="./osm.js"></script>
         <script src="./index.js"></script>
     </body>
 </html>

index.js

@@ -57,6 +57,7 @@
         mapbox: mapboxApi,
         here: hereApi,
         yandex: yandexApi,
+        osm: osmApi,
     };
 
     const firstApi = mapglApi;

osm.js

@@ -0,0 +1,62 @@
+const osmApi = {
+    type: "osm",
+
+    map: undefined,
+    container: undefined,
+
+    init(elementId) {
+      if (!window.L) {
+        return;
+      }
+
+      if (this.map && this.container) {
+        this.container.style.display = "block";
+        this.update();
+        return;
+      }
+
+      this.container = document.createElement("div");
+      this.container.classList.add("map-container");
+
+      const wrapper = document.getElementById(elementId);
+      wrapper.appendChild(this.container);
+
+      this.map = new window.L.Map(this.container, {
+        center: [state.lat, state.lng],
+        zoom: state.zoom,
+        attributionControl: false,
+      });
+      window.L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
+        this.map
+      );
+
+      const onMove = () => {
+        const center = this.map.getCenter();
+
+        window.updateAnotherMap(this, {
+          lng: center.lng,
+          lat: center.lat,
+          zoom: this.map.getZoom(),
+          rotation: 0,
+          pitch: 0,
+        });
+      };
+
+      this.map.on("zoom", onMove);
+      this.map.on("move", onMove);
+    },
+
+    update() {
+      if (!this.map) {
+        return;
+      }
+
+      this.map.setView([state.lat, state.lng], state.zoom);
+    },
+
+    hide() {
+      if (this.container) {
+        this.container.style.display = "none";
+      }
+    },
+  };