#webmapping

Misha Chakrabarti: Travel Map

An ESRI Web App to illustrate my travels through GIS, text, and photos.

Places I've lived and visited. Click for photos.

My experiences from studying abroad in Paris during the fall 2010 semester. Click HERE to go to interactive map.

Click HERE for photos.

Howdy folks,

This project is the product of an assignment to design a 'slippy map', which is the term used for web maps you can zoom in and out of, drag around, and put little interactive popups on. Most people are probably most familiar with them through modified google map api's that seems to be trendy with company sites. 

The main points of the lab were to include,

Bunch of icon for the points on the map.

Build the basemap using a (really, really, cool- though limited) program called TileMill

Setup a place on your personal website for the map to site

I can safely say this was the most frustrating of the projects I've done this semester. There were quite a few setbacks, roadblocks, and the fact that I haven't really used Javascript before didn't make things easier. Luckily, a few friends helped me climb out of those holes and every couple hours of frustration was matched with a rush of joy when things finally worked. 

For those unaware I hail from the southern city of Janesville, Wisconsin, whose claim to fame (besides Paul Ryan, the KKK rally in early 2000's, or the GM plant closure) is being "Wisconsin's Park Place". I grew up within five blocks of three parks, so this is probably not inaccurate. I doubt anyone visits Janesville to check out our extensive amount of patches of grass with one or two benches in them, but hey, it's something!

I've got a pretty good memory of the parks I frequented, but finding 'official' data is always preferable. Janesville's site seemed legitimate enough, though, I ended up being fairly disappointed with the source. I thought something was off when I read on the main Parks page that there are 64 total parks whereas this chart only has data for 43. Later on while I was collecting the latitude and longitude data from google maps I was pretty easily able to find a few parks with things like playgrounds, basketball courts, etc. that weren't listed there as well. At some point when I return to town I plan on trying to fix that. 

At least for this project's main purpose, learning the programs and programming, I'm ok with it being a bit inaccurate for now. But I do feel almost compelled to throw a giant asterisk on it explaining that it needs to be updated!

For the basemap, I grabbed roads from the Gov. Thanks Gov!

Drawing out images that are eventually going to be 16x16 or 32x32 pixel sized wasn't a recommended method, and definitely one that required quite a bit of tweaking in Photoshop to look decent, but I felt it was the best way to retain some uniqueness to them. There are a lot of great places to find icons - The Noun Project in particular - but I feel a lot of them look rather generic. Granted, that's kinda the point of icons. For a project like this I don't think that level of generalization is really required, especially with a legend to dissolve any confusion prominently placed. 

I also did the above quick sketch in class for a banner. Everyone loves banners. 

So, Tile Mill. 

All in all, a pretty easy to use program that makes it incredibly easy to style map tiles. Take a second to check out their gallery of projects, it demonstrates why this is super useful far better than my words could. 

The coding aspect of it is basically CSS, so pretty straightforward. At least if you're just making a basemap. Tile Mill does that job really well, but as far as interactivity goes, it's not to in-depth. Getting it to display things like the name  of a location when you hover over designated points is simple, but I wanted to put images in there. Oh boy oh boy. 

Unlike every program I've ever used, Tile Mill only lets you import images onto the map using base64 encoding. This format helps keep the image code ok during transfer through multiple platforms that only deal with text. That said, it's also a pain the butt to mess around with. Below is the base64 encoding for one image. 

It took quite awhile to get it to actually show up, but I eventually got it right!

I also highly recommend using pictures of Nic Cage to debug. 

So everything was working, and life was good.

Then they released a update of Tile Mill two days prior to the project being due that resulted in quite a few problems when it came to embedding the Tile Mill export onto websites. The basemap would load, but the interactivity would be shot.

Leaflet to the rescue! 

A Javascript library built especially for programmin' interactive web maps, leaflet picks up the inadequacies of Tile Mill perfectly. While I have a little experience with Javascript, it was still a bit of learning curve to figure out how to get images to work in this language as well- there's literally no example on their site that does this. Apparently images in pop-ups are not very popular. 

Fast forward another day of google searching and throwing things at code, this sight finally meant a workable solution.

Click here to check it out!

Yeah!

Like I previously said, this tool is currently a bit inaccurate, but I plan on fixing it some point in the future as it's a fun toy. More importantly, the various tools used to build it are going to be incredibly useful going forward. 

Kudos to Mapbox and the folks behind Leaflet!