Map of campaign events

[vyedin]

Here’s our events API Documentation: https://github.com/mobilizeamerica/api

For example, to fetch all upcoming events nationally, request https://api.mobilize.us/v1/organizations/1316/events?timeslot_start=gte_now

[egiurleo]

Hey, @vyedin! Is there a proposed UI for this? Like maybe a Google Maps page populated with this data? Or a simple site that lists locations and dates?

[shaisachs]

Heh I think the answer is "yes". :) Basically I think it's up to us to try something out and see if it sticks, and maybe iterate from there. But what comes to mind for me is a simple page with a Google map embedded, that lets you search by say zipcode/radius and perhaps event category.

[john-osullivan]

Sounds good to me @shaisachs ! I guess the most basic implementation just has zip, radius, and dateRange, then plugs those API results as Markers into a Google Map embed -- then we could style and improve from there?

Marker API Sample Client Code for Embedding Multiple Markers

We could theoretically also look into a free mapping providers, as Google Maps now charges $7 per 1000 loads of an embedded map.

[jasonkalmeida]

This is a cool idea, just a couple clarifying thoughts/questions.

The base use case is a user should be able to come to the page, and based on a zip code, get a geo map of events in the area.

• Should the zip code be actively provided by the user? Or should we be using Geolocation API or IP approximation? This decision could impact the landing page (a zip code search page or direct to a map)

• If there are no events in the zip code provided, should we show events in nearby zip codes? If so, how far? What about states/regions where there are no scheduled events within a reasonable distance - should we provide alternative links (how they can host watch parties, live streams, etc.) so the user has a plan of action?

• Are all events equal? I know in the API itself there is a "high_priority" tag, so things like official campaign rallies can be elevated. Should "high_priority" events be visually called out on the map/list? Beyond that, are event categories equal? Phone bank events versus canvassing vs meet ups vs debate watch parties, etc? Or should we just color code categories?

• Is the Yelp web/mobile app a good example of user flow for this idea?

Sorry if these are a lot of questions, totally understand if nobody has direct answers to them, just figured I'd put them out there. Here are some of my thoughts on them.

• On the zip code point, I think having a loading screen which we use to ask for Geolocation API will be useful. If the user gives permission, we can go directly to the map, but if the user denies we can put up a quick zip code box on the page.

• I think most events should be color coded by category but have the same physical icon. The exception imo should be official campaign rallies.

Love to hear everyone else's thoughts!

[shaisachs]

Hi there, sounds like some great questions! @john-osullivan - I think your filters make a lot of sense and mesh well with the Mobilize America API, which is basically our source of truth for event listings. And yeah I think something like Open Street Map (which I'm not familiar with but is apparently a good alternative to Google Maps) would be fine.

@jasonkalmeida - I think those are some great ideas as well, though not necessary for the first proof of concept. With regards to zip code filtering, I think that's the sort of thing we'd fall back on the Mobilize America API for the first cut. In other words, send the zip code and radius parameters directly to the API and report back exactly what the API reports. We could theoretically get fancier, e.g., detect cases where the API reports back 0 events and automatically bump up the radius, etc. Similar kind of story with high priority events - it's certainly a nice feature to play with over time.

[shaisachs]

In terms of a rudimentary plan (if you will), I think there are really three elements to be pulled together:

1. Basic HTML/CSS template for displaying a map, form filters, and event links
2. Javascript for transforming form input into a Mobilize America API call.
3. Javascript for rendering the API response into a map and list of events

Does that make sense? Am I missing anything? One thing that's nice is that the API request we'd be making doesn't require authentication - so no need to worry about security of the bearer token and mess with a back end.

In terms of technical infrastructure I think we could do pretty well with a simple Github Pages solution - if there's interest I can certainly spin up a repository and we can go from there!

[shaisachs]

I just now created the event map repo - https://github.com/techforwarren/eventmap - and I'll plan to enable github pages on the master branch using a docs folder. Sound good?

[jasonkalmeida]

Question (possibly for @shaisachs, not a blocker): In terms of the visual on the map, how should we deal with multiple events at the same location?

These generally have different dates, and these should be easily handled on the list view, but if a user hovers over a location pin that has multiple events would it be okay to have the info box just list all the events (with dates besides them)?

[jasonkalmeida]

Hey all, just pushed a very basic v0.0.1 (😂) on my mvp branch. Had to figure out a lot of Open Street Map stuff (via Leaflet) for this, so that was fun.

As of now, the basic working functionality is this:

1) On load, the map shows a high level view of the US and a zip code query input box.

2) A user can query a zip code, and the map will display location markers near that zip code that are hosting events (the map will also zoom in to the area).

