colbyfayock / gatsby-starter-leaflet

🍃 A Gatsby starter with Leafet to quickly build React apps with a map!

🍃 Gatsby Leaflet Starter

Jumpstart your next Gatsby mapping project with Leaflet!

⚡ Quick Deploy

🧰 What This Includes

• Yarn
• Gatsby
• Sass
• React Helmet
• Resolve Src
• Leaflet
• React Leaflet

🚀 Getting Started

Requirements

• Gatsby CLI
• Yarn

Quick Start

Run the following in your favorite terminal:

gatsby new my-map-app https://github.com/colbyfayock/gatsby-starter-leaflet

Starting from Scratch

• Set up Yarn: https://yarnpkg.com/lang/en/docs/install/#mac-stable)[https://yarnpkg.com/lang/en/docs/install/
• Install the Gatsby CLI globally:

yarn global add gatsby-cli

• Inside the directory of your choice, scaffold a new Gatsby site:

gatsby new my-map-app https://github.com/colbyfayock/gatsby-starter-leaflet

For example, if I want my installation in ~/Code/new-gatsby-site, I would navigate to ~/Code and run:

gatsby new new-gatsby-site https://github.com/colbyfayock/gatsby-starter-leaflet

• Navigate to your new directory and run:

yarn develop

• You should now be running a new Gatsby site locally! 🎉

🗺 Resources to Learn About Mapping

• Mapping with React Leaflet (egghead.io)
• How to build a mapping app in React the easy way with Leaflet (freecodecamp.org)
• Anyone Can Map! Inspiration and an introduction to the world of mapping (colbyfayock.com)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Colby Fayock 💻 📖

Fukuda Naoto 💻

Digvijay Singh Rathore 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

gatsby-starter-leaflet's Issues

Update Readme.md

Hello,
There are a few grammatical errors in the Readme.md that I'd like to work on. Please assign this to me.

Tooltip not centered on gatsby develop

When running yarn develop / gatsby develop locally, the tooltip is off center. Deployed it works fine.

Find visitor's location and zoom demo header to that location

• Visitor comes from X location
• Map tries to determine their location via the browser API
• If location is allowed and found, zoom in to that location
• If location is not allowed or not found, zoom in to Washington, DC which is current default

Could not resolve eslint dependency

Hi there,
Thank you very much for maintaining this repo. I tried to build it on my GNU/Linux Debian 10 system. I have node v10.23.0 and yard 1.22.10 version. I received the following error after running the Quick Start instruction gatsby new my-map-app https://github.com/colbyfayock/gatsby-starter-leaflet. Looks like an eslint dependency issue.

info Creating new site from git: https://github.com/colbyfayock/gatsby-starter-leaflet.git

Cloning into 'my-map-app'...
remote: Enumerating objects: 89, done.
remote: Counting objects: 100% (89/89), done.
remote: Compressing objects: 100% (74/74), done.
remote: Total 89 (delta 1), reused 52 (delta 1), pack-reused 0
success Created starter directory layout
info Installing packages...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^7.20.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^6.5.1" from [email protected]
npm ERR! node_modules/eslint-config-zurgbot
npm ERR!   dev eslint-config-zurgbot@"^0.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

 ERROR 

Command failed with exit code 1: npm install



  Error: Command failed with exit code 1: npm install
  
  - error.js:56 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:56:11
  
  - index.js:114 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:114:26
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

Then, I headed for the Starting from Scratch approach. I ran the instruction yarn global add gatsby-cli. After that I also checked the Gatsby version: Gatsby CLI version: 2.19.1. After running the instruction gatsby new my-map-app https://github.com/colbyfayock/gatsby-starter-leaflet I ended up with the same error as in the Quick Start approach. Sadly, I am not able to move forward to run yarn develop.

Is anyone familiar with this issue and does not mind to point me in the right direction?

Cheers,
Stefan

yarn format fails, cannot commit to my clone of this project

I am following your FCC tutorial (Thanks for that) at https://www.freecodecamp.org/news/how-to-create-a-coronavirus-covid-19-dashboard-map-app-in-react-with-gatsby-and-leaflet/

I was trying to commit after Step1 and hit yarn format error with prettier-eslint that blocks commits to my local repo. (Error: 'basePath' should be an absolute path)

I found this link that describes add $PWD as part of the regex string.
prettier/prettier-eslint-cli#208

