31 lines
1.7 KiB
HTML
31 lines
1.7 KiB
HTML
---
|
|
layout: example.html
|
|
title: Select Features
|
|
shortdesc: Example of using the Select interaction.
|
|
docs: >
|
|
Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
|
|
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
|
|
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
|
|
tags: "select, vector"
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<form class="form-inline">
|
|
<label>Action type </label>
|
|
<select id="type" class="form-control">
|
|
<option value="click" selected>Click</option>
|
|
<option value="singleclick">Single-click</option>
|
|
<option value="pointermove">Hover</option>
|
|
<option value="altclick">Alt+Click</option>
|
|
<option value="none">None</option>
|
|
</select>
|
|
<span id="status"> 0 selected features</span>
|
|
<br />
|
|
<label>Hit tolerance for selecting features </label>
|
|
<select id="hitTolerance" class="form-control">
|
|
<option value="0" selected>0 Pixels</option>
|
|
<option value="5">5 Pixels</option>
|
|
<option value="10">10 Pixels</option>
|
|
</select>
|
|
<canvas id="circle" style="vertical-align: middle"/>
|
|
</form>
|