Nondeterministic Polynomial Munchies

    wrld-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    wrld-react

    A React Component for wrld.js

    NPM

    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/latest/v1/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/v1/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;

    License

    BSD © wrld3d

    See LICENSE.md for details.

    Keywords

    none

    Install

    npm i wrld-react

    DownloadsWeekly Downloads

    35

    Version

    1.0.0

    License

    See license in LICENSE.md

    Unpacked Size

    25.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • wrld