https://github.com/ponlawat-w/ol-osmoverpass

OpenLayers vector source extension with dynamic pull of data from OpenStreetMap using OverpassAPI.
https://github.com/ponlawat-w/ol-osmoverpass

open-street-map openlayers openstreetmap osm

Last synced: 8 days ago
JSON representation

OpenLayers vector source extension with dynamic pull of data from OpenStreetMap using OverpassAPI.

• Host: GitHub
• URL: https://github.com/ponlawat-w/ol-osmoverpass
• Owner: ponlawat-w
• Created: 2023-11-23T03:32:45.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-09-29T04:09:28.000Z (3 months ago)
• Last Synced: 2024-11-17T10:51:01.158Z (about 1 month ago)
• Topics: open-street-map, openlayers, openstreetmap, osm
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ol-osmoverpass
• Size: 255 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md

Awesome Lists containing this project

README

        
# OpenLayers OSMOverpass

OpenLayers extension for vector source that dynamically pulls data from OpenStreetMap using Overpass API.

---

# Installation

```bash

npm i ol-osmoverpass

```

# Examples

## OSM Nodes

```ts

import VectorLayer from 'ol/layer/Vector';

import { OSMOverpassWaySource } from 'ol-osmoverpass';

const layer = new VectorLayer({

  source: new OSMOverpassWaySource({

    maximumResolution: 5,

    fetchBufferSize: 250,

    overpassEndpointURL: 'https://...', // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances

    overpassQuery: 'node["amenity"="restaurant"];'

  })

});

map.addLayer(layer);

```

## OSM Ways

```ts

import VectorLayer from 'ol/layer/Vector';

import { OSMOverpassWaySource } from 'ol-osmoverpass';

const layer = new VectorLayer({

  source: new OSMOverpassWaySource({

    maximumResolution: 5,

    fetchBufferSize: 250,

    overpassEndpointURL: 'https://...', // Choose one instance from https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances

    overpassQuery: '(way["highway"];>;);'

  })

});

map.addLayer(layer);

```

## Using as CDN

[HTML Example](./examples/index.html)

## Options

### Constructor options

- `cachedFeaturesCount: number` - The number of features to store before getting cleared. This is to prevent heavy memory consumption.

- `fetchBufferSize: number` - Buffer size to apply to the extent of fetching OverpassAPI. This is to prevent excessive call despite slight map view panning. **USE THE SAME PROJECTION WITH THE LAYER**.

- `maximumResolution: number` - Map view resolution to start fetching OverpassAPI. This is to prevent fetching elements in too big extent. **USE THE SAME PROJECTION WITH THE LAYER**

- `overpassQuery: string` - OverpassQL statement(s) to fetch, excluding settings and out statements.

- `overpassEndpointURL?: string` - OverpassAPI endpoint URL (https://wiki.openstreetmap.org/wiki/Overpass_API#Public_Overpass_API_instances)

---