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
|
### Contoh koordinat
|
||||||
async function getAlamat(lat, lng) {
|
|
||||||
const res = await fetch(
|
|
||||||
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!res.ok) {
|
```
|
||||||
throw new Error(`HTTP error! status: ${res.status}`);
|
lat = -6.200000
|
||||||
}
|
lng = 106.816666
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## ✅ Dengan **Google Maps API**
|
### 🔹 JavaScript (fetch)
|
||||||
|
|
||||||
```js
|
```js
|
||||||
async function getAlamatGoogle(lat, lng) {
|
const lat = -6.2;
|
||||||
const apiKey = "API_KEY_KAMU";
|
const lng = 106.816666;
|
||||||
const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`;
|
const apiKey = "API_KEY_KAMU";
|
||||||
|
|
||||||
const res = await fetch(url);
|
fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}`)
|
||||||
const data = await res.json();
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
console.log(data.results[0].formatted_address);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
if (data.status !== "OK") {
|
📌 Output contoh:
|
||||||
throw new Error(data.status);
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
```js
|
||||||
async function getAlamatDetail(lat, lng) {
|
fetch(`https://nominatim.openstreetmap.org/reverse?lat=-6.2&lon=106.816666&format=json`)
|
||||||
const res = await fetch(
|
.then(res => res.json())
|
||||||
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`
|
.then(data => {
|
||||||
);
|
console.log(data.display_name);
|
||||||
const data = await res.json();
|
});
|
||||||
|
```
|
||||||
|
|
||||||
const a = data.address;
|
📌 Output:
|
||||||
return {
|
|
||||||
jalan: a.road,
|
```
|
||||||
kecamatan: a.suburb,
|
Jakarta Pusat, DKI Jakarta, Indonesia
|
||||||
kota: a.city || a.town,
|
|
||||||
provinsi: a.state,
|
|
||||||
negara: a.country,
|
|
||||||
kodepos: a.postcode,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## ⚠️ Best practice (penting)
|
## ✅ Flutter (sering dipakai di mobile)
|
||||||
|
|
||||||
### 🔹 Tambahkan User-Agent (wajib untuk OSM)
|
### Pakai `geocoding` package
|
||||||
|
|
||||||
```js
|
```dart
|
||||||
fetch(url, {
|
import 'package:geocoding/geocoding.dart';
|
||||||
headers: {
|
|
||||||
"User-Agent": "MyApp/1.0 (email@example.com)"
|
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
|
```go
|
||||||
const alamat = await (
|
resp, _ := http.Get(
|
||||||
await fetch(`https://nominatim.openstreetmap.org/reverse?lat=-6.2&lon=106.816666&format=json`)
|
"https://nominatim.openstreetmap.org/reverse?lat=-6.2&lon=106.816666&format=json",
|
||||||
).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