OpenLayers Control for layer Search

It works with single layer and a column name (test with Openlayers 10.8.0)

Demo

You can see the demo in action using RawGit

Dependency

You have to be aware that we use horsey, a "Progressive and customizable autocomplete component". This third party is Vanilla JavaScript (No jQuery or any other heavy framewok). It's a 12kB compressed and gzipped.

How to use it

For CSS link and JS script tags

<!-- Insert Horsey CSS link -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/horsey/4.2.2/horsey.min.css">
<!-- Insert ol-search-layer plugin CSS link -->
<link rel="stylesheet" href="../dist/ol-search-layer.css">

After the call to the ol.js script (or your custom build)

<!-- Insert Horsey JS script -->
<script src="//cdnjs.cloudflare.com/ajax/libs/horsey/4.2.2/horsey.min.js"></script>
<!-- Insert ol-search-layer plugin JS script -->
<script src="../dist/ol-search-layer.min.js"></script>

If you need the file for a demo, you can reference them from below code (or you can download them)

<script src="//rawgit.com/andreaordonselli/ol-search-layer/master/dist/ol-search-layer.min.js"></script>
<link rel="stylesheet" href="//rawgit.com/andreaordonselli/ol-search-layer/master/dist/ol-search-layer.min.js">

In your JS code

var searchLayer = new ol.SearchLayer({
  layer: layerImage,
  colName: 'name',
  zoom: 10,
  collapsed: true,
  map: map,
  maxResults: 20,  // optional - if not set show 10 result
  showOnFocus: false // optional - if true show suggestions immediately
});

map.addControl(searchLayer);

License

MIT

Thanks

We mainly borrowed code from ol-geocoder for the UI part.