diff --git a/assets/css/leaflet.css b/assets/css/leaflet.css index 7c5b1a6c..08aa2561 100644 --- a/assets/css/leaflet.css +++ b/assets/css/leaflet.css @@ -212,6 +212,10 @@ border-right: none; } +.leaflet-bar-notfound { + font-style: italic; +} + .leaflet-control-geosearch a.reset { color: black; font-weight: bold; diff --git a/docs/leaflet-control.mdx b/docs/leaflet-control.mdx index 6bed89c1..764a94e5 100644 --- a/docs/leaflet-control.mdx +++ b/docs/leaflet-control.mdx @@ -44,6 +44,29 @@ const searchControl = new SearchControl({ map.addControl(searchControl); ``` +## Message if address not found + + + + + +```js +import { SearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'; + +const searchControl = new SearchControl({ + notFoundMessage: 'Sorry, that address could not be found.', + provider: new OpenStreetMapProvider(), +}); + +map.addControl(searchControl); +`` + ## Properties +``` diff --git a/src/SearchControl.ts b/src/SearchControl.ts index 526b5b86..09343762 100644 --- a/src/SearchControl.ts +++ b/src/SearchControl.ts @@ -35,7 +35,7 @@ const defaultOptions: Omit = { retainZoomLevel: false, animateZoom: true, searchLabel: 'Enter address', - notFoundMessage: 'Sorry, that address could not be found.', + notFoundMessage: '', messageHideDelay: 3000, zoomLevel: 18, classNames: { @@ -45,6 +45,9 @@ const defaultOptions: Omit = { msgbox: 'leaflet-bar message', form: '', input: '', + resultlist: '', + item: '', + notfound: 'leaflet-bar-notfound', }, autoComplete: true, autoCompleteDelay: 250, @@ -93,6 +96,9 @@ interface SearchControlProps { msgbox: string; form: string; input: string; + resultlist: string; + item: string; + notfound: string; }; autoComplete: boolean; @@ -205,6 +211,12 @@ const Control: SearchControl = { this.searchElement.input.value = result.label; this.onSubmit({ query: result.label, data: result }); }, + classNames: { + resultlist: this.classNames.resultlist, + item: this.classNames.item, + notfound: this.classNames.notfound, + }, + notFoundMessage: this.options.notFoundMessage, }); this.searchElement.form.appendChild(this.resultList.container); diff --git a/src/resultList.ts b/src/resultList.ts index 80ca45fa..aa250421 100644 --- a/src/resultList.ts +++ b/src/resultList.ts @@ -4,9 +4,11 @@ import { SearchResult } from './providers/provider'; interface ResultListProps { handleClick: (args: { result: SearchResult }) => void; classNames?: { - container?: string; + resultlist?: string; item?: string; + notfound?: string; }; + notFoundMessage?: string; } export default class ResultList { @@ -16,13 +18,26 @@ export default class ResultList { container: HTMLDivElement; resultItem: HTMLDivElement; + notFoundMessage?: HTMLDivElement; - constructor({ handleClick, classNames = {} }: ResultListProps) { + constructor({ + handleClick, + classNames = {}, + notFoundMessage, + }: ResultListProps) { this.handleClick = handleClick; + this.notFoundMessage = !!notFoundMessage + ? createElement( + 'div', + cx(classNames.notfound), + undefined, + { html: notFoundMessage! }, + ) + : undefined; this.container = createElement( 'div', - cx('results', classNames.container), + cx('results', classNames.resultlist), ); this.container.addEventListener('click', this.onClick, true); @@ -42,6 +57,9 @@ export default class ResultList { if (results.length > 0) { addClassName(this.container.parentElement, 'open'); addClassName(this.container, 'active'); + } else if (!!this.notFoundMessage) { + this.container.appendChild(this.notFoundMessage); + addClassName(this.container.parentElement, 'open'); } this.results = results;