OpenLayers Marker Feature

This plugin provides an easy way to add markers to an OpenLayers map and associate them with popups, e.g. using ol-popup.

A Marker is basically an ol/Feature. When it is added to a map, the plugin will create an unmanaged layer for the map's markers. It will also set up pointermove and click listeners to change the cursor when the user hovers over a marker, and to dispatch a click event on the Marker feature when it is clicked.

Usage

npm install ol-marker-feature

Once you have installed the plugin, you can import and use it:

import Marker from 'ol-marker-feature';
import Popup from 'ol-popup';

const marker = new Marker([16.351, 48.277]);
marker.set('info', 'I am a marker.')
marker.setMap(map);

const popup = new Popup({offset: [0, -32]});
map.addOverlay(popup);

marker.on('click', function() {
  popup.show(marker.getLocation(), marker.get('info'));
});

Compatibility

ol-marker-feature works with ol 6.x.

API

Table of Contents

• constructor
  • Parameters
• getLocation
• setMap
  • Parameters
• dispose
• style

constructor

import Marker from 'ol-marker-feature';

Extends

• ol/Feature

Fires

• click when the marker is clicked.

Parameters

• coordOrGeomOrOptions (ol_coordinate_Coordinate | ol_geom_Geometry | objectWithGeometry) Coordinates of a point marker, a geometry, or an object with a geometry property. When only coordinates are provided (e.g. new Marker([16, 48])), a marker with the default style is created.

getLocation

Get the location of the marker feature. For points, this will be the point itself. For other geometry types, it will be a point on the geometry. Use this method e.g. for displaying a popup at the marker feature's location.

Returns ol_coordinate_Coordinate Location of the marker in view coordinates.

setMap

Adds the marker to the specified map.

Parameters

• map (ol_Map | null) Map to add the marker to. Call with null to remove the marker from any map.

dispose

Clean up when this marker is no longer needed.

style

import style from 'ol-marker-feature/style';

Default style for markers. A blue placemark icon with a shadow, 41x41 pixels, with the anchor at the tip of the marker ([12.5, 41] in pixel coordinates). When used with ol-popup, the recommended offset for the popup is [0, -32]. For use in custom styles, the icon is included in this package and can be imported from ol-markup-feature/assets/marker.png.

Type: ol_style_Style

Developing

To develop locally, the examples are useful. A development server is available with

npm run examples

When it is running, you can access the examples that are available in the examples/ folder, by browsing e.g. to https://localhost:3000/marker.html.