DEV Community

Cover image for URBINDEX: Mapping the Hidden Cityscapes
v. Splicer
v. Splicer

Posted on

URBINDEX: Mapping the Hidden Cityscapes

a project by Splicer Scorn

The city is alive in its decay. Cracked sidewalks, abandoned rooftops, forgotten tunnels: each space pulses with memory. I built URBINDEX to channel that pulse. To map, mark, rate, and share hyperlocal places within our urban wasteland — power outlets in a subway arch, a rooftop overgrowth above a shuttered warehouse, the scorched remains of a tunnel beneath the old rail-sidings. This project isn’t just code. It’s exploration. It’s permission to wake up the city you think you know.

What URBINDEX Is

At its core URBINDEX is a social mapping tool. Users log in, drop markers, tag categories (Abandoned, Rooftop, Tunnel, Industrial, Other). They assign “Risk Level” from Low to High. They describe what makes the place interesting. They load up a description, address or coordinates, tags. The map view shows all shared locations. Search bar filters by name, description, category, risk. Map navigation via arrow keys, Enter to select markers, Escape to exit map mode. (Yes I built it for keyboard aficionados.)
All real-time. All live. No dummy data. The final version of the app shows live markers, live community stats, user registration and login, profile editing, location CRUD operations. According to the README it supports offline functionality via service worker and is a PWA. 

Frontend: vanilla HTML5 / CSS3 / JavaScript. Backend and realtime DB: Firebase (Firestore + Auth). Map layer: Leaflet.js. Icons: Font Awesome. Hosting: Firebase Hosting. 

The app’s deployment is at: https://urbindex-d69e1.web.app/ 
The code repo: https://github.com/numbpill3d/urbindex 

Why I Made It

I’m a hacker, an explorer, an analog soul in a digital age. I’ve lived in storage units, hot-wired my Honda Accord, tunneled beneath the grid of the ordinary. I build machines to help me stay awake in the grey. URBINDEX is part of that machine. A network of wanderers, shadows mapping the ghost-spaces, flicking their phone screen and saying: “Here it is.”

Because these hidden spaces matter. A rooftop might save your ass in a city lockdown. A forgotten tunnel might become your communion with something not quite human. A power outlet under an overpass might become your lifeline. These aren’t digital abstractions — these are survival vectors.

And besides — it’s just fucking fun. Tagging abandoned buildings, rating risk, dropping a note: “Watch for security guard at midnight”. Sharing your findings. Watching others join in. Urban exploration meets social network.

Key Features

Interactive Map – Zoomable, panable, keyboard enabled. Markers update in real-time. UI reacts to user registration, filters. 
User Authentication – Anonymous sign-in or full registration. Users have profiles, stats, number of locations added. 
Location CRUD – Add location, edit, delete. Details include name, description, category, risk level, tags, address or coordinates. 
Search and Filter – Search through location names and descriptions. Filter by category and risk. 
Offline/PWA Support – The app is installable. Service worker handles caching. Works offline to some extent. 
Real-time Sync – Using Firebase, all users see updates live. Markers propagate. Community feed updates. 

Architecture and Why It Matters

I chose vanilla JS/HTML/CSS for the frontend for three reasons: speed, transparency, control. No huge frameworks. If something breaks I fix the code. I know the guts. It aligns with my hacker ethos.

Firebase gives realtime database and auth without spinning up servers. It means network updates, minimal backend code, scalability. Leaflet.js gives mapping without hefty licensing. It’s lean and open.

And deployment with Firebase Hosting means you push and the app is live. Quick iteration. Bug patching at 2am after a session of rooftop exploring.

This architecture allows for growth. The next steps include adding photo uploads, heatmaps of risk vs reward, algorithmic suggestions based on your location, maybe even offline sync for remote urban exploration. The structure supports all that.

UI and UX: Y2K Mac Vibes, Hacker Heart

The aesthetic is deliberately minimal, low-fi, old-school. Imagine early Mac OS or web 1.0 feel, but polished. Instead of neon glitz I want a tool interface. Functional, but with attitude. Because exploring abandoned spaces isn’t a sparkly Instagram photo shoot. It’s grit, dust, echoing corridors, the sense that something else is watching you.

When you drop a marker you feel like a cartographer of the underground. When you search “tunnel high risk” the map might light up with red tags. You navigate with arrow keys because your hands already know movement. The map becomes a portal.

Use Cases and Scenarios

