esri-leaflet | lightweight set of tools for working with ArcGIS services | REST library

Use feature.properties.mag to access the magnitude in your response:

const dataParcel = axios.get is not what you think it is. axios.get is an asynchronous function, so dataParcel is not the result of what was returned from the Promise, but rather the promise itself. You need to do this in proper async/await syntax. In react-leaflet, this is made even easier. You don't need to be working with L.map at all, reat-leaflet has you covered.

Create a component specifically for your data fetching, which will fetch data on mount, and render a react-leaflet GeoJSON when the data is ready:

You can use L.Control to create a control / button with the logo image:

What you're trying to do is not too hard. While there are a handful of tutorials on different parts of what you want to do, let's piece things together. I'm going to use esri-leaflet-geocoder for my search functionality, as its consistent with esri-leaflet, and IMO its one of the best geocoders available for leaflet.

After setting up a basic leaflet map, let's import esri-leaflet and esri-leaflet-geocoder, and create a geocoder:

Serendipitously, I have been working on a different problem, and one of the byproducts of that problem may come in handy for you.

Your primary issue is the asynchronous nature of the click event. If you open up your map (the first jsfiddle in your comment), open your dev tools network tab, and start clicking around, you will see a new network request made for every click. That's how a lot of esri query functions work - they need to query the server and check the database for the value you want at the given latlng. If you tried to attach that same behavior to a mousemove event, you'll trigger a huge number of network requests and you'll overload the browser - bad news.

One solution of what you can do, and its a lot more work, is to read the pixel data under the cursor of the image returned from the esri image service. If you know the exact rgb value of the pixel under the cursor, and you know what value that rgb value corresponds to in the map legend, you can achieve your result.

And Here is the codesandbox source code. Don't be afraid to hit refresh, CSB is little wonky in the way it transpiles the modules.

What is happening here? Let's look step by step:

1. On map events like load, zoomend, moveend, a specialized function is fetching the same image that L.esri.dynamicMapLayer does, using something called EsriImageRequest, which is a class I wrote that reuses a lot of esri-leaflet's internal logic:

Looking at React Leaflet documentation there seems to be no Map component. Meaning that the value of Map in your code is set to undefined which results in the error you receive.

Change Map into MapContainer and you should be good to go.

The React Leaflet project probably choose this name to not conflict with the JavaScript Map class.

Add the repeated Markerto the result Layergroup instead to the map:

Generally speaking, you need some way of integrating with your web app's build process if you want to get a list of hashed URLs for use within your service worker.

Given that you're using Next.js, a plugin like next-offline can help by doing two things:

• Integrating with your build process to get a list of your hashed URLs.
• Generating the entirety of your service worker for you, using workbox-precaching under the hood to ensure that your URLs are properly cached and kept up to date.

You can implement something similar yourself if you'd prefer not to use next-offline, but you'd need to use something like next-assets-manifest to obtain the list of hashed URLs, write your own service worker, and figure out how to inject those URLs into the service worker.

Best solution I've been able to come up with is changing from a featureLayer to a dynamicMapLayer. This comes with some tradeoffs, however:

• Can't customize the icons
• Difficult to style with css

• Loads faster
• No MIME-type or CORB issues