Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

🍃 A Gatsby starter with Leafet to quickly build React apps with a map!
https://github.com/colbyfayock/gatsby-starter-leaflet

gatsby gatsby-cli gatsby-site gatsby-starter gatsby-starters hacktoberfest leaflet leaflet-map react react-leaflet

Last synced: 1 day ago
JSON representation

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

Awesome Lists containing this project

README

        

# 🍃 Gatsby Leaflet Starter

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

Jumpstart your next Gatsby mapping project with Leaflet!

## ⚡ Quick Deploy
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/colbyfayock/gatsby-starter-leaflet) [![Deploy with Vercel Now](https://zeit.co/button)](https://vercel.com/import/project?template=https://github.com/colbyfayock/gatsby-starter-leaflet)

## 🧰 What This Includes
* [Yarn](https://yarnpkg.com/en/)
* [Gatsby](https://www.gatsbyjs.org/)
* [Sass](https://sass-lang.com)
* [React Helmet](https://github.com/nfl/react-helmet)
* [Resolve Src](https://github.com/alampros/gatsby-plugin-resolve-src)
* [Leaflet](https://leafletjs.com/)
* [React Leaflet](https://react-leaflet.js.org)

## 🚀 Getting Started

### Requirements
* [Gatsby CLI](https://www.npmjs.com/package/gatsby-cli)
* [Yarn](https://yarnpkg.com/en/)

### 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](https://egghead.io/playlists/mapping-with-react-leaflet-e0e0?af=atzgap) (egghead.io)
* [How to build a mapping app in React the easy way with Leaflet](https://www.freecodecamp.org/news/easily-spin-up-a-mapping-app-in-react-with-leaflet/) (freecodecamp.org)
* [Anyone Can Map! Inspiration and an introduction to the world of mapping](https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/) (colbyfayock.com)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



Colby Fayock

💻 📖

Fukuda Naoto

💻

Digvijay Singh Rathore

💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!