Working with leaflet.js was my first real attempt at jumping into a non-p5 java script library, as well as working in creative HTML/CSS (outside of WordPress many moons ago).  With the in class tools, the example code, and the grande palette that is open source, I was able to deconstruct and create a digital map.

The tools used:
Sublime Text Editor
Leaflet.js
Stamen
Carto DB
LatLong.net
Class Github Repo

THE PROCESS

I started with a bank canvas in sublime text, and worked my way to the first map. I set the location as Innoshima, Japan, a small island that I lived on for 2 years. I wanted to give the map some character by having 4 different style maps of the same location. Using Stamen and Carto DB, I was able to accomplish that. Once I understood how to set up the grammar in the code, I was able to play with location and move the maps to the desired 4 corners of the page.

I did try changing the zoom to make each map 1 degree closer in, but the scene looked better and had clearer intent with the same zoom view in different styles.

Once I had the maps aligned, I played around with the HTML/CSS to try to get the title to show, however I was unsuccessful with that.

I did, however, find success with adding my code to github through the terminal. I still need to create a branch to post it to in the Maps repo, I am dancing with joy that I made it this far.

A second miracle happened when I was able to use git to set up a local server!
Screen Shot 2016-02-04 at 10.46.54 PM

CHALLENGES

Several questions still linger after working with this code.

Why do we have </html> on the bottom but not the top?

Why doesn’t the title show even though it is written in the code?

How does map1, map2 etc know how to take on the properties of a particular layer? Is it because it takes on the layer that is written directly above it? I tried to change the layer names and put that layer in another map’s .addlayer(_here_), it did not work – it doesn’t seem to help if we change the name of the layer. Is it more of a hierarchy thing?

_______________________________________________________________________________________

You can access the full map here!