Wrld-react NPM

wrld-react

A React Component for wrld.js

Install

npm install --save wrld-react

JavaScript Usage

/* 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;

<!-- 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/v1/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/v1/latest/indoor_control.js"></script>

TypeScript Usage

If you are using TypeScript you will need to add declarations for any widgets you wish to use. We are working to add these declarations to so you won't have to.

import React from "react";

import { Wrld, WrldMap } from "wrld-react";

declare class WrldIndoorControl {
  constructor(elementId: string, map: Wrld.Map);
}

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;