Inspiration The inspiration for CityLink 305 stemmed from the critical need for robust, citizen-driven solutions to urban challenges in an increasingly connected world. Witnessing the complexities of smart city initiatives, particularly during the 305 Hackathon in Miami, highlighted how crucial it is to empower residents to actively participate in identifying and reporting infrastructure gaps and opportunities. We envisioned a platform that could not only map these issues but also offer intelligent insights to foster sustainable and efficient urban development globally.
What it does CityLink 305 is a robust smart city explorer that allows users to:
Report & Visualize: Pinpoint and report various urban resources or challenges (e.g., public Wi-Fi, bike shares, EV chargers, sustainability spots) on an interactive map. Dynamic City Search: Search for any city worldwide, dynamically load its map, and manage local reports. Data Analysis: View a real-time bar chart analyzing reported types, helping identify patterns and needs. Heatmap Visualization: Toggle a heatmap to visualize the density of reports in an area, revealing hot-spots or underserved regions. AI Suggestions (Gemini): Leverage AI to suggest optimal new locations for resources based on existing reports, providing a glimpse into predictive urban planning. Personalized Experience: Log in (demo), filter reports by user, toggle dark mode, and switch between English and Spanish. Data Management: Export and import reports as JSON files, and clear local data for the current city. Global Data Integration: Fetch and display real-time global EV charging station data from OpenChargeMap. Progressive Web App (PWA): Offers an installable, offline-capable experience, enhancing accessibility and reliability. How we built it CityLink 305 was built using a modern web stack focused on performance, interactivity, and a rich user experience:
Frontend: Pure HTML, CSS (leveraging CSS Variables for dynamic theming), and Vanilla JavaScript for core logic and DOM manipulation. Mapping: Leaflet.js was used for the interactive map display, complemented by Leaflet.heat for creating dynamic heatmaps. Data Visualization: Chart.js powered the analytical bar chart for report types. APIs: Gemini API (Google AI): Integrated for generating AI-driven location suggestions. Nominatim (OpenStreetMap): Utilized for geocoding, enabling users to search for any city by name and retrieve its coordinates. OpenChargeMap API: Fetched global EV charging point data for a real-world data layer. Data Persistence: localStorage managed all user-generated reports, settings (dark mode, language), and current city data, ensuring data persists across sessions. PWA Features: A manifest.json and service-worker.js were implemented to enable offline caching and make the application installable on user devices. Challenges we ran into Developing CityLink 305 presented several interesting challenges:
Geospatial AI Integration: A significant hurdle was getting the general-purpose Gemini LLM to provide geographically sensible and localized location suggestions. Without extensive geospatial fine-tuning, the AI would sometimes "hallucinate" coordinates far from the target city. This required iterative prompt engineering and implementing client-side sanity checks to validate suggested coordinates against the current city's center. Dynamic City Management: Transitioning from a fixed set of cities to a dynamic search required careful redesign of data loading, persistence, and marker rendering logic to ensure smooth transitions and city-specific data storage. API Rate Limits & Reliability: Respecting API rate limits (especially for Nominatim) and handling potential API failures gracefully was crucial for a robust experience. PWA Caching Strategy: Designing an effective service worker caching strategy that balanced offline capabilities with ensuring users always get updated content (especially map tiles and script changes) proved tricky to fine-tune. Loading State Management: Ensuring the "Loading robust map..." spinner correctly appeared and disappeared at the right times, especially during initial load and city switches, required meticulous debugging (a specific bug was identified and fixed during development!). Accomplishments that we're proud of We are particularly proud of:
Seamless Multi-API Integration: Successfully weaving together multiple external APIs (mapping, charting, AI, geocoding, open data) into a cohesive and functional application. Dynamic City Exploration: Empowering users to explore virtually any city worldwide with a simple search, transforming the app into a truly global tool. Intelligent AI Assistant: Implementing an AI suggestion feature that, despite its limitations, provides a compelling demo of how AI can contribute to urban planning challenges. Robust Data Persistence: Building a system that reliably stores and retrieves user-generated data locally, enhancing user trust and experience. PWA Implementation: Delivering an installable and offline-first experience, highlighting modern web capabilities. What we learned This project provided invaluable learning experiences:
Prompt Engineering: We gained deeper insights into the art and science of crafting effective prompts for LLMs to guide their output towards specific, complex requirements. Geospatial Challenges: The project underscored the unique complexities of geospatial data and AI, demonstrating that general LLMs, while powerful, require significant contextualization for location-specific tasks. Client-Side Data Management: We reinforced best practices for managing client-side data using localStorage, including key naming conventions and error handling. Progressive Enhancement: The benefits of building a core functional app and progressively adding advanced features and PWA capabilities. User Experience & Accessibility: The importance of consistent UI feedback (toasts, loading states) and accessibility considerations (ARIA attributes, keyboard navigation) for all users. What's next for CityLink 305 For the future, CityLink 305 aims to:
Enhanced AI: Explore fine-tuning specialized geospatial AI models or integrating with more advanced urban planning APIs for even more accurate and context-aware suggestions. Real User Authentication: Implement a robust user authentication system beyond the demo login, enabling personalized dashboards and potentially collaborative reporting. Crowdsourcing & Moderation: Introduce features for users to validate, comment on, and moderate reports, fostering a community-driven data quality model. More Open Data Integrations: Expand integrations with various open city data portals to enrich the map with additional layers of information (e.g., public transport, air quality, real-time events). Push Notifications: Leverage PWA capabilities further by implementing push notifications for relevant updates or community alerts. User Profiles & Gamification: Introduce elements like user profiles, badges, or leaderboards to encourage more active participation.
Log in or sign up for Devpost to join the conversation.