{"id":36590329,"url":"https://github.com/slutske22/react-esri-leaflet","last_synced_at":"2026-01-12T08:12:25.045Z","repository":{"id":48806119,"uuid":"294587856","full_name":"slutske22/react-esri-leaflet","owner":"slutske22","description":"react components for esri-leaflet","archived":false,"fork":false,"pushed_at":"2025-12-15T16:18:22.000Z","size":3401,"stargazers_count":37,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-28T03:14:30.018Z","etag":null,"topics":["esri-leaflet","leaflet","react","react-leaflet"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/slutske22/react-esri-leaflet/tree/master/examples/ts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slutske22.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-09-11T03:48:28.000Z","updated_at":"2025-12-24T09:29:52.000Z","dependencies_parsed_at":"2022-09-23T21:40:52.134Z","dependency_job_id":null,"html_url":"https://github.com/slutske22/react-esri-leaflet","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/slutske22/react-esri-leaflet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slutske22%2Freact-esri-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slutske22%2Freact-esri-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slutske22%2Freact-esri-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slutske22%2Freact-esri-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slutske22","download_url":"https://codeload.github.com/slutske22/react-esri-leaflet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slutske22%2Freact-esri-leaflet/sbom","scorecard":{"id":832150,"data":{"date":"2025-08-11","repo":{"name":"github.com/slutske22/react-esri-leaflet","commit":"fc99d11583f34510ede87fc9eca56e560bd5a38b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"50 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T18:01:11.481Z","repository_id":48806119,"created_at":"2025-08-23T18:01:11.481Z","updated_at":"2025-08-23T18:01:11.481Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28337324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T06:09:07.588Z","status":"ssl_error","status_checked_at":"2026-01-12T06:05:18.301Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esri-leaflet","leaflet","react","react-leaflet"],"created_at":"2026-01-12T08:12:24.973Z","updated_at":"2026-01-12T08:12:25.037Z","avatar_url":"https://github.com/slutske22.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://raw.githubusercontent.com/slutske22/react-esri-leaflet/HEAD/assets/react-logo.png\" width=\"80px\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n   \u003cimg src=\"https://raw.githubusercontent.com/slutske22/react-esri-leaflet/HEAD/assets/esri-logo.png\" width=\"80px\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n   \u003cimg src=\"https://raw.githubusercontent.com/slutske22/react-esri-leaflet/HEAD/assets/leaflet-logo.png\" width=\"80px\"\u003e\n   \u003ch1 align=\"center\"\u003ereact-esri-leaflet\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ci\u003equickly and easily bring esri-leaflet components into your react-leaflet application\u003c/i\u003e\n   \u003ch2 align=\"center\"\u003e\u003ca href=\"https://slutske22.github.io/react-esri-leaflet/\"\u003e\u0026#128064; Demo \u0026#128064;\u003c/a\u003e\u003c/h2\u003e\n\u003c/p\u003e\n\n[![CircleCI](https://circleci.com/gh/slutske22/react-esri-leaflet.svg?style=shield)](https://app.circleci.com/pipelines/github/slutske22/react-esri-leaflet)\n[![npm version](https://badge.fury.io/js/react-esri-leaflet.svg)](https://badge.fury.io/js/react-esri-leaflet)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/db56e8d8a5df46e4b4d7fccea442c387)](https://www.codacy.com/gh/slutske22/react-esri-leaflet/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=slutske22/react-esri-leaflet\u0026amp;utm_campaign=Badge_Grade)\n[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](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- \u0026lt;BasemapLayer /\u0026gt;\n- \u0026lt;FeatureLayer /\u0026gt;\n- \u0026lt;TiledMapLayer /\u0026gt;\n- \u0026lt;ImageMapLayer /\u0026gt;\n- \u0026lt;DynamicMapLayer /\u0026gt;\n\nPlugins:\n\n- \u0026lt;EsriLeafletGeoSearch /\u0026gt;\n- \u0026lt;HeatmapLayer /\u0026gt;\n- \u0026lt;ClusterLayer /\u0026gt;\n- \u0026lt;VectorBasemapLayer /\u0026gt;\n- \u0026lt;VectorTileLayer /\u0026gt;\n\n## Use\n\nImport any of the components and use them in a `\u003cMapContainer /\u003e`:\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 = () =\u003e {\n  return (\n    \u003cMapContainer zoom={zoom} center={center}\u003e\n      \u003cBasemapLayer name=\"DarkGray\" /\u003e\n      \u003cFeatureLayer url={featureLayerURL} /\u003e\n      \u003cEsriLeafletGeoSearch useMapBounds={false} position=\"topright\" /\u003e\n    \u003c/MapContainer\u003e\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/\u003cPluginName\u003e` 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 `\u003cEsriLeafletGeoSearch /\u003e` 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 `\u003cHeatmapLayer /\u003e` 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 `\u003cClusterLayer /\u003e` 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 `\u003cVectorBasemapLayer /\u003e` and `\u003cVectorTileLater /\u003e` 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\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ecomponent\u003c/td\u003e\n    \u003ctd\u003e\u003cb\u003eprop\u003cb\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cb\u003etype\u003cb\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cb\u003edescription\u003cb\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cb\u003erequired\u003cb\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cb\u003eBasemapLayer\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003ename\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eone of the \u003ca href=\"https://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html\"\u003eesri accepted baselayer names\u003c/a\u003e\u003c/td\u003e\n    \u003ctd style=\"font-weight: bold; color: red;\"\u003eyes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cb\u003eVectorBasemapLayer\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003ename\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eone of the \u003ca href=\"https://esri.github.io/esri-leaflet/api-reference/layers/vector-basemap.html#constructor\"\u003eesri accepted vector basemap names\u003c/a\u003e\u003c/td\u003e\n    \u003ctd style=\"font-weight: bold; color: red;\"\u003eyes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cb\u003eVectorTileLayer\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003eurl\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003ethe url of the vector tile layer service\u003c/td\u003e\n    \u003ctd style=\"font-weight: bold; color: red;\"\u003eyes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cb\u003eEsriLeafletGeoSearch\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003eonResult\u003c/td\u003e\n    \u003ctd\u003efunction(results)\u003c/td\u003e\n    \u003ctd\u003efires when geosearch returns results, takes the \u003ca href=\"https://esri.github.io/esri-leaflet/api-reference/controls/geosearch.html#events\"\u003eresults event\u003c/a\u003e as an argument\u003c/td\u003e\n    \u003ctd\u003eno\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"vertical-align: top;\"\u003e\u003cb\u003eEsriLeafletGeoSearch\u003c/b\u003e\u003c/td\u003e\n    \u003ctd style=\"vertical-align: top;\"\u003eproviders\u003c/td\u003e\n    \u003ctd style=\"vertical-align: top;\"\u003eobject\u003c/td\u003e\n    \u003ctd\u003e\n      An object defining the providers to be used for the geosearch component.  The object keys are the names of one of the \u003ca href=\"https://esri.github.io/esri-leaflet/api-reference/controls/geosearch.html#providers\"\u003epossible providers\u003c/a\u003e, and the values are objects containing the options to configure that provider.  See below for an example.\n    \u003c/td\u003e\n    \u003ctd style=\"vertical-align: top; font-weight: bold; color: red;\"\u003eyes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd colspan=\"4\"\u003e\n\n```javascript\n\u003cEsriLeafletGeoSearch \n  providers={{\n    arcgisOnlineProvider: {\n      token: your_token,\n      label: \"ArcGIS Online Results\",\n      maxResults: 10\n    },\n    featureLayerProvider: {\n      url: feature_layer_url,\n      label: 'Featurelayer Provider Results'\n      bufferRadius: 5000\n    }\n  }}\n/\u003e;\n```\n\n  \u003c/tr\u003e\n\u003ctable\u003e\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\u003cFeatureLayer\n  url={'featureLayerURL'}\n  eventHandlers={{\n    loading: () =\u003e console.log('featurelayer loading'),\n    load: () =\u003e console.log('featurelayer loaded')\n  }} /\u003e\n\n\u003cEsriLeafletGeoSearch\n  position=\"topright\"\n  eventHandlers={{\n    requeststart: () =\u003e console.log('Started request...'),\n    requestend: () =\u003e console.log('Ended request...'),\n    results: (r) =\u003e console.log(r)\n  }} /\u003e\n```\n\n## Methods\n\nMany of the methods on esri-leaflet layers can be handled through react props. For example, a `\u003cFeatureLayer /\u003e` 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 = () =\u003e {\n\n  const [minPopulation, setMinpopulation] = useState(1000);\n\n  return (\n    \u003cMapContainer zoom={zoom} center={center}\u003e\n\n      \u003cFeatureLayer\n        where={`Population \u003e '${minPopulation}'`}\n        url={featureLayerURL}\n      /\u003e\n\n      \u003cbutton onClick={() =\u003e setMinpopulation(5000)}\u003e\n        Set min population to 5000\n      \u003c/button\u003e\n\n    \u003c/MapContainer\u003e\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 = () =\u003e {\n\n  const featureLayerRef = useRef();\n\n  const queryFeature = () =\u003e {\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    \u003cMapContainer zoom={zoom} center={center}\u003e\n      \u003cFeatureLayer ref={featureLayerRef} url={featureLayerURL} /\u003e\n      \u003cbutton onClick={queryFeature}\u003eRun a Query\u003c/button\u003e\n    \u003c/MapContainer\u003e\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}\u0026client_secret=${client_secret}\u0026grant_type=client_credentials\u0026expiration=${expiration}`;\n\n  let token;\n\n  await fetch(url, {\n    method: \"POST\"\n  })\n    .then((res) =\u003e res.json())\n    .then((res) =\u003e {\n      token = res.access_token;\n    })\n    .catch((error) =\u003e {\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) =\u003e {\n\n  const [token, setToken] = useState(null);\n\n  useEffect(() =\u003e {\n    async function getToken() {\n      const token = await authenticateEsri();\n      setToken(token);\n    }\n    getToken();\n  }, []);\n\n  return (\n    \u003cMapContainer zoom center\u003e\n      {token \u0026\u0026 (\n        \u003c\u003e\n          \u003cImageMapLayer\n            token={token}\n            url=\"https://landscape6.arcgis.com/arcgis/rest/services/World_Land_Cover_30m_BaseVue_2013/ImageServer\"\n          /\u003e\n          \u003cVectorBasemapLayer name=\"ArcGIS:Streets\" token={token} /\u003e\n        \u003c/\u003e\n      )}\n    \u003c/MapContainer\u003e\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\u003cTileLayer url=\"https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}\"\u003e\n```\nis equivalent to\n\n```javascript\n\u003cBasemap name=\"Oceans\"\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslutske22%2Freact-esri-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslutske22%2Freact-esri-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslutske22%2Freact-esri-leaflet/lists"}