• Solo urban explorer. You enter a warehouse district. You overlay URBINDEX through your phone. You see one marker: “Abandoned factory roof – moderate risk”. You tap it, read the description, dump your own. Map markers update. You are part of the net.
• Disaster scenario. Power grid down, city sections dark. You record a marker: “Outlet under highway overpass”. Another code-corpser sees it, chains it to a generator, shares location with a small group.
• Ghost-entity tracking. For NHI hunters: markers in cryptic areas, tunnels beneath the city. You drop a “High risk” tag. Others comment. You build a net of spots.
• Campers / van-life nomads. Mark hidden campsites, trails, waterfronts. Risk levels might espouse legality or danger. Tags like “water access”, “quiet after 2 AM”.
• Creative urbanists. Graffiti artists, sound-scapers, ambient trackers: mapping spaces others don’t consider. Power outlets become loop stations. Rooftops become drone launchpads.
Enter fullscreen mode Exit fullscreen mode




Challenges and Lessons Learned


• Data integrity. With any open map you risk junk markers, spam. I built moderation and validation: risk levels, required fields, input sanitizing. I leaned into Firebase’s security rules.
• Offline support. Hard to perfect. If you’re in a tunnel with no signal, the map is less useful. The PWA helps but needs caching. Future improvement is local DB sync when reachable.
• UI performance. Map markers can flood. Performance dips. I had to cluster markers, throttle updates. Vanilla JS means I had to hand-optimize.
• User growth. A tool is only as useful as its user base. A network of explorers is waiting. I’m building the platform. You’re the explorers.
• Legal & ethical risks. Urban exploration is risky. Marking sometimes illegal venues. Risk levels help. But users must assume responsibility. The tool is a platform, not permission.
Enter fullscreen mode Exit fullscreen mode




The Road Ahead

Here’s what I’m targeting next:
• Photo uploads & galleries for each location so you don’t just see a dot you see decay.
• Tagging comments & community discussion threads built into markers. Like Reddit meets map.
• Heatmap visualization of risk vs reward. Where are clusters of “High risk / High value”?
• Gamification badges: “Rooftop King”, “Tunnel Diver”, “Power Outlet Hunter”.
• Offline sync: make the app usable in zero-signal zones.
• Model-suggested spots: algorithm surfaces hidden zones based on user tag patterns.
• API for external devs: feed the data into other tools, VR, AR overlay, mobile offline explorer apps.
• Privacy & security audit: making sure location data is stored safely, user identities protected.

Why This Matters For Developers

Because URBINDEX is not just a map. It’s a micro­social network with geospatial features and real-time data. If you’re a developer into mapping, realtime sync, PWAs, old-school hacking aesthetic, this is a demo and a toolbox. You’ll see how vanilla JS can scalably handle state, how Firebase rules secure your data, how Leaflet markers live in the wild. You’ll see UI/UX decisions that favour utility over flash. The project file structure shows how one file (final.html) can ship production code. 

If you’re curious about side projects, hacks, prototypes that matter — this is one. Build community around something tangible. Build for the hidden city, the underside of urban life. That’s where interesting data lives.

My Personal Connection

My own history bleeds into this tool. I’ve lived on the margins: hotel-hopping, storage unit living, a DIY hot-wired Honda Accord skulking the back roads. The hidden spaces were comfortable to me. URBINDEX is a reflection of that world. I view each marker as a memory of survival, of hidden passage, of soundless corridors and electricity hum. It’s ideal for someone like me — the programmed mind, the artist code, the machine hacker. I built something I’d want to use while break-in ambient loops on a late night.

In integrating with my other work — the digital pet, the handheld hacking OS, the beat sequencer — URBINDEX becomes part of the world I’m building: a network of tools that track activity, context, place. The digital pet might whisper “you’re near a new marker”. The handheld OS might sync data while you’re parked under the overpass. Everything folds in.

Call to Action

If you’re reading this and you have a phone, some spare time, a curious mind — go test URBINDEX. Drop a marker. Rate a spot. Share something no one knew about. Because maps aren’t just what the cities give us. Maps are what we build.

Explore it here → https://urbindex-d69e1.web.app/
Check out the source → https://github.com/numbpill3d/urbindex

And if you’re a developer, fork the repo, build your own extension. Let the hidden city breathe through your code.

Join me. The city’s not done talking. You just need to listen.

Thank you for reading. Keep exploring. Keep mapping. Keep building.

Top comments (0)