Post an image of the map with prior week reports

[omegabytes]

Using Mapbox, create a static image that includes only the reports for the trailing 7 days. This should be centered as best as possible.

This tweet will be called byba scheduler once a week and will be posted as a thread with the existing weekly report.

_{Sent with GitHawk}

[omegabytes]

https://docs.mapbox.com/help/how-mapbox-works/static-maps/

[donmccurdy]

The mapbox static maps API lets us do a couple things:

style Any Mapbox style. I'm assuming this could look just like map on the website. What I'm not sure about is how to show only the trailing 7 days of data. Presumably we need to create a new style and upload data to mapbox? I think we can do both of those things programmatically, but it does sound like it'd complicate the twitter bot a fair bit, to write new data into Mapbox every week. Would be curious if you know any other options here?

overlays Custom GeoJSON, custom markers, paths, or polygons. Data is encoded in the URL, so the colors and labels can be easily computed from the week's data. This is less flexible than the heatmap above, but could still do:

• plot a point at each incident
• put a marker on each district, labeled with the number of incidents
• choropleth using the district polygons

Finally, we wouldn't strictly have to use the Mapbox API for everything, and could just get a basemap from it and draw pixels on top for the data. Still exploring those options a bit!

[omegabytes]

For the website, we pull down a base map and then use the mapbox sdk to dynamically format it. This is because some things (like legends, pop-up boxes) have to be done in code anyway.

Early in the project we had a lot of discussion around what should be handled client side vs server side. The ios app only needs some basic information displayed, while the website map will become increasingly complex over time. Happy to explore this more. Here's how we're handling it in the website today. It would be nice to have the server do the number crunching and formatting, and then the twitter service can just fetch the result (which would be the same data/formatting used in the website).

As for the static map for twitter: the choropleth seems pretty interesting. Only reservation there is each district has little variation week-over-week, so your image will look the same each time. The points will vary each time, or let people say "hey that's in front of Prop Chicken AGAIN" in a reply. There's some drawbacks to the points but I'm leaning in that direction.

I'm not sure how the last bit would work (drawing pixels on top of a map), but I'd be interested in seeing a super simple example at some point.

[donmccurdy]

For the website, we pull down a base map and then use the mapbox sdk to dynamically format it.

Early in the project we had a lot of discussion around what should be handled client side vs server side...

Makes sense to use the Mapbox GL JavaScript SDK on the website, I agree! For the Twitter bot unfortunately I don't think we can; anything WebGL-related in a lambda function is a major hassle in my experience. The Mapbox Static Image API, or perhaps something node-canvas-based, would be more reliable.

Good point that the choropleth is likely to be pretty similar week over week. I'll do some prototyping with points and see how that seems. 👍

[donmccurdy]

@omegabytes Ok, I've got something working that's visually very similar to the website. The setup is:

1. Load a blank basemap from the Mapbox Static Images API, or just store one locally.
2. Use canvas and simpleheat packages to draw a heatmap on the canvas with the week's reports.
3. Upload the image to Twitter and send a tweet.

The part of this I'm worried about is the canvas package – if the default binaries don't work on Lambda, it can be a bit tricky to compile in some environments. Would you be able to try adding it to the dependencies and deploying something, to see if we get any errors there?

Assuming that works, the result would look something like this:

^That's just randomized data, and the colors, blur, and scale can all be customized. I wanted to get feedback here and check on the dependencies before spending more time refining it.

[omegabytes]

Awesome progress! I'll test the lambda deployment out tonight and let you know.

[donmccurdy]

Sounds good, let me know if I can help!