From 2f506a0f449cf9ea6788398f143d62a3b5b26b00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damla=20K=C3=B6ksal?= Date: Fri, 16 Apr 2021 17:19:53 +0300 Subject: [PATCH] [#88] feat: create and implement Map component --- components/map/map.component.tsx | 60 ++++++++++++++++++++++++++++++++ components/map/map.module.scss | 0 pages/contact/index.tsx | 22 +++--------- 3 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 components/map/map.component.tsx create mode 100644 components/map/map.module.scss diff --git a/components/map/map.component.tsx b/components/map/map.component.tsx new file mode 100644 index 0000000..8cab923 --- /dev/null +++ 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 ( +
+ ) +} diff --git a/components/map/map.module.scss b/components/map/map.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx index c97ca8c..562670a 100644 --- a/pages/contact/index.tsx +++ b/pages/contact/index.tsx @@ -1,4 +1,4 @@ -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' @@ -6,13 +6,14 @@ 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 ( <> @@ -132,11 +121,10 @@ export default function Contact ({ )) } -
-
+ + ) } -// lat: 41.231282, lng: 28.420897