# nhatpham12/simplemap architecture

> Architecture diagram of the GitHub repository nhatpham12/simplemap, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nhatpham12/simplemap
- Repository: https://github.com/nhatpham12/simplemap

## Overview

SimpleMap is a browser map and driving-directions app. A user searches for a destination; the search component resolves it through OpenStreetMap’s Nominatim service and passes the selected coordinates to the map controller. The controller obtains the browser’s current location, requests a driving route from OSRM, and displays the route and destination on a Leaflet map with turn-by-turn details. The README is empty, so this view follows the sampled React source and does not infer additional capabilities.

Main entry points: [`SimpleMap/simplemap/src/components/Map.js`](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/Map.js) (Map controller), [`SimpleMap/simplemap/src/components/SearchBar.js`](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/SearchBar.js) (Destination search), [`SimpleMap/simplemap/src/App.js`](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/App.js) (App shell), [`SimpleMap/simplemap/src/components/RouteSteps.js`](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/RouteSteps.js) (Route instructions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["App interface"]
  node_app["App shell<br/>[App.js]"]
end

subgraph group_search["Place search"]
  node_searchbar["Destination search<br/>[SearchBar.js]"]
  node_nominatim{{"Nominatim geocoder"}}
end

subgraph group_directions["Directions and map"]
  node_map["Map controller<br/>[Map.js]"]
  node_geolocation{{"Browser location"}}
  node_osrm{{"OSRM routing"}}
  node_routesteps["Route instructions<br/>[RouteSteps.js]"]
  node_leaflet["Leaflet map<br/>[Map.js]"]
  node_osmtiles{{"OpenStreetMap tiles"}}
end

node_user(("Map user"))

node_user -->|"enters destination"| node_searchbar
node_app -->|"renders"| node_map
node_searchbar -->|"searches places"| node_nominatim
node_nominatim -->|"returns matches"| node_searchbar
node_searchbar -->|"selects destination"| node_map
node_map -->|"reads position"| node_geolocation
node_map -->|"requests route"| node_osrm
node_osrm -->|"returns route"| node_map
node_map -->|"provides instructions"| node_routesteps
node_map -->|"renders map"| node_leaflet
node_map -->|"loads tiles"| node_osmtiles

click node_app "https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/App.js"
click node_map "https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/Map.js"
click node_searchbar "https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/SearchBar.js"
click node_routesteps "https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/RouteSteps.js"
click node_leaflet "https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/Map.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_user toneBlue
class node_searchbar,node_nominatim toneAmber
class node_map,node_geolocation,node_osrm,node_routesteps,node_leaflet,node_osmtiles toneMint
```

## Components

### App interface

- [App shell](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/App.js): `SimpleMap/simplemap/src/App.js`

### Place search

- [Destination search](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/SearchBar.js): `SimpleMap/simplemap/src/components/SearchBar.js`
- **Nominatim geocoder**

### Directions and map

- [Map controller](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/Map.js): `SimpleMap/simplemap/src/components/Map.js`
- **Browser location**
- **OSRM routing**
- [Route instructions](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/RouteSteps.js): `SimpleMap/simplemap/src/components/RouteSteps.js`
- [Leaflet map](https://github.com/nhatpham12/simplemap/blob/main/SimpleMap/simplemap/src/components/Map.js): `SimpleMap/simplemap/src/components/Map.js`
- **OpenStreetMap tiles**

### Other components

- **Map user**

## Connections

- Map user → Destination search: enters destination
- App shell → Map controller: renders
- Destination search → Nominatim geocoder: searches places
- Nominatim geocoder → Destination search: returns matches
- Destination search → Map controller: selects destination
- Map controller → Browser location: reads position
- Map controller → OSRM routing: requests route
- OSRM routing → Map controller: returns route
- Map controller → Route instructions: provides instructions
- Map controller → Leaflet map: renders map
- Map controller → OpenStreetMap tiles: loads tiles