0.1.1 • Published 8 years ago
react-radar-screen v0.1.1
React Radar Screen
Demo application is available here.
Installation
npm install react-radar-screen --save
Basic Usage
import React from "react";
import ReactDOM from "react-dom";
import Radar from "react-radar-screen";
var center = { lat: 50.083702, lng: 14.434289, data: { name: "I'm here" } };
var points = [
{ id: "0", lat: 50.089543, lng: 14.412834, data: { name: "Bridge" } },
{ id: "1", lat: 50.083510, lng: 14.395006, data: { name: "Tower" } },
{ id: "2", lat: 50.092989, lng: 14.429555, data: { name: "Park" } },
{ id: "3", lat: 50.080977, lng: 14.409966, data: { name: "Island" } },
{ id: "4", lat: 50.087119, lng: 14.420635, data: { name: "Clock" }}
];
ReactDOM.render(
<Radar pxRadius={100}
geoRadius={2000}
center={center}
points={points}
onDetect={(point, radar) => {
console.log("Detected '%s'. Distance(m): %f. Bearing(deg): %f.",
point.data.name,
radar.distance,
radar.bearing
);
}}
/>,
document.getElementById("radar")
);
Props
Prop | Type | Description |
---|---|---|
pxRadius | Number | Screen size in pixels. |
geoRadius | Number | Scanned range radius in meters. |
center | Object | Center point coordinates. |
points | Array | Points to be rendered on screen. |
onDetect | Function | Callback to be called once point is detected. Argumnets: point - original point object radar - object which contains radar measuremens (distance and bearing) |
Point object
Point's id
property if set must have unique value (e.g. uuid). It is not mandatory.
If not provided component will generate ids for it's internal needs.