Category Archives: Community

Layer Config with Leaflet

Code for the leaflet layer configuration script described in this post is available on GitHub here.

I currently have the pleasure of working with the  Mary’s River Watershed Council to create web maps for their in development website update. The map above shows the in progress map (No those aren’t the final colors).

One of the biggest issues with web maps for folks without developers on staff is that they can become out of date very quickly. One of the main challenges on this project is to make it easy to update for a non technical staff. I think that this solution, with a little documentation, provides a good model for making good dynamic maps for non-profits and other typically low-resource groups.

The Challenges

  • Map showing all projects within the council work area.
  • Maps on several pages (~12) to show different work areas and projects.
  • Still have access to show all other projects when desired.
  • Click/Hover interactivity from various field names depending on the data.
  • Do it on a shoestring.

And the big one

  • Data must be update-able by non developer GIS staff.

I considered using one of our usual suspects for quick web maps, like Mapbox and CartoBD (which are great by the way), but neither quite fit with the various maps the MRWC wanted to display, and the ultimate data update flexibility they desired.

So, custom solution here we come. I decided to create a map with Leaflet and add two things to make the maps very customizable, and up-dateable for the staff. First, add a custom CONFIG file, in JSON, so that it was pretty readable for the MRWC staff. Second, make the visible layers, map center, and map zoom settable through the URL Variables, so the embedded iFrames can be set to display exactly the layers and geography desired. With the config file, and URL control, we can make one map to rule them all!

The config.json

The config file specifies the following about all layers available in the map.

  • All overlay geojson layers.
  • Display name for each layer.
  • Paths to the geojson for each layer.
  • Style settings for each layer.
  • Geometry type for each layer. (limits the type of geojson you can use, but increases simplicity for non-technical staff use)
  • Hover and Click interactivity fields if any for each layer.

example config.json section for ‘Wetlands’ layer:

"displayname":"Wetlands",
"pathtofile":"resources/geojson/Wetlands071814.json",
"stroke":true,
"color":"#33a02c",
"weight":4,
"opacity":0.9,
"fill":true,
"fillColor":"#33a02c",
"fillOpacity":0.2,
"geometry":"polygon",
"hover":true,
"hoverArray":[{"displayname":"Project","field":"ProjectNam"}],
"click":true,
"clickArray":[{"displayname":"Project Name","field":"ProjectNam"},{"displayname":"Subbasin","field":"Subbasin"},{"displayname":"Square Feet","field":"sq_ft"},{"displayname":"Status","field":"Status"}]

URL Variables (really!)

URL variables are used to specify:

  • lyrAr*: A list of layers from configjson to display. Defaults to all layers visible if not specified.
  • lat and lng: Used to set map center. Defaults to center specified in script.js if not set.
  • zoom: The map zoom level. Defaults to zoom specified in script.js if not set.

This way, all layers are always available, but only those specified in the URL are displayed initially.

Screen Shot 2014-09-23 at 12.21.01 PM

A Couple Examples

The map at the top of this page shows vanilla map linked at www.nickmartinelli.com/mrwc.

This map is loaded as an iFrame with the URL variables of ‘lyrArr’ for just the MRWC administrative boundary and sub basins.  http://nickmartinelli.com/mrwc/?lyrArr=MRWC%20Boundary,SubBasins

This map is loaded as an iFrame with the URL variables of ‘lyrArr’ for the MRWC administrative boundary and sub basins and the Wetlands layer. It is also zoomed to the main wetlands work area with hover and click enabled for the Wetlands layer. http://nickmartinelli.com/mrwc/?lyrArr=MRWC%20Boundary,SubBasins,Wetlands&zoom=14&lat=44.593&lng=-123.415

So the MRWC can add as many maps as they want, using iFrames from one single map source. I think that this solution, produced quickly, will provide the flexibility MRWC desires and will be easy for them to update and modify as projects evolve.

As usual, the code is available on GitHub here.

There was a fire.

