OSM Explorer
Explore the map your way — basemaps, borders, hatch, and buildings — on web and mobile.
OSM Explorer is a dual-client map product: a React + Leaflet web app and a Flutter port with flutter_map. Both support tile layers, country hatch overlays, border lines, antimeridian, and Overpass-powered building color mode — no API keys required for the core experience.
One map UX, two platforms
The web app is React 18 + TypeScript + Vite with react-leaflet. The Flutter app mirrors the same exploration tools for mobile. Users switch basemaps, toggle borders and hatch-by-country, show the antimeridian, and color building footprints via Overpass at higher zoom.
Map demos usually stop at a single tile layer
Teams evaluating geospatial UX need more than a pin on a map: alternate basemaps, political boundaries, highlight/hatch modes, and building-level detail. Doing that cleanly on both web and mobile without a heavy commercial SDK is the real challenge.
- Basemap switching must stay smooth under pan/zoom
- Country hatch requires careful GeoJSON overlay performance
- Building footprints should only load when zoom makes them useful
- Web and Flutter should feel like one product, not two experiments
Lean OSM tooling with feature parity across clients
We built a Vite/React explorer first, then ported the interaction model to Flutter with flutter_map and Overpass HTTP queries — keeping the feature set aligned: tiles, borders, hatch, antimeridian, and building color mode with a live zoom indicator.
Explorer tools that matter
- Multiple tile layers (CartoDB, OSM, Topo, Satellite)
- Border lines on the base map
- Country hatch — highlight one country, hatch the rest
- Antimeridian line overlay
- Building color mode via Overpass (zoom-gated)
- Flutter mobile parity with the web feature set
Web first, then mobile parity
- 01
Web map core
Leaflet layers, basemap switcher, and overlay toggles in a typed React app with a fixed Vite dev workflow.
- 02
Geospatial overlays
Country hatch and border rendering tuned for readability without drowning the basemap.
- 03
Overpass buildings
Zoom-gated building footprint fetch and color tagging so detail appears only when it helps.
- 04
Flutter port
Recreated the explorer on flutter_map with the same modes so field use matches the web tool.
Open map stack
OSM Explorer is built natively on Android using a focused, modern stack chosen for performance, maintainability, and a clean user experience.
Map UX without a paid SDK tax
Overlay performance
Hatch and borders can melt the main thread if naively drawn — we kept overlays purposeful and toggleable.
Building data volume
Overpass queries are gated by zoom so the map stays usable instead of downloading a city of polygons too early.
Parity across toolkits
Leaflet and flutter_map differ in APIs; we matched behaviors so users do not relearn the product on mobile.
Why this project matters
OSM Explorer shows LogicsBeat can ship geospatial products on open stacks — web and Flutter — with real explorer tools, not a single embed. Ideal for teams that need map intelligence without locking into a commercial maps bill.
Have a mobile product idea?
I'm available for client work in Android, mobile product development, and end-to-end app delivery. Let's talk about what you're building.