cleaning mapboxgl support

src/components/mapboxgl/Line.tsx

@@ -1,7 +1,7 @@
 import { GeoJSON } from 'geojson'
 import { Expression, GeoJSONSource, GeoJSONSourceRaw } from 'mapbox-gl'
 import React, { useContext, useEffect, useState } from 'react'
-import { MapContext } from './Utility/MapContext'
+import { MapContext } from './MapContext'
 
 export interface Coordinates {
   longitude: number

src/components/mapboxgl/LocationInformationDialog.tsx

@@ -19,7 +19,7 @@ export const LocationInformationDialog = ({
   showMouse,
   mouseLongitude,
   mouseLatitude,
-  showForCode,
+  showForCode
 }: Props): React.ReactElement => {
   return (
     <div
@@ -34,21 +34,29 @@ export const LocationInformationDialog = ({
         top: 0,
         left: 0,
         margin: 12,
-        borderRadius: 4,
+        borderRadius: 4
       }}
     >
       <div>
         <div>
           Longitude: {longitude} | Latitude: {latitude} | Zoom: {zoom}
         </div>
-        <div>{showForCode ? `- {"longitude": ${longitude}, "latitude": ${latitude}}` : null}</div>
+        <div>
+          {showForCode
+            ? `- {"longitude": ${longitude}, "latitude": ${latitude}}`
+            : null}
+        </div>
       </div>
       {showMouse ? (
         <div>
           <div>
             Mouse ~ Longitude: {mouseLongitude} | Latitude: {mouseLatitude}
           </div>
-          <div>{showForCode ? `- {"longitude": ${mouseLongitude}, "latitude": ${mouseLatitude}}` : null}</div>
+          <div>
+            {showForCode
+              ? `- {"longitude": ${mouseLongitude}, "latitude": ${mouseLatitude}}`
+              : null}
+          </div>
         </div>
       ) : null}
     </div>

src/components/mapboxgl/Map.tsx

@@ -10,7 +10,8 @@ import Line from './Line'
 import LocationInformationDialog from './LocationInformationDialog'
 import { MarkerMethods } from './Marker'
 import { MinMax } from './Utility/LngLat'
-import { MapContext } from './Utility/MapContext'
+
+import { MapContext } from './MapContext'
 
 interface Props {
   accessToken: string
@@ -53,7 +54,7 @@ export const Map = ({
   const [mapStyleIsLoaded, setMapStyleIsLoaded] = useState(false)
   const [mouseLocation, setMouseLocation] = useState<LngLat | undefined>()
   const [mouseLocationPause, setMouseLocationPause] = useState(false)
-  // const [markers, setMarkers] = useState<MarkersStore>({})
+
   // TODO: only allows for one instance of a map, fix for future usage
   mapboxgl.accessToken = accessToken
 

src/components/mapboxgl/Marker.tsx

@@ -7,7 +7,7 @@ import React, {
   useState
 } from 'react'
 import ReactDOM from 'react-dom'
-import { MapContext } from './Utility/MapContext'
+import { MapContext } from './MapContext'
 
 export interface Coordinates {
   longitude: number

src/components/mapboxgl/Utility/Point.ts

@@ -0,0 +1,8 @@
+import { Point } from 'mapbox-gl'
+
+export const calculateDistanceSquared = (left: Point, right: Point): number => {
+  return (
+    (left.x - right.x) * (left.x - right.x) +
+    (left.y - right.y) * (left.y - right.y)
+  )
+}

src/components/mapboxgl/Utility/index.ts

@@ -0,0 +1,2 @@
+export * from './LngLat'
+export * from './Point'

src/components/mapboxgl/index.ts

@@ -1,3 +1,5 @@
 export { Map } from './Map'
 export { Marker } from './Marker'
 export { Line } from './Line'
+export { MapContext } from './MapContext'
+export * from './Utility'