Skip to content

Latest commit

 

History

History
133 lines (99 loc) · 3.65 KB

README.md

File metadata and controls

133 lines (99 loc) · 3.65 KB
Raw

wrld.js in React

This is an example of how wrld.js can be used in a React app using wrld-react. For simplicity this example has been created using Create React App.

Requirements

Runing the example

  1. From within the example directory, run:

    npm install

  2. Replace "your_api_key_here" with your WRLD API key.

  3. Then run:

    npm start

  4. Now go to http://localhost:3000

See the generated README for more info.

Setting up your own project using Create React App

Create your react app

In a new directory where your project will be contained, run:

npm init react-app <project-name-here>

Install wrld-react

npm install --save wrld-react

Make some changes

Update the file src/App.js

Don't forget to insert your WRLD API key.

/* globals WrldIndoorControl */

import { Wrld, 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);
        }}
        onInitialStreamingComplete={(map) => {
          map.indoors.on("indoormapenter", ({ indoorMap }) => {
            map.indoors.setFloor(2);
            map.setView([56.459984, -2.978238], 19);
            Wrld.marker([56.459984, -2.978238], {
              indoorMapId: indoorMap.getIndoorMapId(),
              indoorMapFloorId: 2
            }).addTo(map);
          });
          map.indoors.enter("westport_house");
        }}
      >
        <div
          id={"wrld-indoor-control"}
          style={{
            position: "absolute",
            top: "20px",
            right: "20px",
            bottom: "40px"
          }}
        >
        </div>
      </WrldMap>
    </div>
  );
};

export default App;

Remove the file src/App.css unless you plan to use it later.

Update public/index.html

<!-- Add this stylesheet to the head -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet"/>

<!-- Add this stylesheet and these scripts to the head if you wish to use the WrldIndoorControl widget -->
<link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/latest/css/wrld.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/indoor_control/latest/indoor_control.js"></script>

Running the app

npm start

Open http://localhost:3000 to view it in the browser.

License

This example is released under the Simplified BSD License. See LICENSE.md for details.