PRODUCT DESIGN

HOME

This is a test about lormenawoerwer

Nolli 2015: Progress Shots

Some slow but steady progress is happening with the interactive Nolli map. Today I have taken on the challenge of line types and special strokes. It took me a bit of digging to find out how to control stroke styles in Mapbox Studio without editing just primary lines. Additionally, it's hard to assign multiple styles to a single layer, which mean some strategic duplicating /overlaying of the same data set, which I'm always a bit wary of. The "Gap Width" settings seem to exhibit stroke-as-outline behaviors that I am accustomed to in Illustrator, though slightly harder to control (especially as they need to sync with the scaling of the primary stroke they are built off of). 

Similar to the polygonal data, stroke styles can be mapped with an SVG pattern. This helps me achieve a more handrawn look than just a standard linetype. The only problem with mapping a hand drawn SVG to a line is controlling the way it terminates. The lines tend to die without the finesse of some hand-drawn intervention. Choosing a proper scale and length of the pattern can probably ease this transition with a bit of further studying. 

The centerline dash in the image above was actually an unintentional effect from setting my gap widths too far apart, but I'm happy with the result. 

Adding a gentle stipple pattern to the park land designation helped give the map a nice collage-like quality that scales and tiles elegantly. The small stippling is accentuated by the contour shading, which I would love to migrate from tones to gentle hatches. 

Although all of the lines are the same weight, their density begins to suggest a gradient that I think will work well as a series of overlays. Slowly eliminating the use of tone and replacing it with hand drawn patterns will help this map have intaglio-feel at farther zoom levels. 

After I test out a computer-generated hatch like the ones above, I draw over them with a stylus for more natural variation. Check out this side-by-side of a computer generated hatch versus a hand-drawn hatch: 

The hand-drawn hatch to the right has a much richer texture, which is totally worth the extra steps. My biggest wish for the next version of Mapbox studio will be a smoother and more intuitive SVG upload process-- on my browser it tends to snag. Without a lot of trial and error, it's hard to take a guess what lineweight and dimension of tile will look best on your map. I can see building and applying patterns becoming a future chapter in the guidelines documentation.  

Next steps will include more robust stroke styles, some river bathymetry, and unique illustrated points of interest. Take a look at some of my favorite screen shots from around the world:

Minneapolis

San Francisco

Shoot I forget where I screencaptured this one. Hot guess on Germany...

Super high densities next to thick forests in Kyoto, Japan.

Adrianne NgamComment