Giter VIP home page Giter VIP logo

Comments (4)

slutske22 avatar slutske22 commented on June 3, 2024 1

Interesting use case, I hadn't thought of that. Is the idea to have 2 different mapServiceProviders, with different urls? It looks like you are trying to use the same url, but with different searchFields and layers, which seems a bit redundant.

Anyway yes, this is a use case I hadn't considered and your suggestion to turn the prop into an array is a good one. I'll try to pubish a change when I get a chance.

from react-esri-leaflet.

slutske22 avatar slutske22 commented on June 3, 2024 1

That's one way to workaround, very nice.

Another may be just to grab a ref to the EsriLeafletGeosearch component and modify its options directly:

  const MyMap = () => {
    const [ref, setRef] = useState();

    useEffect(() => {
      if (ref){
        ref.options.providers = [provider1, provider2, etc];
      }
    }, [ref])

    return (
      <MapContainer>
        <EsriLeafletGeoSearch
          ref={ref}
          providers={{}}
          key={ARCGIS_API_KEY}
        />
      </MapContainer>
    );
  };

Not sure if you can modify those providers after the fact, its just another idea till I can patch this package.

from react-esri-leaflet.

rylincoln avatar rylincoln commented on June 3, 2024

Yes, I'm using the same url, but different layers[] to search, more for a separate of concerns to simplify the formatSuggestions as the fields to search will be different for each layer.

from react-esri-leaflet.

rylincoln avatar rylincoln commented on June 3, 2024

FYI - I setup a component to solve for me now that I understand it more.

import { useEffect } from 'react'
import { useMap } from 'react-leaflet'
import * as ELG from 'esri-leaflet-geocoder'
import useArcGISToken from "../hooks/useArcGISToken";

const EsriLeafletGeoCoder = () => {
    const [token, error] = useArcGISToken();
    if (error) {
        console.log("error", error);
    }
    const map = useMap()

    useEffect(
        () => {
            if (token) {
                const layer21 = ELG.mapServiceProvider({
                    url: 'https://server.com/server/rest/services/folder/servicename/MapServer',
                    token: token,
                    layers: [21],
                    searchFields: ["id"],
                    label: "Layer 21",
                    searchMode: "strict",
                    bufferRadius: 10,
                    maxResults: 10,
                    formatSuggestion: function (feature) {
                        return `${feature.properties.id}` || null;
                    },
                });

                const layer3 = ELG.mapServiceProvider({
                    url: 'https://server.com/server/rest/services/folder/servicename/MapServer',
                    token: token,
                    layers: [3],
                    searchFields: ["id","name"],
                    label: "Layer 3",
                    searchMode: "startWith",
                    bufferRadius: 10,
                    maxResults: 10,
                    formatSuggestion: function (feature) {
                        console.log(feature)
                        return `${feature?.properties?.id} | ${feature?.properties?.name}` || null;
                    },
                });

                const GeoSearch = new ELG.Geosearch({
                    useMapBounds: false,
                    collapseAfterResult: false,
                    expanded: true,
                    providers: [layer21, layer3]
                })

                GeoSearch.addTo(map)

                return () => {
                    GeoSearch.remove()
                }
            } else {
                return () => {
                    console.log("no token")
                }
            }

        }
        , [map, token])

    return null

}

export default EsriLeafletGeoCoder

from react-esri-leaflet.

Related Issues (15)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.