Setup Your Project
If you haven’t used NodeJS before, you’ll need to install it. On a Mac, you can do this with Homebrew or with a package from the Node website. Install Brunch with
sudo npm install -g brunch. Now you’re ready to use the skeleton I built:
brunch new brunch-leaflet-tutorial -s ngottlieb/brunch-leaflet-es6-skeleton
Great! Once it finishes installing packages, you can give it a run with
npm start. Congratulations, you have a running LeafletJS app — go check it out at http://localhost:3333.
You have a few options when it comes to incorporating your GeoJSON data:
map.jsor another file, assigning it to a variable that Leaflet can read from
- incorporate it from a public third-party location (or a local JSON file) using leaflet-ajax
Depending on the size of your dataset, option one is often fine, but if you have a publicly available JSON file than that’s most likely the best route to go.
To install the
leaflet-ajax library and save it as an app requirement, run
npm install --save leaflet-ajax. In order to take advantage of its functionality, add:
to the top of
map.js and then call the
L.GeoJSON.AJAX method to load the data.
Here’s our modified
map.js loading the dataset from Github using leaflet-ajax:
Open it up in the browser and — sweet! — we’ve got a map of the USA displaying a GeoJSON dataset. That was easy.
Alright, initial shock wearing off — this map isn’t that useful without any information about what it is. This particular dataset comes with a few properties; the most valuable is “NAME.” We want users to be able to click on a shape and find out what it represents, so we need to add some popups to our features. Additionally, a number of the features are also multi-polygons — meaning, they have separate regions that belong to the same unit — so we need to make that clear somehow.
Leaflet provides a lot of convenient ways to work with GeoJSON and their documentation shows us how to solve both those problems. We use the
onEachFeature argument to define a callback that adds a popup to each feature and the
style argument to define separate styles for each feature in the GeoJSON:
Publishing Your App
public/ directory. You can try opening
public/index.html in your browser — you should see your map. You can share the contents of that folder with anyone and they’ll be able to view your map.
In the real world, we usually want to publish these kinds of things on the internet. For open source projects, Github Pages is a really convenient way of sharing single-page applications. To publish your app to Github pages, follow these steps:
- Create a new repository on Github: https://github.com/new
- Add the new repository as a remote: `git remote add origin firstname.lastname@example.org:your-name/brunch-leaflet-tutorial`
- Build your application into the
npm run build
- Temporarily move the compiled application outside the working tree:
mv public ../
- Create a
git checkout -b gh-pages
- Remove all files from your repository:
rm -rf *
- Move the compiled application back into the working tree:
mv ../public/* .
- Commit the changes to the
git add . &&
git commit -m 'add compiled app for gh-pages release'
- Push your branch to Github:
git push origin gh-pages
- Enable Github pages in your repository settings: https://github.com/your-name/brunch-leaflet-tutorial/settings (note: Github seems to automatically do this when you push the
Give Github a couple minutes to catch up and your application should now be visible at https://your-name.github.com/brunch-leaflet-tutorial!