Draw-a-zone search

The most natural search there is: the visitor draws the neighbourhood they want with one finger or one mouse stroke. No polygon tool, no vertices to click, nothing to explain.

What it does

A panel with a "Draw my area" button. While drawing, the map stops panning and shows the stroke live; releasing closes the shape. The panel then shows "Your area is set", a "Redraw my area" button, a primary "Search in this area" button and an "Erase the area" link. The polygon is simplified before it is handed over (a stroke of several hundred points becomes a few dozen vertices) so your backend query stays cheap.

Live demo

Click "Draw my area", draw a loop around a neighbourhood, then click "Search in this area".

onShape / onSearch output will appear here...

How to enable

yatmoConfig = {
    licenseKey: 'xxxxxxxxxxxxxxxxxx',
    language: 'NL',
    country: 'BE',
    container: 'map',
    center: [4.4025, 51.2194],
    zoom: 12,
    startsWithPoisHidden: true,
    drawSearch: {
        onSearch: function (shape, meta) {
            // your listings query goes here
        }
    }
};

Options

Name	In	Type	Description
onSearch	drawSearch	function(shape, meta)	Called when the visitor clicks "Search in this area". This is your search trigger.
onShape	drawSearch	function(shape, meta)	Called when the area is drawn, redrawn or erased (`shape` is `null` after an erase). Use it to enable your own buttons or show a count.

The panel takes its position from the other scenarios enabled on the map (top left by default). When draw search is the only scenario, the panel title becomes "Draw your area".

What your callback receives

onSearch(shape, meta)

shape = { "type": "Polygon", "coordinates": [ [ [4.3312, 50.8611], [4.3398, 50.8642], ..., [4.3312, 50.8611] ] ] }
meta  = { type: 'drawn' }

Always a single closed Polygon (first and last vertex identical), longitude first. A stroke too short to make an area (fewer than eight points) is ignored.

Notes

Works with a finger

Drawing uses pointer events: mouse, pen and touch behave the same. While the visitor draws, map panning is paused and restored as soon as the stroke ends (or is interrupted by a call or a browser gesture).

The visitor can only have one drawn area at a time: drawing again replaces the previous one. If you need several areas, keep the polygons on your side after each onSearch.

To show the results, pass the same polygon to the results map as listings.shape.