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;