ol-my-location
v2.0.1
Published
Show current location using OL built in geolocation API
Downloads
3
Readme
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