SHARE
TWEET

src/components/SingleJob/Map.js

dfghgfhplkjbv Feb 20th, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import ReactMapboxGl, { Marker, Popup } from 'react-mapbox-gl'
  3. import Pin from '../svg/Pin'
  4. import styles from './Map.module.scss'
  5.  
  6. const Map = ReactMapboxGl({
  7.   accessToken: 'pk.eyJ1IjoiaHVtYW5zZWVsYWJzIiwiYSI6ImNqc2E2cXNsMDAwbnc0M3FjbWk0eDEwYjMifQ.H07F0Qxm3Di5BY6DYVb0OA',
  8. })
  9.  
  10. const mapBoxStyle = { style: 'mapbox://styles/mapbox/streets-v9' }
  11. const containerStyle = {
  12.   height: '100%',
  13.   width: '100%',
  14. }
  15.  
  16. class MyMap extends Component {
  17.   state = { isPopUpVisible: false }
  18.  
  19.   togglePopup = () => {
  20.     this.setState({ isPopUpVisible: !this.state.isPopUpVisible })
  21.   }
  22.  
  23.   render() {
  24.     const { geolocation:{latitude, longitude} } = this.props
  25.     console.log(latitude)
  26.     return (
  27.       <div className={styles.root}>
  28.         <Map style={mapBoxStyle.style} containerStyle={containerStyle} center={[longitude, latitude]} zoom={[12]}>
  29.           <Marker onClick={this.togglePopup} coordinates={[longitude, latitude]} className={styles.marker}>
  30.             <Pin fill="#9143fd" width="40px" height="auto" />
  31.           </Marker>
  32.  
  33.           {this.state.isPopUpVisible && (
  34.             <Popup
  35.               coordinates={[longitude, latitude]}
  36.               offset={{
  37.                 bottom: [0, -48],
  38.               }}
  39.               className={styles.popup}
  40.             >
  41.            
  42.               <span>We are here</span>
  43.             </Popup>
  44.           )}
  45.         </Map>
  46.       </div>
  47.     )
  48.   }
  49. }
  50.  
  51. export default MyMap
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top