\n\n\n[](https://app.circleci.com/pipelines/github/slutske22/react-esri-leaflet)\n[](https://badge.fury.io/js/react-esri-leaflet)\n[](https://www.codacy.com/gh/slutske22/react-esri-leaflet/dashboard?utm_source=github.com&utm_medium=referral&utm_content=slutske22/react-esri-leaflet&utm_campaign=Badge_Grade)\n[](https://www.gnu.org/licenses/gpl-3.0)\n\n\n## Requirements\n\nRequires react^19, react-leaflet^5, and esri-leaflet^3. \n\n## Installation\n\nTo use these components you must install certain dependencies yourself:\n\n```javascript\nnpm i react react-dom leaflet react-leaflet esri-leaflet\n```\n\nwith all of your underlying packages installed,\n\n```javascript\nnpm i react-esri-leaflet\n```\n\n## Components\n\nreact-esri-leaflet offers the following components:\n\nNative Components:\n\n- <BasemapLayer />\n- <FeatureLayer />\n- <TiledMapLayer />\n- <ImageMapLayer />\n- <DynamicMapLayer />\n\nPlugins:\n\n- <EsriLeafletGeoSearch />\n- <HeatmapLayer />\n- <ClusterLayer />\n- <VectorBasemapLayer />\n- <VectorTileLayer />\n\n## Use\n\nImport any of the components and use them in a ``:\n\n```javascript\nimport React from \"react\";\nimport { MapContainer } from \"react-leaflet\";\nimport { BasemapLayer, FeatureLayer } from \"react-esri-leaflet\";\nimport EsriLeafletGeoSearch from \"react-esri-leaflet/plugins/GeoSearch\";\n\nconst Map = () => {\n return (\n \n \n \n \n \n );\n};\n```\n\n### Using esri-leaflet Plugins\n\nIf you want to use any of the esri-leaflet plugins, you must first install their underlying packages and any associated css. Each plugin has its own requirements, which you can find in the esri-leaflet docs. Plugins are imported not from the main package, but from the `/plugins/` subfolder, like this:\n\n```javascript\nimport EsriLeafletGeoSearch from \"react-esri-leaflet/plugins/EsriLeafletGeoSearch\";\n```\n\n#### `EsriLeafletGeoSearch`\n\nYou must first install the underlying `esri-leaflet-geocoder`:\n\n```javscript\nnpm i esri-leaflet-geocoder\n```\n\nYou will also need to include the css in your html header, as explained [in the esri-leaflet-geocoder documentation](https://github.com/Esri/esri-leaflet-geocoder). You can then use the `` component. See the Use section for examples.\n\n#### `HeatmapLayer`\n\nFirst install the underlying dependencies:\n\n```javscript\nnpm i leaflet.heat esri-leaflet-heatmap\n```\n\nYou can then use the `` component.\n\n#### `ClusterLayer`\n\nFirst install the underlying dependencies:\n\n```javscript\nnpm i leaflet.markercluster esri-leaflet-cluster\n```\n\nYou can then use the `` component.\n\n#### VectorBasemapLayer and VectorTileLayer\n\nFirst install the underlying dependencies:\n\n```javscript\nnpm i esri-leaflet-vector\n```\n\nYou can then use the `` and `` components.\n\n## Props\n\nAll react-esri-leaflet components inherit their props from the underlying esri-leaflet component options. You can find the options for each esri-leaflet layer [in their documentation](https://esri.github.io/esri-leaflet/api-reference/#layers). However, certain options are available or necessary for react-esri-leaflet components:\n\n
fires when geosearch returns results, takes the results event as an argument
\n
no
\n
\n
\n
EsriLeafletGeoSearch
\n
providers
\n
object
\n
\n An object defining the providers to be used for the geosearch component. The object keys are the names of one of the possible providers, and the values are objects containing the options to configure that provider. See below for an example.\n
\n
yes
\n
\n
\n
\n
\n\n```javascript\n;\n```\n\n
\n
\n\n## Events\n\nEvents can be accessed in the same way as described in the [react-leaflet documentation](https://react-leaflet-v3.now.sh/docs/api-components#evented-behavior), using the `eventHandlers` prop. All events are inherited from their underlying esri-leaflet component. For example:\n\n```javascript\n console.log('featurelayer loading'),\n load: () => console.log('featurelayer loaded')\n }} />\n\n console.log('Started request...'),\n requestend: () => console.log('Ended request...'),\n results: (r) => console.log(r)\n }} />\n```\n\n## Methods\n\nMany of the methods on esri-leaflet layers can be handled through react props. For example, a `` accepts the `where` prop, which applies a server side filter on the features in the layer. Using vanilla esri-leaflet, the `getWhere` and `setWhere` methods are available on the layer. With react-esri-leaflet, you can manage the setting and getting of many layer properties with react:\n\n```javascript\nconst Map = () => {\n\n const [minPopulation, setMinpopulation] = useState(1000);\n\n return (\n \n\n '${minPopulation}'`}\n url={featureLayerURL}\n />\n\n \n\n \n );\n\n};\n```\n\nIn this way, you can 'get' or 'set' your prop by accessing the state variable used to control it, or setting that state variable.\n\nOther methods on esri-leaflet components are less related to presentational logic, and more related to analysis or interacting with the root dataset. For example, calling `query` or `eachFeature` on a featureLayer will not affect the presentation logic. In this sense, all methods not directly affecting the presentational logic of your layers (read: everything but the setters and getters) should be accessed by getting a `ref` to the underlying esri-leaflet layer. For example:\n\n```javascript\nconst Map = () => {\n\n const featureLayerRef = useRef();\n\n const queryFeature = () => {\n featureLayerRef.current\n .query()\n .within(latlngbounds)\n .where(\"Direction = 'WEST'\")\n .run(function (error, featureCollection) {\n console.log(featureCollection);\n });\n };\n\n return (\n \n \n \n \n );\n\n};\n```\n\n## Using Authenticated Layers\n\nAny esri layers that require authentication accept a `token` prop. A react-esri-leaflet layer that requires a `token` should be conditionally rendered based on the availability of the token. For example, a typical token getting function is as follows:\n\n```Javascript\nasync function authenticateEsri(client_id, client_secret, expiration) {\n\n const authservice = \"https://www.arcgis.com/sharing/rest/oauth2/token\";\n const url = `${authservice}?client_id=${client_id}&client_secret=${client_secret}&grant_type=client_credentials&expiration=${expiration}`;\n\n let token;\n\n await fetch(url, {\n method: \"POST\"\n })\n .then((res) => res.json())\n .then((res) => {\n token = res.access_token;\n })\n .catch((error) => {\n console.error(error);\n });\n\n return token;\n\n}\n```\n\nOn component mount, you can call this function, save the token to state, and conditionally render the layer based on the state variable:\n\n```Javascript\nconst Map = (props) => {\n\n const [token, setToken] = useState(null);\n\n useEffect(() => {\n async function getToken() {\n const token = await authenticateEsri();\n setToken(token);\n }\n getToken();\n }, []);\n\n return (\n \n {token && (\n <>\n \n \n \n )}\n \n );\n \n};\n```\n\n## Alternatives\n\nYou don't necesarily need an esri-leaflet component to bring esri layers into leaflet. You can use an esri service url with a react-leaflet `TileLayer`. For example:\n\n```javascript\n\n```\nis equivalent to\n\n```javascript\n\n```\n\n\nEsri also offers [react-arcgis](https://github.com/Esri/react-arcgis), which is a react wrapper for the ArcGIS Javascript API, but that takes you outside the realm of leaflet.\n\n## License\n\nMIT License\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/slutske22/react-esri-leaflet/HEAD/assets/react-logo.png\"){kind=logo}
\n ![](\"https://raw.githubusercontent.com/slutske22/react-esri-leaflet/HEAD/assets/esri-logo.png\"){kind=logo}
\n ![](\"https://raw.githubusercontent.com/slutske22/react-esri-leaflet/HEAD/assets/leaflet-logo.png\"){kind=logo}
\n