Building CampaignHawk: Mapbox and Data (Part 9)


Continuing the discussion from Building CampaignHawk: Connecting Modals with React (Part 8):

Part 9, in which we finally start working with Mapbox and some data. This is where things start to get interesting.

Building CampaignHawk: Thinking about Data (Part 10)
Building CampaignHawk: Popouts and Radio Buttons (Part 13)
Building CampaignHawk: Mapbox.js and Meteor (Part 12)
Building CampaignHawk: Mapbox and GeoJSON (Part 11)
Building CampaignHawk: Triggering Functions with Radio Buttons (Part 15)
Building CampaignHawk: Spacial Analysis Overview (Part 16)
Building CampaignHawk: Clustering with Leaflet Markercluster (Part 17)
Building CampaignHawk: Making a Precinct Data Layer (Part 18)
Building CampaignHawk: Scaling Colors and Values with D3 (Part 19)
Building CampaignHawk: Styling the Precinct Data Layer (Part 20)
Building CampaignHawk: Toggling Data Layers (Part 21)
Building CampaignHawk: Radio Button Styling (Part 14)

These articles are awesome!

I would really love to know how you organise your time between coding and blog writing, because I really struggle. After I’ve been head-down coding, I can’t seem to break off and organise what I did into a coherent article before I’ve moved on to the next coding challenge.

How do you enforce the discipline to produce such high quality articles so frequently?


@robfallows Haha to be honest, I do it by spending an inordinate amount of time writing articles.

As I’m coding, I have a notepad open and whenever I make a significant change, I note it so I don’t forget to include it in the article. Then I go over my commit history to try to piece together what I did and figure out how to explain it in a way that makes sense to someone other than me.

The most recent articles have taken >60 minutes to write, while the code only takes 10-15 minutes.


That’s a good tip. I guess if not too much time has elapsed that would work for me.

Thanks :smile:


@samcorcos Hi, I’m learning a lot with your tutorial, thanks again!

I have an error when i try to get the data. I copied the function from the link.

Any idea?


Looks like your post request worked properly, but your get request is broken. Can you log from the post request and let me know what you get?


Resolved. I had accessCode inside public in settings.json. So the login was invalid.



@samcorcos I’m following your article and tweaking a few things here and there, like I have my side panel and map in a flexbox with an auto-shrinking side-panel. But I’m having some issues getting the map to appear. I’ve added the meteor package and the API keys, the map seemingly loads (I have zoom controls top-left) but no map… just blank!

Any idea’s as to where I might have gone wrong!? Or perhaps the mapbox javascript doesn’t like being loaded into a flexbox!? :confounded:


@samcorcos You still around?


Hey, I haven’t been checking the forums much lately. I would guess that the map does not like being in a flexbox. It needs to have a definite height in order to render.