Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/k-yle/osm-api-js
🗺️🌏 Javascript/Typescript wrapper around the OpenStreetMap API
https://github.com/k-yle/osm-api-js
openstreetmap osm
Last synced: 4 months ago
JSON representation
🗺️🌏 Javascript/Typescript wrapper around the OpenStreetMap API
- Host: GitHub
- URL: https://github.com/k-yle/osm-api-js
- Owner: k-yle
- License: mit
- Created: 2021-12-21T04:45:16.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-17T09:29:12.000Z (5 months ago)
- Last Synced: 2024-09-30T10:04:15.932Z (4 months ago)
- Topics: openstreetmap, osm
- Language: TypeScript
- Homepage: https://npm.im/osm-api
- Size: 567 KB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenStreetMap API for Javascript
[](https://github.com/k-yle/osm-api-js/actions)
[](https://coveralls.io/github/k-yle/osm-api-js?branch=main)
[](https://badge.fury.io/js/osm-api)
[](https://www.npmjs.com/package/osm-api)
🗺️🌏 Javascript/Typescript wrapper around the OpenStreetMap API.
Benefits:
- Lightweight (24 kB gzipped)
- works in nodejs and the browser.
- converts OSM's XML into JSON automatically.
- uses OAuth 2, so that you don't need to expose your OAuth `client_secret`
## Install
```sh
npm install osm-api
```
## Usage
```js
const OSM = require("osm-api");
// or
import * as OSM from "osm-api";
// you can call methods that don't require authentication
await OSM.getFeature("way", 23906749);
// Once you login, you can call methods that require authentication.
// See the section below about authentication.
await OSM.createChangesetComment(114733070, "Thanks for your edit!");
```
If you don't use a bundler, you can also include the module using a `` tag:
```html
<script src="https://unpkg.com/osm-api@2">
OSM.getFeature("way", 23906749);
OSM.login({ ... });
...
```
## Examples
All methods return promises. Examples requests and responses are available for all methods:
> 🔑 means the method requires authentication
- Features
- [`getFeature()`](./examples/getFeature.md)
- [`getFeatures()`](./examples/getFeatures.md)
- [`getFeatureAtVersion`](./examples/getFeatureAtVersion.md)
- [`getFeatureHistory`](./examples/getFeatureHistory.md)
- [`getWaysForNode`](./examples/getWaysForNode.md)
- [`getRelationsForElement`](./examples/getRelationsForElement.md)
- Changesets
- [`listChangesets`](./examples/listChangesets.md)
- [`getChangeset`](./examples/getChangeset.md)
- [`getChangesetDiff`](./examples/getChangesetDiff.md)
- 🔑 [`uploadChangeset`](./examples/uploadChangeset.md)
- 🔑 [`createChangesetComment`](./examples/createChangesetComment.md)
- Users
- [`getUser`](./examples/getUser.md)
- [`getUsers`](./examples/getUsers.md)
- [`getUIdFromDisplayName`](./examples/getUIdFromDisplayName.md)
- Messaging
- 🔑 [`deleteMessage()`](./examples/deleteMessage.md)
- 🔑 [`getMessage()`](./examples/getMessage.md)
- 🔑 [`listMessages()`](./examples/listMessages.md)
- 🔑 [`sendMessage()`](./examples/sendMessage.md)
- 🔑 [`updateMessageReadStatus()`](./examples/updateMessageReadStatus.md)
- Preferences
- 🔑 [`getPreferences()`](./examples/getPreferences.md)
- 🔑 [`updatePreferences()`](./examples/updatePreferences.md)
- 🔑 [`deletePreferences()`](./examples/deletePreferences.md)
- Misc
- [`getApiCapabilities()`](./examples/getApiCapabilities.md)
- [`getMapData`](./examples/getMapData.md)
- [Using the Development Server](./examples/dev-server.md)
- Authentication (browser only, not available in NodeJS)
- `login`
- `logout`
- `isLoggedIn`
- 🔑 `getAuthToken()`
- `authReady`
- [`getPermissions()`](./examples/getPermissions.md)
## Authentication in the browser
When used in the browser, this library lets you authenticate to OSM using OAuth 2. This requires either:
1. Redirecting the user to the OAuth page, or
2. Opening a popup window.
### 1. Popup
If using a popup, you should create a separate landing page, such as `land.html`. This html file should contain the following code:
> 💡 If you don't want to create a separate page, you can set the redirect URL to your
> app's main page, as long as you include this HTML snippet.
```html
if (window.opener) {
window.opener.authComplete(location.href);
window.close();
}
```
To login, or check whether the user is logged in, use the following code:
```js
const OSM = require("osm-api");
OSM.login({
mode: "popup",
clientId: ".......",
redirectUrl: "https://example.com/land.html",
})
.then(() => {
console.log("User is now logged in!");
})
.catch(() => {
console.log("User cancelled the login, or there was an error");
});
// you can check if a user is logged in using
OSM.isLoggedIn();
// and you can get the access_token using
OSM.getAuthToken();
```
### 2. Redirect
If you use the redirect method, you don't need a separate landing page.
```js
const OSM = require("osm-api");
// when you call this function, you will be immediately redirected to openstreetmap.org
OSM.login({
mode: "redirect",
clientId: ".......",
redirectUrl: "https://example.com/land.html",
});
```
```js
const OSM = require("osm-api");
// If you login using the redirect method, you need to await
// this promise before you can call `isLoggedIn` or `getAuthToken`.
await OSM.authReady;
// you can check if a user is logged in using
OSM.isLoggedIn();
// and you can get the access_token using
OSM.getAuthToken();
```
## Authentication in NodeJS
In NodeJS, if you want to use a method that requires authentication, call the `configure()` function first:
```js
const OSM = require("osm-api");
OSM.configure({ bearerToken: "..." });
// or
OSM.configure({ basicAuth: { username: "...", password: "..." } });
// now you can call methods that require authentication.
// Example:
await OSM.createChangesetComment(114733070, "Thanks for your edit!");
```
## Comparison with osm-request
This library offers several advantages over [osm-request](https://github.com/osmlab/osm-request):
1. **TypeScript support**: osm-api-js is built with TypeScript, providing better type safety and developer experience.
2. **Simpler API**: The API is designed to be more straightforward and easier to use.
3. **Smaller bundle size**: With fewer dependencies, osm-api-js has a noticeably smaller bundle size.
While osm-request has been revived, osm-api-js was created when osm-request was abandoned and lacked OAuth 2 support.