I use Mac/Linux so I don't have the issue the link describes about Windows.

Thought you should know about this. Thanks again for the FCC tutorial, can't wait to finish working thru it.

Store a reference to the map element?

This may be more of a question than an issue, but I'm having trouble accessing a reference to the map element for future operations. What is the proper way to get a reference to the Map element within the IndexPage component?

Thank you so much, this starter rocks!

Update package for "react": "^18"

@colbyfayock can you please update the react package in your project. with the recent changes, it is not possible to use your plugin.

Parsing error: The keyword 'import' is reserved

There seems to be some error with babel configuration.

I'm having this error on my VSCODE on every file using import

'Center' of map is incorrect (in development mode only?)

First off, thank you so much for this and all your really helpful work! I have noticed a small glitch out of the box: on line 66 of index.js, the call to promiseToFlyTo should result in the map being centered on the marker.
However, the map is centered at a location a bit north of the marker (see screenshot on left).

If it helps, I suspect the map may not realize it's been sized to 50% of the viewport (line 5 of _home.scss). When I change that to 100vh (see screenshot on right) the map basically looks the same except more of it is visible, and in this case, the marker is basically centered.

Add additional default map services and projection options

Add some more open services to data/map-services.js such as Blue Marble from NASA. GIBS has a few different tile server sets that can be set up to use: https://earthdata.nasa.gov/eosdis/science-system-description/eosdis-components/gibs

OpenStreetMap is being used with the default projection. If we were using anything other than the default provided by Leaflet, we would require projection support.

Create tests using leaflet mock

Create some tests using the Leaflet mock under tests/__mocks__.

Particularly, can start with mocking out a map and testing functionality for promiseToZoomIn available in lib/map.

Add support for different projections

At the moment, the only projection support is what Leaflet provides out of the box. We'll want to provide a way to let a service define the projections it works with (it can be more than 1), and utilize that projection name for map configuration.

Most likely would want to utilize the Map CRS option:
https://leafletjs.com/reference-1.5.0.html#map-crs

what would it take to port this to gatsby v3?

Sorry this is not really a bug. As a beginner with Gatsby i have been playing with this starter a lot and find it pretty amazing!

As a next exercise i was wondering whether i'd be able to port this to Gatsby v3.

So far i feel like this is above my game.

What would be the steps to do such a thing?

Leaflet starter appears broken

Hi Colby,
Thanks for the advice earlier
Have now tried to build site using your starter - terminal - mac
Gatsby-cli 4.9.0
gatsby new gatsby-leaflet https://github.com/colbyfayock/gatsby-starter-leaflet.git

get these errors and load fails - Not sure if it is just me but does not appear to be working due to dependancy check potentially for everyone.

Hope this help
cheers Mark

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR! gatsby@"^3.13.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^2.0.0" from [email protected]
npm ERR! node_modules/gatsby-plugin-react-leaflet
npm ERR! gatsby-plugin-react-leaflet@"3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/me/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

ERROR

Command failed with exit code 1: npm install

Error: Command failed with exit code 1: npm install

• error.js:60 makeError
  [global]/[gatsby-cli]/[execa]/lib/error.js:60:11

• index.js:118 handlePromise
  [global]/[gatsby-cli]/[execa]/index.js:118:26

• task_queues:96 processTicksAndRejections
  node:internal/process/task_queues:96:5

• init-starter.js:135 install
  [global]/[gatsby-cli]/lib/init-starter.js:135:7

• init-starter.js:202 clone
  [global]/[gatsby-cli]/lib/init-starter.js:202:3

• init-starter.js:343 initStarter
  [global]/[gatsby-cli]/lib/init-starter.js:343:5

• create-cli.js:460
  [global]/[gatsby-cli]/lib/create-cli.js:460:9

Live watch mode

thank you for the starter, great! But can you plz tell me where to put watch: true to get live updates for the map, marker?

test

dependency conflict

not sure what doing wrong—on Big Sur with homebrew installed gatsby, node.js, and yarn

Cloning into 'my-map-app'...
remote: Enumerating objects: 89, done.
remote: Counting objects: 100% (89/89), done.
remote: Compressing objects: 100% (74/74), done.
remote: Total 89 (delta 1), reused 52 (delta 1), pack-reused 0
success Created starter directory layout
info Installing packages...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.4.2" from [email protected]
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^2.28.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.