[Sprint 4a]: Intro. to Heatmap 🔥 - Elki & Chiara

[danglorioso]

💻 Summary

For this sprint, you’ll be creating the initial stages of the map that will eventually be used as the basis for the heat map that we are going to create. To do this, you will use mapcn, an open-source map library built on MapLibre, styled with Tailwind, and integrated with shadcn.

Goals of this sprint:

• Learn about mapcn by reading documentation to understand how it works and its integrations with our existing tools such as Tailwind and shadcn.
• Create the basis of the heatmap (as somewhat of a PoC) and add rough region outlines to the map to separate out Massachusetts regions.

⚙️ Setup

Before starting:

1. Pull the latest changes from main.
2. Create a new branch for this sprint.
3. Install dependencies.
4. Run the dev server and verify the site builds.
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 1: Study mapcn documentation

• mapcn is very well-integrated with React, Tailwind, and shadcn, which is the primary reason that we decided to go with it instead of mapbox. Study the code examples that can be found in the mapcn documentation to see how to use the map’s features. Also refer to the specific API documentation.

Step 2: Install mapcn

• Follow the installation process as listed in the installation documentation. This step shouldn’t be too difficult since the docs are pretty straightforward and shadcn and Tailwind are already installed.

Step 3: Implement the map

• Start playing with the map and practicing what you learned from reading the documentation.
• There are a few requirements that we have for this first ticket for the map:
• The default zoom should show the entirety of Massachusetts and be centered on the center of the state. This zoom should also be the max zoom for the map, as all the data will be concentrated in Massachusetts.
• The first part of the map that you should configure is the region boundaries. You probably want to use routes for these boundaries. These will have to be stored in the database as lists of longitude and latitude points like [ [71.112, -49.132], [...], [...] ] so that they can be loaded and placed on any map in our app. You will want to make sure that there is no overlap between region lines, so where one border ends, the next one should start. Most likely, you will want to use the same longitude and latitude points on the borders between two regions to ensure there is no gap. The lines themselves should be clean and simple, with no individual points at each junction between line segments.
• In the database, you may want to create a new table that ties a region to their list of coordinates, which requires updating the schema in schema.ts, pushing the changes to the database on Neon, and then populating it with the region boundaries.
• As of right now, we only have the MA regions by town. We are working on getting a copy of the region boundaries drawn by hand so that it is much easier to implement. We will update you if/when we get this, so stay up-to-date on Slack. For the time being, however, use the town boundaries as a guide for the region boundaries.

Step 4: Create a heat layer

• The second part of the ticket is to create some basic heatmap functionalities. You should place data onto the map by specifying its longitude and latitude coordinates and the corresponding data. Data should cluster as you zoom out and should spread out as you zoom in.
• There is no specific criteria for what the data should be. This part of the sprint is just a PoC that will be used later once we have specific map data from Paula & Elyssa. Therefore, you can choose what data should be stored in the heatmap layer. It can be as fun or boring as you want it to be.
• The data that will be stored on the map should be stored in the database as well, also in a separate table than the region boundaries. You will definitely want to store the longitude and latitude coordinates as well as the data that is stored on the map. Anything else that you show on the map can also be stored in the db as needed.
• We recommend looking at the mapcn clusters docs to implement the heatmap.

🙌 Acceptance Criteria

• UI matches Figma exactly
• Code runs locally without errors and builds successfully
• Map displays the entirety of Massachusetts with view controls
• Boundaries accurately display regions on map
• Add a heat map layer showing any data of your choice over the state
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma:
• Tailwind CSS
• shadcn/ui
• npm package manager
• mapcn
• Regions by town