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.