From 3fc385b31671d5f84c066c2c6a567bb68a83a8b7 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Mon, 29 Aug 2022 17:40:28 +0300
Subject: Mapbox base layer and loading works

---
 src/Map.tsx | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/Map.tsx b/src/Map.tsx
index 011d5c8..76b1f11 100644
--- a/src/Map.tsx
+++ b/src/Map.tsx
@@ -1,6 +1,6 @@
-import React, { Fragment, useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 // @ts-ignore
-import { mapboxgl, LngLatLike } from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
+import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
 
 import {
   MAPBOX_ACCESS_TOKEN,
@@ -18,15 +18,15 @@ interface MapProps {
 function Map({ slider, images }: MapProps) {
   const mapContainer = useRef(null);
   const map = useRef(null);
-  const [center] = useState<LngLatLike>([35, 31.9]);
+  const [center] = useState<mapboxgl.LngLatLike>([35, 31.9]);
   const [zoom] = useState([6.3]);
 
   useEffect(() => {
     if (map.current) return; // initialize map only once
-    map.current = new mapboxgl({
+    map.current = new mapboxgl.Map({
       accessToken: MAPBOX_ACCESS_TOKEN,
       container: mapContainer.current,
-      style: 'mapbox://styles/mapbox/streets-v11',
+      style: "mapbox://styles/mapbox/dark-v9",
       center,
       zoom,
       minZoom: 5,
@@ -37,20 +37,15 @@ function Map({ slider, images }: MapProps) {
 
   return (
     <div>
-      <div ref={mapContainer} className="map-container" />
+      <div ref={mapContainer} className="map-container" style={{
+        height: "100vh",
+        width: "100vw"
+      }} />
     </div>
   );
 
   // return (
-  //   <Mapbox
-  //     style="mapbox://styles/mapbox/dark-v9"
-  //     center={center}
-  //     zoom={zoom}
-  //     containerStyle={{
-  //       height: "100vh",
-  //       width: "100vw"
-  //     }}
-  //   >
+  //   <Mapbox >
   //     {images.map((img, i) => {
   //       const id = `radar-280-${i}`;
   //       return (
-- 
cgit v1.3.1