Let's Map Some Ghosts!

A Maptime HRVA Leaflet How-To
@maptimehrva & @jonahadkins
Mapping local paranormal activity is dead simple. Using open source components, the following instructions will guide you to other side of web-mapping. This exercise assumes a spooky knowledge of HTML and Javascript - but not at all required. This will step through each phase of what you see to the right. Just keep on scrolling down in this panel.
Let the seance begin!

1st Things 1st I'm The Realest
I learned how to do all this so I could show you! Don't send the grim reaper after me. Feel free to fork ( or knife ) this repo to use or improve. Big shout outs to:
Andy "Werewolf" Woodruff for his awesome MaptimeBoston how-to, which I used to make this.
"Gory" Nate Goldman for his cool burger map which inspired the UI for this how-to.
Also, Maptime!

Tech We'll Use
Leaflet ~ GeoJSON.io ~ Demons ~ MapStack
Text Editor ~ Github Pages

Data: The Beginning
You'll need something to map! For this example, I googled some local paranormal researchers: Ghost Hunters of South Tidewater, Haunted Va. Paranormal Investigations, and Hampton Roads Paranormal Society - Using GeoJSON.io we can create points on or near the locations mentioned. GeoJSON.io provides a simple interface for adding attributes, such as Name, Description, and Website. The resulting .geojson file, located in our project repo, contains about 25 ghoulish features spread across the region.

The MapStack Massacre
The second element of this project is the basemap. To keep it simple, we are going to use a service provider rather than worry / un-earth our own server, etc. MapStack by Stamen Design is an awesome project that will allow us to create some spine-chilling-ly free map tiles using OpenStreetMap. The image filters and effects offer a wide variety of customization. When you're happy with what you've came up with copy/paste the tile url of the image. It's rather long, but required for inserting into our code. For this example our url is "http://{s}.sm.mapstack.stamen.com/($375a80[@60p],(naip,$2c235c[hsl-color@70])[darker],(toner-labels,$000[@20],$38315f[hsl-color])[@50])/{z}/{x}/{y}.png"

GitHub P-P-Pages
GitHub is great resource for code-sharing, development, and storage. An added bonus is the automatic page generator for any repository you create. We will use this for hosting our web-app and storing all of the necessary components. In the afterlife of your project there will a be total of 5 files in your repository that that run your app. Once you have enabled your github pages branch, you can delete everything except for the index.html file. It will keep all the code for your app, you can rename it if you like as well. Our sample repository demonstrates the grisly set-up for this project.

Hhhhhhhhere's Leaflet!
Leaflet is the hocus pocus behind may of today's web-mapping applications. It provides an extensive library of functions supported by a dedicated team of contributors. We are going to use the Leaflet.js library to create our map. Using the wicked documentation from the Leaflet.js website, we are going to start with the most basic components needed for a map. We are going to: a) Add Leaflet starter code b) Specify the lat/long of our location c) Add our tile layer URL from MapStack
Code / Example

Data Part 2: The Return
We have a pretty unnerving map so far. Let's add our .geojson file we made earlier. An added step is using a jQuery library to handle the interaction of our data. We are going to: a) Reference jQuery in the html b) Load our data c) add it to the map
Code / Example

Attack of the Not Boring Dots
Dots are cool, but it's October and they need a cool costume . We can use almost any icon-size marker, and we've got one that floats ! Only one step here lets: a) add a new icon
Code / Example

I Ain't Afraid Of No Ghosts
So we have some pretty frightening icons for our dots, but we really want to tell the viewer what they are. Let's add some pop-ups from our data's attributes: a) create the pop-up b) format the text c) optionally style with css
Code / Example