Homes+in+north+Corvallis+evacuated+by+fire+near+Chip+Ross+Park+-+Photo+from+Justin+Quinn+Photography+01
Photo from Justin Quinn Photography

Nobody was killed, not even injured. But it was a big fire right in town. As the smoke filled the air around my house (safely 2 miles from the fire) I started to wonder what was going on. I took to twitter to get some information, and it didn’t seem good.

Uncontained and in a residential area. So while reading I found a lot of info about size and location descriptions but no maps, nothing showing described evacuation areas and potential evacuation areas where folks should be getting ready to move. So I made a map. Here is a screen grab after updates the next morning.

Screen Shot 2014-09-17 at 11.19.49 AM

Red ‘suitcases’ meant evacuation order had been issued, orange meant prepare for evacuation order. These orders come from emergency services, but I was sourcing reports from the Gazette Times.

Here is the map link, but the image below is what you see when you browse to any of my Mapbox free account maps right now.

Screen Shot 2014-09-17 at 4.10.30 PM

And that is just fine. I hit the ceiling of some arbitrary number of map views that Mapbox uses to control free/paid subscriptions. Fair enough, no problem. The map was done by the time it was cut off. By done, I mean it no longer had value as a map. It was an ephemeral map. It served a purpose and went away.

icon_60768
Icon by Matt Brooks

The map was started on a whim, because I couldn’t find a map on the web of where it was burning. I tweeted this out.

While not overwhelming, the response was quick, and there were folks that appreciated a decent map to see current and potential evacuation areas. It really did amaze me just how many people were using twitter to get updates. I got several replies and private messages from the current, and update tweets made later that night.

The map was retweeted a small number of times, and then by some local TV news reporters and must have ended up posted somewhere that drove more traffic to the map. Notice that the Gazette Times is included in the above tweet. I included them in my initial tweet in hopes that they might retweet the map, as it seemed helpful. However, I can understand a news organization not wanting to put out unconfirmed info, it would be easy enough to confirm. Instead they produced their own map shown here.

540aa3759fe30.image
Gazette Times

Some of my initial concerns about producing a potentially inaccurate map were quickly abated when I viewed this local newspaper map. I figured I couldn’t be less accurate. I also chose to show potential evacuation zones, and updated status, any pertinent information, and always tied to a source. Usually the Gazette Times.

This story has a happy ending because no one was hurt and the fire crews did an amazing job protecting people and structures . But as you can see from the image below, the situation could have turned much worse very quickly. The homes are feet from the fire line.

540bdc445169f.image
Gazette Times

Information dissemination is critical in an emergency, and simple tools like Mapbox make it so easy to produce high quality maps.

But there is a big issue with citizen volunteers. What if my house was in the evacuation zone after I had started the project? How could someone else pick up the map baton? It made me think of a huge feature request for our friends at mapbox. Wouldn’t it be great if, instead of just the map viewer URL, we could share an editor URL for mapbox maps. This way, others, without much training, could use these powerful tools to make updates and provide valuable information.  So…

Also, I would like to invite any reporters from the Gazette Times to the first #maptime meetup in Corvallis by @maptimCVO. We will be exploring map making in a beginner friendly way, and it would be so easy for the GT to add nice maps of important information!

More Neighborhoods

neighborhoodsI presented about the neighborhood project at the NACIS conference in Greenville, SC in October of this year. I talked a little about how the site was then, but mostly pointed out what I wanted to improve. A new version is posted HERE. The major issues for me were:

  1. User contributed comments were not visible.
  2. The data was not easily accessible.
  3. The code was not open and available for folks to implement on their own.

Descriptions

vanport

Descriptions like the one above were collected in the old version, but couldn’t be accessed live. Obviously, someone put time and thought into their description here. It was a shame that these descriptions were not visible. But now they are! Here are some more of my favorites.

awesomevilleCapitolHill

CentralDistrict

