Long Marine Lab Stranding Map

A tool for visualizing marine mammal stranding data collected by the Long Marine Lab in Santa Cruz county.

Demo

The current production build can be currently viewed at: https://lmlstrandingmap.herokuapp.com/

Key Features

Marker Clustering

Groups data points together and shows count of standings when zoomed out.

Heatmap

Highlights density and magnitude of strandings in a particular area.

Time Slider

Plays through stranding data through the years.

File Upload

After logging in, lab technicians can upload new stranding data to the database.

Built with

• Urbica React Map GL - React Component Library for Mapbox GL JS.
• Firebase - Cloud storage, authentication, and backend code hosting.
• Algolia - Fast, realtime search integration for Firebase Realtime Database.
• Heroku - Application hosting, automated builds and deployments.

License

MIT

Table of Contents

lml-stranding-map

DataCleaning

cleanup.py - python script

functions

src

index.ts - Database config and functions

.eslintrc.json
index.js
package-lock.json
package.json
tsconfig.json
tslint.json

public

screenshots

file-upload.png
heatmap.png
marker-clustering.png
screenshot01.png
time-slider01.png
time-slider02.png

baskin-logo-banner-2021.png
baskin-logo-banner-new.jpg
baskin-logo-banner.png
dead_seal_image.jpg
favicon.ico
index.html
logo192.png
logo512.png
long-marine-stranding-program.png
long-marine-stranding-program.svg
manifest.json
red-pin.svg
robots.txt
seal-face-svgrepo-com.svg
seal-grey-svgrepo-com.svg
seal-svgrepo-com.svg
seal.png

src

Components

About.css
About.js - Recognition page for teams that have worked on the website
CaseStudyPage.css
CaseStudyPage.js - "Stranding Story" case study page displaying stranding field number, photo, and writeup
CaseStudyPopup.css
CaseStudyPopup.js - "Stranding Story" popup for map pins
ClusteredMarkers.css
ClusteredMarkers.js
Content.css
Content.js - Layout of non-map portion of the page (sidebar, slider toggles)
DropdownRefinementList.css
DropdownRefinementList.js
Filter.js
Footer.css
Footer.js
Legend.css
Legend.js
Login.js
LoginStyles.css
Map.js
MarkerSVG.js
NavMenu.css
NavMenu.js - Top NavBar of page above map
Sidebar.css
Sidebar.js
Signup.js
StarSVG.js
StrandingPopup.css
StrandingPopup.js - Stranding info popup for map pins
TimeSlider.css
TimeSlider.js - Year filter slider and play button
UploadDomoicAcidPopup.js - Allows LML to upload domoic acid data in csv format for previously uploaded strandings
UploadPopup.css
UploadPopup.js - Allows LML to upload stranding data in csv format
faq.js
heatmapLayer.js

config

Fire.js

App.js
App.test.js
Auth.js
PrivateRoute.js
api.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

.firebaserc
README.md
app.json
firebase.json
geojson.py
netlify.toml
package-lock.json
package.json