title: Amazon Location map how to enable Route calculator, tracker map in react js project
body: <p>I need your help to implement the <a href="https://console.aws.amazon.com/location/explore/home?region=us-east-1#/route" rel="nofollow noreferrer">AWS map</a>, I have created the Arn for all the required map functionality but I don't know how to enable the search box and its functionality.</p>
  <ol>
  <li>Map --&gt; implemented</li>
  <li>Place index --&gt; need help</li>
  <li>Route calculator --&gt; need help</li>
  <li>Geofence collection --&gt; need help</li>
  <li>Tracker --&gt; need help</li>
  </ol>
  <p>sample code for your reference:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { createRequestTransformer } from &quot;amazon-location-helpers&quot;;
  import { ICredentials } from &quot;@aws-amplify/core&quot;;
  import Amplify,{ Auth } from &quot;aws-amplify&quot;;
  import ReactMapGL, { NavigationControl, ViewportProps } from &quot;react-map-gl&quot;;
  import &quot;maplibre-gl/dist/maplibre-gl.css&quot;;
  import amplifyConfig from &quot;../aws-exports&quot;;
  Amplify.configure(amplifyConfig);
  // Replace with the name of the map that you created on the Amazon Location Service console: https://console.aws.amazon.com/location/maps/home
  const mapName = &quot;&lt;MAP NAME&gt;&quot;;
  const Map = () =&gt; {
    const [credentials, setCredentials] = useState&lt;ICredentials&gt;();
    const [transformRequest, setRequestTransformer] = useState&lt;Function&gt;();
    const [viewport, setViewport] = React.useState&lt;Partial&lt;ViewportProps&gt;&gt;({
      longitude: -123.1187,
      latitude: 49.2819,
      zoom: 10,
    });
    useEffect(() =&gt; {
      const fetchCredentials = async () =&gt; {
        setCredentials(await Auth.currentUserCredentials());
      };
  
      fetchCredentials();
    }, []);
    // create a new transformRequest function whenever the credentials change
    useEffect(() =&gt; {
      const makeRequestTransformer = async () =&gt; {
        if (credentials != null) {
          const tr = await createRequestTransformer({
            credentials,
            region: amplifyConfig.aws_project_region,
          });
          // wrap the new value in an anonymous function to prevent React from recognizing it as a
          // function and immediately calling it
          setRequestTransformer(() =&gt; tr);
        }
      };
      makeRequestTransformer();
    }, [credentials]);
    return (
      &lt;div&gt;
        {transformRequest ? (
          &lt;ReactMapGL
            {...viewport}
            width=&quot;100%&quot;
            height=&quot;100vh&quot;
             /** @ts-ignore */
            transformRequest={transformRequest}
            mapStyle={mapName}
            onViewportChange={setViewport}
          &gt;
            &lt;div style={{ position: &quot;absolute&quot;, left: 20, top: 20 }}&gt;
              &lt;NavigationControl showCompass={false} /&gt;
            &lt;/div&gt;
          &lt;/ReactMapGL&gt;
        ) : (
          &lt;h1&gt;Loading...&lt;/h1&gt;
        )}
      &lt;/div&gt;
    );
  };
  export default Map;
  </code></pre>
  <p>reference image: <a href="https://i.stack.imgur.com/65OHe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/65OHe.png" alt="enter image description here" /></a></p>
  <p>I don't know how to enable the tracker and place index functionality can I get anyone help on this. Thanks in advance.</p>