{"size": 1460, "ext": "js", "max_stars_repo_path": "frontend/mapping-demo/src/containers/home.js", "max_stars_repo_name": "kripeshr22/MappingDemo", "max_stars_repo_stars_event_min_datetime": "2022-02-09T22:42:44.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-09T22:42:57.000Z", "max_issues_repo_path": "frontend/mapping-demo/src/containers/home.js", "max_issues_repo_name": "kripeshr22/MappingDemo", "max_issues_repo_issues_event_min_datetime": "2021-11-03T05:42:01.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-07T22:43:19.000Z", "max_forks_repo_path": "frontend/mapping-demo/src/containers/home.js", "max_forks_repo_name": "kripeshr22/MappingDemo", "max_forks_repo_forks_event_min_datetime": "2021-10-25T00:08:09.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-25T00:08:09.000Z"}
{"max_stars_count": 2, "max_issues_count": 22, "max_forks_count": 1, "avg_line_length": 32.4444444444, "max_line_length": 116, "alphanum_fraction": 0.5712328767}

import React, { useRef, useEffect} from 'react'
import "../styles/main.css"
import "../styles/home.css"

// eslint-disable-next-line import/no-webpack-loader-syntax
import mapboxgl from "!mapbox-gl";

mapboxgl.accessToken = 'pk.eyJ1Ijoia3JpcGVzaHIiLCJhIjoiY2t0OHg0MDMwMTZzaTJvcTJjYnlvZGFmaCJ9.Dfgb6MDEBqbvraywys_j9g';
const Home = () => {
    const mapContainer = useRef(null);
    useEffect(() => {
        const map = new mapboxgl.Map({
          container: mapContainer.current,
          // See style options here: https://docs.mapbox.com/api/maps/#styles
          style: 'mapbox://styles/mapbox/streets-v11',
          center: [-118.2437, 34.0522],
          zoom: 12.5,
        });
        map.on('load', function() {
            map.resize()
        });
        map.addControl(new mapboxgl.NavigationControl(), 'top-right');
        const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(
            ` <a href="https://thegrovela.com/" target="_blank">The Grove</a>
            `
            );
        map.addControl(new mapboxgl.Marker()
            .setLngLat([-118.3581, 34.0722])
            .addTo(map)
            .setPopup(popup));

    // clean up on unmount
    return () => map.remove();
  }, []); 
        return (
            <div>
                <h1 className="header">SOME MAP </h1>
            <div className="map">
        <div className="map-container" ref={mapContainer} />
        </div>
        </div>)
}

export default Home;