Update openstreetmap.md
This commit is contained in:
mbahsomo
parent
ff2bae51e0
commit
c2f687d9b2
166
openstreetmap.md
166
openstreetmap.md
|
|
@ -1,104 +1,134 @@
|
|||
Untuk **ambil alamat dari longitude–latitude** itu namanya **reverse geocoding**.
|
||||
Ada beberapa cara, tergantung mau **pakai API online** atau **offline**.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Contoh dasar (JavaScript)
|
||||
## ✅ Cara PALING UMUM: Google Maps Reverse Geocoding
|
||||
|
||||
```js
|
||||
async function getAlamat(lat, lng) {
|
||||
const res = await fetch(
|
||||
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`
|
||||
);
|
||||
### Contoh koordinat
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP error! status: ${res.status}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
return data.display_name;
|
||||
}
|
||||
|
||||
// pakai
|
||||
(async () => {
|
||||
try {
|
||||
const alamat = await getAlamat(-6.2, 106.816666);
|
||||
console.log(alamat);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
})();
|
||||
```
|
||||
lat = -6.200000
|
||||
lng = 106.816666
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Dengan **Google Maps API**
|
||||
### 🔹 JavaScript (fetch)
|
||||
|
||||
```js
|
||||
async function getAlamatGoogle(lat, lng) {
|
||||
const apiKey = "API_KEY_KAMU";
|
||||
const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`;
|
||||
const lat = -6.2;
|
||||
const lng = 106.816666;
|
||||
const apiKey = "API_KEY_KAMU";
|
||||
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data.results[0].formatted_address);
|
||||
});
|
||||
```
|
||||
|
||||
if (data.status !== "OK") {
|
||||
throw new Error(data.status);
|
||||
}
|
||||
📌 Output contoh:
|
||||
|
||||
return data.results[0].formatted_address;
|
||||
```
|
||||
Jakarta, Daerah Khusus Ibukota Jakarta, Indonesia
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🔹 Response penting dari Google
|
||||
|
||||
```json
|
||||
{
|
||||
"formatted_address": "Jl. MH Thamrin No.1, Jakarta Pusat, Indonesia",
|
||||
"address_components": [
|
||||
{ "long_name": "Jakarta Pusat", "types": ["administrative_area_level_2"] }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Ambil field detail (jalan, kota, dll)
|
||||
## ✅ Alternatif GRATIS (tanpa API key): OpenStreetMap (Nominatim)
|
||||
|
||||
⚠️ Ada rate limit (jangan spam)
|
||||
|
||||
### JavaScript
|
||||
|
||||
```js
|
||||
async function getAlamatDetail(lat, lng) {
|
||||
const res = await fetch(
|
||||
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`
|
||||
);
|
||||
const data = await res.json();
|
||||
fetch(`https://nominatim.openstreetmap.org/reverse?lat=-6.2&lon=106.816666&format=json`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(data.display_name);
|
||||
});
|
||||
```
|
||||
|
||||
const a = data.address;
|
||||
return {
|
||||
jalan: a.road,
|
||||
kecamatan: a.suburb,
|
||||
kota: a.city || a.town,
|
||||
provinsi: a.state,
|
||||
negara: a.country,
|
||||
kodepos: a.postcode,
|
||||
};
|
||||
}
|
||||
📌 Output:
|
||||
|
||||
```
|
||||
Jakarta Pusat, DKI Jakarta, Indonesia
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Best practice (penting)
|
||||
## ✅ Flutter (sering dipakai di mobile)
|
||||
|
||||
### 🔹 Tambahkan User-Agent (wajib untuk OSM)
|
||||
### Pakai `geocoding` package
|
||||
|
||||
```js
|
||||
fetch(url, {
|
||||
headers: {
|
||||
"User-Agent": "MyApp/1.0 (email@example.com)"
|
||||
}
|
||||
});
|
||||
```dart
|
||||
import 'package:geocoding/geocoding.dart';
|
||||
|
||||
List<Placemark> placemarks =
|
||||
await placemarkFromCoordinates(-6.2, 106.816666);
|
||||
|
||||
Placemark place = placemarks.first;
|
||||
|
||||
print(place.street);
|
||||
print(place.locality);
|
||||
print(place.country);
|
||||
```
|
||||
|
||||
### 🔹 Hindari spam request
|
||||
|
||||
* Cache hasil
|
||||
* Delay antar request
|
||||
|
||||
---
|
||||
|
||||
## 🔥 Versi super ringkas
|
||||
## ✅ Golang (pakai OpenStreetMap)
|
||||
|
||||
```js
|
||||
const alamat = await (
|
||||
await fetch(`https://nominatim.openstreetmap.org/reverse?lat=-6.2&lon=106.816666&format=json`)
|
||||
).json();
|
||||
```go
|
||||
resp, _ := http.Get(
|
||||
"https://nominatim.openstreetmap.org/reverse?lat=-6.2&lon=106.816666&format=json",
|
||||
)
|
||||
defer resp.Body.Close()
|
||||
|
||||
console.log(alamat.display_name);
|
||||
var result map[string]interface{}
|
||||
json.NewDecoder(resp.Body).Decode(&result)
|
||||
|
||||
fmt.Println(result["display_name"])
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Penting diketahui
|
||||
|
||||
* Reverse geocoding **tidak 100% presisi**
|
||||
* Bisa beda hasil antar provider
|
||||
* Google = paling akurat, tapi **berbayar**
|
||||
* OSM = gratis, tapi **lebih lambat**
|
||||
|
||||
---
|
||||
|
||||
## 🔥 Mau hasil lebih detail?
|
||||
|
||||
Kamu bisa ambil:
|
||||
|
||||
* Jalan
|
||||
* Kecamatan
|
||||
* Kota
|
||||
* Provinsi
|
||||
* Kode pos
|
||||
|
||||
Tinggal bilang:
|
||||
|
||||
* **pakai bahasa apa** (JS / Flutter / Go)
|
||||
* **provider** (Google / OSM / Mapbox)
|
||||
* mau **online atau offline**
|
||||
|
||||
Nanti aku bikinin contoh **siap copy–paste** 👍
|
||||
|
|
|
|||
Loading…
Reference in New Issue