go to developers doc

Add External Woosmap JS API in React

We currently do not provide the Woosmap JS API as a package npm. Let's see how to integrate it using custom React Hook.
  1. Create a React Hook to load External JS File
  2. Load Woosmap Loader with the hook

This tutorial is outdated and will be taken down shortly. To integrate Woosmap Map with React, please use the Woosmap Map JS library. You can refer to this code sample for guidance: React Map Basic.

Create a React Hook to load External JS File

Hooks let’s access React’s state and lifecycle methods from a functional component. The useEffect Hook is a function that runs after render and every time the DOM updates. Passing in an empty array runs the effects only after the initial render. Passing in props runs effects every time the props changed.

JavaScript
        useEffect(() => {
  console.log(`script alreadey loaded? ${scriptLoaded}`);
}, [scriptLoaded])

In our case, we would like to instantiate the Map object once the Woosmap javascript loader is fully loaded to the DOM. First, create the hook hooks/useScript.js and add the following import statements to the top of the file.

hooks/useScript.js

JavaScript
        import {useEffect, useState} from 'react';

Next, load the script if not already loaded using DOM Method.

hooks/useScript.js

JavaScript
        export default function useScript(src) {
  try {
    const [loaded, setLoaded] = useState(false);
      useEffect(() => {
          let script = document.querySelector(`script[src="${src}"]`);
          if (!script) {
            script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = function () {
              setLoaded(true)
            }
            document.body.appendChild(script);
          } 
          else {
            setLoaded(true)
          }
      }, [src]);
      return loaded;
    } catch (err) {
        console.error(`An error occurred while loading ${src}`);
    }
}

Load Woosmap Loader with the hook

Finally, you can create your Map component and load the Woosmap loader script like this:

Map.js

JavaScript
        import {useEffect} from "react";
import useScript from "./hooks/useScript";

const Map = () => {
  const woosmapLoaded = useScript("https://sdk.woosmap.com/locator/loader.js");
  useEffect(() => {
    if (woosmapLoaded) {
      initMap();
    }
  }, [woosmapLoaded]);
}