Most recently tested with Leaflet React-Leaflet 2.5.0.
React Leaflet geosearching/geocoding control build on top of React-Leaflet.
The SearchControl is using the plugin from leaflet-geosearch
To get started, to be able to run the example you have execute:
npm install
import React from "react";
import { Map, TileLayer } from "react-leaflet";
import { SearchControl, OpenStreetMapProvider } from "../dist/index";
//here you can add some styles
import './example/react-leaflet-geosearch.css';
export default class GeoSearchExample extends React.Component {
constructor() {
super();
}
render() {
const prov = OpenStreetMapProvider();
const GeoSearchControlElement = SearchControl;
return (
<Map
center={[42.09618442380296, -71.5045166015625]}
zoom={2}
zoomControl={true}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<GeoSearchControlElement
provider={prov}
showMarker={true}
showPopup={false}
maxMarkers={3}
retainZoomLevel={false}
animateZoom={true}
autoClose={false}
searchLabel={"Enter address, please"}
keepResult={true}
popupFormat={({ query, result }) => result.label}
/>
</Map>
);
}
}
You can find the following example in the folder example
. Run the above code by executing the following scripts in package.json, with the order they are stated underneath:
-
build
-
example