top of page
Blue Geometric Background
Screenshot 2026-03-25 190620_edited.jpg

Community Markers

Community Markers is a map-based input tool. Users drop pins with comments, allowing others to upvote or downvote the input. All data is automatically mirrored in a filterable list view on a separate page for easy sorting and review.

Why did I build this?

"I’ve always wondered why it’s so difficult—and so expensive—to let people simply drop a pin on a map and share a thought. Before AI, the technology was a massive barrier for most. Now, with the help of AI, building these tools has become significantly easier. Most products on the market are either too complex for the average user or too pricey for a small budget. I built this to solve that problem: a straightforward, honest tool that makes digital engagement accessible to every community."

Image by Mohammad Rahmani

Community Markers

Key Features

Simple Pinning
Click anywhere on the map to instantly create a marker and share your feedback.
Categorized Input
Organize your comments into three clear areas: Roads & Traffic, Walking & Biking, or Transit.
Community Voting
Upvote or downvote markers to help planners identify which issues are the highest priority for the neighborhood. (Login required).
Visual Themes
Markers are color-coded by category, allowing you to scan the map and see community trends at a glance.
Status Updates
Planners can adjust the status of any marker (e.g., "Under Review" or "Resolved") to keep the public informed of progress.
Searchable Summary Cards
Click anywhere on the map to instantly create a marker and share your feedback.
One-Click Map Sync
Every card includes a "View on Map" button that takes you directly to that marker’s exact location.
Category Filters
Quickly filter the list to focus only on the topics that matter to you, such as "Transit" or "Walking."
Streamlined Reading
Longer comments are shortened to keep the page tidy; simply click "Show More" to read the full text.

Community Markers

Tech Notes

Implementation Resources

​

Map Page: Layout & UI Architecture

​​

This configuration is designed to maximize the map's "living" space while keeping navigation intuitive and accessible on laptop views.

  • Global Header. Height: 70px. Provides consistent branding without crowding the workspace.

  • Map Section. Height: Calc(100vh - 70px). Ensures the map fills the remaining vertical screen space perfectly.

  • Map Embed. Scale: Stretch. Allows the map to expand to the full width of the browser.

  • Nav Container. Height: 74px. Positions the navigation as a floating "dock" at the bottom.

  • Nav Padding. L&R: 25px, B: 25px, T: 0px. Creates "breathing room" between the dock and the screen edges.

Map Page: Navigation Bar (bottom) Styling

​

The navigation is designed to feel "light" and non-intrusive, prioritizing the community's visual data (the map) over the interface.

  • Position: Horizontal Center (Align-Center)

  • Width: Max-Content (Adjusts dynamically to button labels)

  • Internal Padding: 40px (L&R) / 8px (T&B)

  • Visual Style: * Background: Dark (#303030)

    • Transparency: 80% (Allows the map colors to subtly bleed through, reinforcing the concept of interconnectedness).

Map Page: Layout & UI Architecture (CMS Repeater)

​

The List View uses a "Infinite Scroll" or "Show More" approach to manage large volumes of community data without overwhelming the user.

  • Main Section. Height: Auto. Allows the page to grow naturally as more community markers are added.

  • Background Layer 1. Map (Image/Embed): Set to 5%. Opacity to provide a subtle "texture" of the community location.

  • Background Layer 2. Solid Color: #F9F6F0. A warm, off-white (100% opacity) that ensures text readability while feeling "non-corporate."

  • Section Padding. 70px (T)/ 125pxm(B). Clears the 70px header and provides extra room at the bottom for the floating navigation.​

  • Main Content. Vertical Stack. Organizes the header, filters, and list in a clear, top-to-bottom hierarchy.

List View Page: the Repeater (Community Cards)

​

This is the core engine of the page. It transforms data points into a "wall of cards". 

​

  • Items per Row: 3 (Optimized for 13"–15" laptop screens).

  • Gaps: 24px (Provides balanced white space between entries).

  • Card Styling: Radius: 16px (Rounded corners for a softer, more approachable "human-centric" feel).

    • Internal Padding: 25px (Ensures text doesn't feel "cramped" against the card edges).​

  • Grid Alignment:

    • Row 1 (Content): 1fr — This allows the main comment text to expand and fill the available space.

    • Row 2 (Footer/Status): 50px — Critical: By fixing this height, all "View on Map" buttons and "Like" counts stay perfectly aligned horizontally, regardless of how long the comment above is.

List View Page: Interactive Elements

​

  • Filter Dropdowns: Horizontal Stack.

  • "Show More" Logic: Prevents "wall of text" fatigue. Only the first 4 lines are visible initially.

bottom of page