ol-my-location
Uses OpenLayers geolocation API to display current location and heading.
Installation
npm install notnotse/ol-my-location
Example usage
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import View from 'ol/View'
import OLMyLocation from '../src/index'
document.addEventListener('DOMContentLoaded', () => {
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
center: [100, 0],
zoom: 2
})
})
const location = OLMyLocation(map, {
onChange: (e) => {
console.log('change', e)
}
})
location.start()
})API
.start()
Activates geolocation tracking and centers the map on the first location change.
.stop()
Stop geolocation tracking and removes marker overlay.
.toggle()
Toggles geolocation tracking.
Options
| Name | Type | Default | Description |
|---|---|---|---|
| trackingOptions | object |
{ enableHighAccuracy: true } |
Tracking options. See http://www.w3.org/TR/geolocation-API/#position_options_interface. |
| size | number |
20 |
Size of the location marker in pixels. |
| color | rgb |
rgb(241, 22, 210) |
Color for the location marker. |
| accuracyLayerStyle | ol.style.Style |
ol style object. | |
| onChange | function |
null |
Fires on location change. |
Development
-
npm start- Spins up webpack-dev-server server to serve your app atlocalhost:9000. -
npm run deploy- Runs linter, tests, and then, on success, compiles your application to disk.
Quick Start using Parcel web application bundler
Parcel web application bundler
npm install -g parcel-bundlernpm init -ynpm install olnpm install ol-my-location- Create an index.html file
<html>
<body>
<div id="map" />
<script src="./index.js"></script>
</body>
</html>- Create an index.js file
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import View from 'ol/View'
import OLMyLocation from '../src/index'
document.addEventListener('DOMContentLoaded', () => {
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
center: [100, 0],
zoom: 2
})
})
const location = OLMyLocation(map, {
onChange: (e) => {
console.log('change', e)
}
})
location.start()
})parcel index.html --https