Support for JS project

[gmjcbs]

Hi,

As my react app is in js and when I use the library, most of the time I get into not found errors while importing typescript interfaces or types.

Eg: export 'IAzureMapsContextProps' (imported as 'IAzureMapsContextProps') was not found in 'react-azure-maps'

Can you please suggest a solution to it.

Thanks

[yulinscottkang]

You don't need to import TypeScript interfaces into a JS file. In JavaScript, you can access the AzureMapsContext like this:

import React, { useContext } from 'react';
import { AzureMapsContext } from 'react-azure-maps';

...

const { mapRef, isMapReady } = useContext(AzureMapsContext);

[gmjcbs]

Thank you for your response. However it does not solve my use case.

Code:

import { AzureMap, AzureMapDataSourceProvider, AzureMapFeature, AzureMapLayerProvider, AzureMapsProvider } from 'react-azure-maps'; import { AuthenticationType, data } from 'azure-maps-control'; import 'azure-maps-control/dist/atlas.min.css'; import React, { useEffect, useRef, useMemo, useState } from 'react';

export default function App() {

const mapRef = useRef(null);

const [markers, setMarkers] = useState([ { latitude: 36.998571, longitude: -122.00875 }, { latitude: 36.998433, longitude: -122.006645 }, { latitude: 36.998484, longitude: -122.005678 }, { latitude: 36.998726, longitude: -122.005175 }, { latitude: 37.032024, longitude: -121.987336 } ])

const mapOption = { authOptions: { authType: AuthenticationType.subscriptionKey, subscriptionKey: '' // Your subscription key } };

const renderPoint = (marker) => { //console.log("mapRef...", mapRef.current); const rendId = Math.random(); let point = new data.Position(marker.latitud, marker.longitude);

return (

  <AzureMapFeature
    key={rendId}
    id={rendId.toString()}
    type="Point"
    coordinate={point}
    properties={{
      icon: 'marker-blue'
    }}
  />
);

};

const memoizedMarkerRender = useMemo( () => markers && markers.map((marker) => renderPoint(marker)), [markers], );

return ( <AzureMapsProvider> <div style={{ height: '560px', paddingBottom: '8px' }}> <AzureMap ref={mapRef} options={mapOption}> <AzureMapDataSourceProvider> <AzureMapLayerProvider id={'markers AzureMapLayerProvider'} options={{ textOptions: { color: '#000000', size: 16, textField: ['get', 'title'], //Specify the property name that contains the text you want to appear with the symbol. offset: [0, 1.2] }, iconOptions: { image: ['get', 'icon'] } }} type={'SymbolLayer'} /> {memoizedMarkerRender} </AzureMapDataSourceProvider> </AzureMap>

</AzureMapsProvider>

) }

Use case: I want to recenter to the 1st marker coordinate and zoom it to 15.

Thank you in advance

[yulinscottkang]

Here's the updated version of your example. Check <CameraController> to see how to access the mapRef object from AzureMapsContext.

import {
  AzureMap,
  AzureMapDataSourceProvider,
  AzureMapFeature,
  AzureMapLayerProvider,
  AzureMapsProvider,
  AzureMapsContext,
} from "react-azure-maps";
import { AuthenticationType, data } from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";
import React, { useMemo, useState, useContext } from "react";

const CameraController = ({ longitude, latitude }) => {
  const { mapRef, isMapReady } = useContext(AzureMapsContext);
  if (mapRef && isMapReady) {
    mapRef.setCamera({ center: [longitude, latitude], zoom: 15 });
  }
  return null;
};

export default function App() {
  const [markers, setMarkers] = useState([
    { latitude: 36.998571, longitude: -122.00875 },
    { latitude: 36.998433, longitude: -122.006645 },
    { latitude: 36.998484, longitude: -122.005678 },
    { latitude: 36.998726, longitude: -122.005175 },
    { latitude: 37.032024, longitude: -121.987336 },
  ]);

  const mapOption = {
    authOptions: {
      authType: AuthenticationType.subscriptionKey,
      subscriptionKey: "", // Your subscription key
    },
  };

  const renderPoint = (marker) => {
    const rendId = Math.random();
    let point = new data.Position(marker.longitude, marker.latitude);

    return (
      <AzureMapFeature
        key={rendId}
        id={rendId.toString()}
        type="Point"
        coordinate={point}
        properties={{
          icon: "marker-blue",
        }}
      />
    );
  };

  const memoizedMarkerRender = useMemo(
    () => markers && markers.map((marker) => renderPoint(marker)),
    [markers]
  );

  return (
    <div style={{ height: "560px", paddingBottom: "8px" }}>
      <AzureMapsProvider>
        <AzureMap options={mapOption}>
          <AzureMapDataSourceProvider id={"DataSource"}>
            <AzureMapLayerProvider
              id={"markers AzureMapLayerProvider"}
              options={{
                textOptions: {
                  color: "#000000",
                  size: 16,
                  textField: ["get", "title"], //Specify the property name that contains the text you want to appear with the symbol.
                  offset: [0, 1.2],
                },
                iconOptions: {
                  image: ["get", "icon"],
                },
              }}
              type={"SymbolLayer"}
            ></AzureMapLayerProvider>
            {memoizedMarkerRender}
            {markers[0] && (
              <CameraController
                longitude={markers[0].longitude}
                latitude={markers[0].latitude}
              />
            )}
          </AzureMapDataSourceProvider>
        </AzureMap>
      </AzureMapsProvider>
    </div>
  );
}