Uses OpenLayers geolocation API to display current location and heading.
npm install itjope/ol3-my-location
import ol from 'openlayers'
import MyLocation from 'ol3-my-location'
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 2
})
})
var options = {
color: 'rgba(255, 0, 0, 0.5)'
}
var location = MyLocation(map, options)
location.start()Activates geolocation tracking and centers the map on the first location change.
Stop geolocation tracking and removes marker overlay.
Toggles geolocation tracking.
| 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 |
OL3 style object. | |
| onChange | function |
null |
Fires on location change. |
npm start- Spins up webpack-dev-server server to serve your app atlocalhost:9000.npm run test- Runs unit tests with Karma and generates a coverage report.npm run test:dev- Runs Karma and watches for changes to re-run tests; does not generate coverage reports.npm run deploy- Runs linter, tests, and then, on success, compiles your application to disk.
Parcel web application bundler
npm install -g parcel-bundlernpm init -ynpm install openlayersnpm install itjope/ol3-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 from 'openlayers'
import MyLocation from 'ol3-my-location'
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 2
})
})
var location = MyLocation(map)
location.start()parcel index.html --https