That last one is revealing in many ways. There is something potentially problematic about the term ‘neighborhoods’ that was brought up at the NACIS presentation by Dennis McClendon referencing Chicago. He brought up that people often use their parish to describe where they live, and also asserted that the African-American community may give you an intersection when asked what area do you live in. Things to think about in future iterations, or if anyone makes their own version. I’m really looking forward to other comments that reveal perceptions or ideas of place that I was not aware of.

The Data

download

First, the data is available to download directly from the site. There is a new little toolbar on the right which has a download button. The data comes in shapefile format, and will include all geometries including those that have been flagged as junk or inappropriate. But, here is a Direct Link to the latest data. This will include everything, even items added just now thanks to cartDB’s ability to export directly.

The Code

code

The code for this project is freely available on GitHub. I would love to hear if you do anything with it. And also if you make any improvements. (There is plenty of room for improvement). Here is the Direct Link.

The Design and New Features

Online maps do not need to be ugly. You can create cartography online, and even in web Mercator. As you can see from the first screen shot, we are pretty much in greyscale. Thanks to Stamen Design’s Toner base, it was pretty easy to set up. I wanted color to only come from User Contibutions. So you won’t find color until you start contributing or viewing other contributions.

The colors  for highlighted neighborhoods was fun to create. You are limited to 30 highlighted hoods, which is much more than the 12 you could highlight in the old version. The colors come from a fantastic tool I found on the web for generating distinguishable palettes called I Want Hue. Not a replacement for Color Brewer, but a great option if you need a larger set of qualitative colors than CB will provide.

Highlighted hoods are shown with little inset maps of each version of the neighborhood. Additionally now you can Love and Flag neighborhood. I really just needed the flag functionality so the community could police itself, but that seemed to be too negative, so I added the love button to cheer things up a bit. You can see the flag and love buttons here.

swanislandAre you still reading?

OK, that is a lot. But some of it is important to why the site is what it is. I think we can have a truly beautiful cartographic conversation about place through tools like this. The cartography builds itself through contributions.  I know I’ve already learned some things about areas I’m not familiar with from reading neighborhood comments on the site. So I hope you join in the conversation or start one of your own with the code.

stillpretty

 

Neighborhoods Project – Portland, Seattle, Vancouver

This Project is an attempt to map neighborhoods as one piece of a city’s image. Neighborhoods can be generally defined as two-dimensional sections of a city that have a defined extent. They are areas which you can enter or exit or use to mentally orient within a city. Real and imagined, neighborhoods make a difference in every aspect of our lives. They are zones of inclusion and exclusion, used by municipalities, realtors, school districts, tourists and locals to define what is special or unique about a place or even how you can interact with a space. Neighborhoods are defined by all of the people moving in, out and through them.

The project lives at pnwmaps.com/neighborhoods.

The site was built to allow you to map neighborhoods in Portland, Seattle, and Vancouver, BC.

Neighborhood names are not defined. It will be great to watch as neighborhoods develop and overlap from user contributions. Especially the way areas of agreement and conflict, inclusion and exclusion emerge from your contributions.

There are a few questions once you submit your neighborhood, but the only required one is ‘Neighborhood Name’. Simply select from that list as you type if the name exists already, or add your own. 

Once you add your neighborhood (or hopefully many neighborhoods), check out the live results! Click ‘View Maps’ to see what has been contributed so far. Here is a screen shots from test data.

Toggle the base map and Highlight Neighborhoods for a pretty map of the geometry of neighborhoods;

An opacity formula is used to generate the appropriate opacity for n contributions so the full opacity of overlapping polygons of the same neighborhood is always .8. CartoDB is being used to save and generate result tiles. It was great to work with and I recommend giving it a look. In addition, this site was built using Leaflet, Bootstrap, CartoDB, cartoCSS. Mapquest Tiles, and more. I’ll go over technical details in another post.

If you know Portland, Seattle, or Vancouver, BC — Please Contribute!

I also want to point out that this project took considerable inspiration from Bostonography’s ‘Mapping Boston’s Neighborhoods‘. If you can contribute there, go for it.

  “…we must learn to see the hidden forms in the vast sprawl of our cities” – The Image of The City, Lynch 1960