Skip to content
Permalink
Browse files

step 1: clean out demo code

  • Loading branch information
colbyfayock committed Mar 18, 2020
1 parent b4cb86a commit c92e8f970c8a2f2436f65ea0890680a88b747c49
Showing with 3 additions and 55 deletions.
  1. +3 −55 src/pages/index.js
@@ -1,77 +1,27 @@
import React, { useRef } from 'react';
import React from 'react';
import Helmet from 'react-helmet';
import L from 'leaflet';
import { Marker } from 'react-leaflet';

import { promiseToFlyTo, getCurrentLocation } from 'lib/map';

import Layout from 'components/Layout';
import Container from 'components/Container';
import Map from 'components/Map';

import gatsby_astronaut from 'assets/images/gatsby-astronaut.jpg';

const LOCATION = {
lat: 38.9072,
lng: -77.0369
};
const CENTER = [LOCATION.lat, LOCATION.lng];
const DEFAULT_ZOOM = 2;
const ZOOM = 10;

const timeToZoom = 2000;
const timeToOpenPopupAfterZoom = 4000;
const timeToUpdatePopupAfterZoom = timeToOpenPopupAfterZoom + 3000;

const popupContentHello = `<p>Hello 👋</p>`;
const popupContentGatsby = `
<div class="popup-gatsby">
<div class="popup-gatsby-image">
<img class="gatsby-astronaut" src=${gatsby_astronaut} />
</div>
<div class="popup-gatsby-content">
<h1>Gatsby Leaflet Starter</h1>
<p>Welcome to your new Gatsby site. Now go build something great!</p>
</div>
</div>
`;

const IndexPage = () => {
const markerRef = useRef();

/**
* mapEffect
* @description Fires a callback once the page renders
* @example Here this is and example of being used to zoom in and set a popup on load
*/

async function mapEffect({ leafletElement } = {}) {
if ( !leafletElement ) return;

const popup = L.popup({
maxWidth: 800
});

const location = await getCurrentLocation().catch(() => LOCATION );

const { current = {} } = markerRef || {};
const { leafletElement: marker } = current;

marker.setLatLng( location );
popup.setLatLng( location );
popup.setContent( popupContentHello );

setTimeout( async () => {
await promiseToFlyTo( leafletElement, {
zoom: ZOOM,
center: location
});

marker.bindPopup( popup );

setTimeout(() => marker.openPopup(), timeToOpenPopupAfterZoom );
setTimeout(() => marker.setPopupContent( popupContentGatsby ), timeToUpdatePopupAfterZoom );
}, timeToZoom );
// Get rid of everything in here
}

const mapSettings = {
@@ -87,9 +37,7 @@ const IndexPage = () => {
<title>Home Page</title>
</Helmet>

<Map {...mapSettings}>
<Marker ref={markerRef} position={CENTER} />
</Map>
<Map {...mapSettings} />

<Container type="content" className="text-center home-start">
<h2>Still Getting Started?</h2>

0 comments on commit c92e8f9

Please sign in to comment.
You can’t perform that action at this time.