Ol-my-location NPM

ol-my-location

Uses OpenLayers geolocation API to display current location and heading.

screenshot

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 at localhost: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-bundler
npm init -y
npm install ol
npm 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

@everything-registry/sub-chunk-2373 @zalastax/nolb-ol

2.0.1

4 years ago

2.0.0

4 years ago