Awesome
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;
License
BSD © wrld3d
See LICENSE.md for details.