[#88] feat: create and implement Map component

damla · Apr 16, 2021 · 2f506a0 · 2f506a0
1 parent 37a8610
commit 2f506a0
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 17 deletions.
diff --git a/components/map/map.component.tsx b/components/map/map.component.tsx
@@ -0,0 +1,60 @@
+import React, { CSSProperties, ReactElement, useEffect, useState } from 'react'
+
+// import styles from './map.module.scss'
+
+import mapboxgl from 'mapbox-gl'
+
+interface Props {
+  mapApi: string
+  id: string
+  width: number
+  height: number
+  coordinate: [number, number]
+  HTML: string
+}
+
+export default function Map ({
+  mapApi,
+  id,
+  width,
+  height,
+  coordinate,
+  HTML
+}: Props
+): ReactElement {
+  const [pageIsMounted, setPageIsMounted] = useState(false)
+
+  const style: CSSProperties = {
+    width,
+    height
+  }
+
+  mapboxgl.accessToken = mapApi
+
+  useEffect(() => {
+    setPageIsMounted(true)
+
+    const map = new mapboxgl.Map({
+      container: id,
+      style: 'mapbox://styles/mapbox/streets-v11',
+      center: coordinate,
+      zoom: 14
+    })
+
+    var marker = new mapboxgl.Marker()
+      .setLngLat(coordinate)
+      .addTo(map)
+
+    var popup = new mapboxgl.Popup({ closeOnClick: false })
+      .setLngLat(coordinate)
+      .setHTML(HTML)
+      .addTo(map)
+  }, [])
+
+  return (
+    <div
+      id={id}
+      style={style}
+    />
+  )
+}
diff --git a/components/map/map.module.scss b/components/map/map.module.scss
diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx
@@ -1,18 +1,19 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement } from 'react'
 import { GetStaticProps } from 'next'
 import Image from 'next/image'
 import Head from 'next/head'
 import Layout from '../../components/layout/layout.component'
 import Section from '../../components/section/section.component'
 import ImageBox from '../../components/image-box/image-box.component'
 import CustomContainer from '../../components/custom-container/custom-container.component'
+import Map from '../../components/map/map.component'
 
 import styles from './contact.module.scss'
 
 import { CommonModel, ContactModel } from '../../interfaces/index'
 import { getBase64Values } from '../../utils/imageUtils'
 import { getData } from '../../utils/dbUtils'
-import mapboxgl from 'mapbox-gl'
+
 interface Props {
   common: CommonModel
   page: ContactModel
@@ -51,18 +52,6 @@ export default function Contact ({
   mapApi
 }: Props
 ): ReactElement {
-  const [pageIsMounted, setPageIsMounted] = useState(false)
-
-  mapboxgl.accessToken = mapApi
-
-  useEffect(() => {
-    setPageIsMounted(true)
-    const map = new mapboxgl.Map({
-      container: 'my-map',
-      style: 'mapbox://styles/mapbox/streets-v11'
-    })
-  }, [])
-
   return (
     <>
       <Head>
@@ -132,11 +121,10 @@ export default function Contact ({
               ))
             }
           </CustomContainer>
-          <div id="my-map" style={{ width: 500, height: 500 }}>
-          </div>
+          <Map mapApi={mapApi} id="hq-map" coordinate={[28.656831, 40.990484]} width={500} height={500} HTML="<h2>Karsal Örme</h2>"/>
+          <Map mapApi={mapApi} id="factory-map" coordinate={[27.649564, 41.272214]} width={500} height={500} HTML="<h2>Fabrika</h2>"/>
         </Section>
       </Layout>
     </>
   )
 }
-// lat: 41.231282, lng: 28.420897