3) After querying a zip code, a user can click on a location marker to see a list of events at that location (and links to their respective event pages) - a lot of further work is needed here and is detailed below

4) A user can query a new zip code, which will clear the current map of markers and then follow the same flow of step 2.

Next Steps:

1) The list of events upon clicking of a location needs a lot of work. For starters, basic info about the location needs to be surfaced. Beyond that, each event needs to include high level details (date, time, etc) - I am currently working on this

2) A general list on the side to see all events (potentially with hover-mapping to the location marker, much like Yelp) - I feel that shifting to React would make this tons easier. ReactJS pages can actually be deployed to GitHub pages, so I think this might be a better way to go, especially if we want to include other (more complex) features in the future

3) There are tons of nice to have features I listed above that would be awesome if we could get to.

[shaisachs]

This is so cool, thank you so much!

At this point I think it makes sense to push your v.1 to master and make sure it gels with Github Pages. I figure I'll use the setting where builds are based off the master branch / docs folder, i.e. your index.html file will need to move into a docs folder and probably references to css / js will need to move around a little.

I also think we should start to pull the issues above into a list on the eventmap repo so that we can start to tackle them separately.

Does all that make sense to you?

[jasonkalmeida]

Hey @shaisachs,

Completely on board with getting the repo more organized and such so that others can contribute.

Currently on the road, but wanted to quickly comment on the getting GitHub pages set up. I actually am finishing up (should push tonight and will have feature parity with the current v0.1) converting the application to a React site that will use react-gh-pages to deploy the React app to a GH Page compatible app. For that, the default flow is using master as a master dev branch and a gh-pages branch for the Github Page. The flow involves running a command line script while in the master dev branch which will automatically deploy it to the gh-pages branch.

[shaisachs]

Oh nice. Works for me!

[jasonkalmeida]

Just pushed a new branch mvp-jason-react that (as the name suggests) is a React version of the eventmap. It has the same features of v0.1 that I pushed a couple days ago.

Tomorrow morning I'll start bringing more organization & documentation to the repo, particularly breaking down work into issues so others can easily jump in and contribute. Apologies for the delay on this.

[shaisachs]

Nice, sounds good! I've just merged that over to the master branch so we have a Github Pages site to play with. Nothing too exciting for now (https://techforwarren.github.io/eventmap/), but we're getting there!

[jasonkalmeida]

Just pushed some updates to the React branch. Got a functional Event List that has links to the detailed events, and on hover highlights the location on the map. Obviously will need more design work, and there's still more to do functionally, but just wanted to update. Screenshot below.

[Hucxley]

This looks great.

From a marketing point of view, it would be really cool to see a "time-lapse" style animation of the whole US map, adding each event 1 by 1 to show her grassroots network growing as each little pin pops up for events according to the time they were created. You could hide the event info list on the left, and show an advancing timestamp at the bottom of the video advancing second by second from the first event until the last event created in the list of events.

Just a thought to maybe output a or screencap of something like that at some point in the future.

On Thu, Aug 22, 2019, 4:12 AM Jason K. Almeida notifications@github.com wrote:

Just pushed some updates to the React branch. Got a functional Event List that has links to the detailed events, and on hover highlights the location on the map. Obviously will need more design work, and there's still more to do functionally, but just wanted to update. Screenshot below.

[image: working_event_list] https://user-images.githubusercontent.com/5836378/63498008-e3983200-c479-11e9-9f97-945750aeb02e.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/techforwarren/idea-board/issues/1?email_source=notifications&email_token=ABWCBHD3WFGVS345Q4O2FITQFZC7DA5CNFSM4IG44P22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD44IYVQ#issuecomment-523799638, or mute the thread https://github.com/notifications/unsubscribe-auth/ABWCBHEXLN7M24GXXN4O6Q3QFZC7DANCNFSM4IG44P2Q .

[joegoldbeck]

@john-osullivan @jasonkalmeida from looking at the repo, it appears you two are taking the lead on this. Is that right?

If so, I'm thinking we should assign the issue to you as a way to keep track of who's carrying the torch!

[jasonkalmeida]

@joegoldbeck - you're right, I went ahead and assigned it to myself. Thanks for pointing it out!

@shaisachs - I don't think I have access to the settings panel of the repo. I've gone ahead and created a production branch under a gh-pages branch. If you could just change the Github Pages settings to use that branch (instead of what I'm assuming is currently master) we should be able to see the site live!

[shaisachs]

Hi there - looks like we're all set with the event map! I'm going to go ahead and close this issue so that we can proceed with future incremental improvements in the Event map issues list. Let me know if we need to reopen though!

[shaisachs]

Ok looks like I goofed up there - will reopen!