It’s been over 3 years since we launched the WRLD Javascript SDK, and we’ve been continually adding new features. Most recently, we added 3D indoor props which you can add in code and using our Asset Tool, and published our Navigation and RouteView widgets, making it easier than ever to add wayfinding support to your apps.

One of the features that our users keep asking about is support for the popular React and React Native frameworks. After all, most of our own web apps such maps.wrld3d.com and our Map Design tools are React apps!

React

Setting up WRLD.js in a React app is actually pretty easy, but to help out we’ve published a WRLD React package on NPM and put together an example app.

As shown below, all you need to do is install the wrld-react package, and then add the WrldMap component wherever you want in your app!

/* globals WrldIndoorControl */

import { WrldMap } from "wrld-react";

const App = () => {
  return (
    <div>
      <WrldMap
        apiKey={"your_api_key_here"}
        containerStyle={{
          width: "600px",
          height: "400px"
        }}
        mapOptions={{
          center: [56.459604, -2.977816],
          indoorsEnabled: true
        }}
        onMapMount={(map) => {
          new WrldIndoorControl("wrld-indoor-control", map);
        }}
      >
        <div
          id={"wrld-indoor-control"}
          style={{
            position: "absolute",
            top: "20px",
            right: "20px",
            bottom: "40px"
          }}
        >
        </div>
      </WrldMap>
    </div>
  );
};

export default App;

As shown in onMapMount, you can access the prop map, which is an L.Wrld.map and use all of the usual wrld.js functionality. To make life even easier, we added Typescript type definitions in wrld.js if you need them!

React Native

React Native has become increasingly popular as one of several frameworks for writing cross-platform mobile apps. While WRLD still recommends using our native iOS and Android SDKs for the best performance and user-experience on mobile, we recently published an example of how to build a React Native app that embeds a WRLD.js map in a React Native WebView that can be built into an iOS or Android app using Expo.

See the Github repo for full details of how it works, but the main complexity is setting up a controller to handle messaging between the map and the React Native app so that the app can call Wrld Map functions such as map.setView() as shown in the example, when the user clicks on one of the location buttons in the app UI. To expose additional map functionality to the app, simply add additional message types and handlers in the MapController, and likewise if the app needs to listen for any additional map events the controller should register for these and implement a function to post a message in the event handler.

Getting help

If you need further information, help or have feature requests just get in touch with our support team. If you’re new to WRLD, you can sign up for a free trial of our Digital Twin developer plan, which will allow you to create API keys for use with the WRLD.js Javascript SDK - as well as loads more. Have fun building with WRLD!