Merge pull request #3 from Josh-ES/circle

Circle Component

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": ["transform-es2015-instanceof"],
+  "presets": ["es2015"],
+  "sourceMaps": "inline"
+}

CHANGELOG.md

@@ -3,6 +3,22 @@
 Every change, update, bug fix or new feature will be documented in this file as new releases are published. The entire project is written in TypeScript, so references to updates to type definitions, typings dependencies etc. will be included here.
 
 <a name="Unreleased"></a>
+
+### 0.3.0
+
+*   Circle
+    *   Introduced a new React component, Circle, to create circles on maps provided by HERE Maps.
+    *   Encapsulate the Circle behaviour from the HERE Maps API, but not that of the other provided Geoshapes.
+    *   Component is used as a child of a HEREMap component.
+    *   Component simply creates a circle of the given radius at the given location.
+
+*   Automatic Position Changes of Circle and Marker instances
+    *   When the lat/lng props of a Circle or Marker instance change, their position automatically changes.
+    *   When the rad prop of a Circle instance changes, the radius automatically changes to the new value.
+
+*   Removal of Map Children
+    *   We now remove markers and circles when their wrapper component is unmounted.
+
 ### 0.2.1 (2016-08-29)
 
 #### Bug Fixes

demo/containers/App.tsx

@@ -4,9 +4,13 @@ import Header from "../components/Header";
 
 // import all the examples
 import BasicInteractiveMap from "../examples/BasicInteractiveMap";
+import CircleMap from "../examples/CircleMap";
 import HighResolutionMap from "../examples/HighResolutionMap";
 import MarkerMap from "../examples/MarkerMap";
+import MovableCircleMap from "../examples/MovableCircleMap";
+import MovableMarkerMap from "../examples/MovableMarkerMap";
 
+// import from npm
 import * as React from "react";
 
 export default class App extends React.Component<any, any> {
@@ -58,6 +62,9 @@ export default class App extends React.Component<any, any> {
             BasicInteractiveMap,
             HighResolutionMap,
             MarkerMap,
+            CircleMap,
+            MovableMarkerMap,
+            MovableCircleMap,
         ];
 
         return examples;

demo/demo.scss

@@ -4,4 +4,5 @@
 @import "stylesheets/grid";
 @import "stylesheets/map";
 @import "stylesheets/marker";
-@import "stylesheets/title";
+@import "stylesheets/title";
+@import "stylesheets/buttons";

demo/examples/CircleMap.tsx

@@ -0,0 +1,67 @@
+import HEREMap, { Circle } from "../../src/main";
+import * as React from "react";
+
+export default class CircleMap extends React.Component<any, any> {
+    public static subtitle = "This example shows you how to create an interactive map" +
+        " centred in London, England, with a circle of radius 1km displayed over the top of it.";
+
+    public static title = "Circle Map";
+
+    public static code = "import React, { Component } from \"react\";\n" +
+        "import HEREMap from \"react-here-maps\";\n" +
+        "\n" +
+        "export default class Map extends Component {\n" +
+        "   render() {\n" +
+        "       // center the map somewhere in London\n" +
+        "       const center = {\n" +
+        "           lat: 51.5,\n" +
+        "           lng: 0,\n" +
+        "       };\n" +
+        "       \n" +
+        "       return (\n" +
+        "           <HEREMap\n" +
+        "               appId={your_app_id}\n" +
+        "               appCode={your_app_code}\n" +
+        "               center={center}\n" +
+        "               zoom={8}\n" +
+        "               hidpi={true}\n" +
+        "           >\n" +
+        "               <Circle\n" +
+        "                   {...center}\n" +
+        "                   strokeColor=\"#1275E8\"\n" +
+        "                   fillColor=\"rgba(212, 92, 91, 0.2)\"\n" +
+        "                   lineWidth={2}\n" +
+        "                   radius={10000}\n" +
+        "               />\n" +
+        "           </HEREMap>\n" +
+        "       )\n" +
+        "   }\n" +
+        "}\n";
+
+    public render() {
+        // center the map somewhere in London
+        const center = {
+            lat: 51.5,
+            lng: 0,
+        };
+
+        return (
+            <HEREMap
+                center={center}
+                zoom={8}
+                hidpi={true}
+                secure={true}
+                appId="NoiW7CS2CC05ppu95hyL"
+                appCode="28L997fKdiJiY7TVVEsEGQ"
+            >
+                <Circle
+                    {...center}
+                    strokeColor="#1275E8"
+                    fillColor="rgba(18, 117, 232, 0.2)"
+                    lineWidth={2}
+                    radius={10000}
+                />
+            </HEREMap>
+        );
+    }
+}

demo/examples/MovableCircleMap.tsx

@@ -0,0 +1,137 @@
+import HEREMap, { Circle } from "../../src/main";
+import * as React from "react";
+
+interface MovableCircleMapProps {
+
+}
+
+interface MovableCircleMapState {
+    center: H.geo.IPoint;
+    radius: number;
+}
+
+export default class MovableCircleMap extends React.Component<MovableCircleMapProps, MovableCircleMapState> {
+    public static subtitle = "This example shows you how to create an interactive map" +
+        " centred in London, England, with a circle of radius 1km displayed over the top of it." +
+        " The circle's position can be toggled between two possible locations by clicking a " +
+        "provided button, and toggled between two possible radii with another.";
+
+    public static title = "Movable and Resizable Circle Map";
+
+    public static code = "import React, { Component } from \"react\";\n" +
+        "import HEREMap from \"react-here-maps\";\n" +
+        "\n" +
+        "export default class Map extends Component {\n" +
+        "   render() {\n" +
+        "       // center the map somewhere in London\n" +
+        "       const center = {\n" +
+        "           lat: 51.5,\n" +
+        "           lng: 0,\n" +
+        "       };\n" +
+        "       \n" +
+        "       return (\n" +
+        "           <div>\n" +
+        "               <HEREMap\n" +
+        "                   appId={your_app_id}\n" +
+        "                   appCode={your_app_code}\n" +
+        "                   center={center}\n" +
+        "                   zoom={8}\n" +
+        "                   hidpi={true}\n" +
+        "               >\n" +
+        "                   <Circle\n" +
+        "                       {...center}\n" +
+        "                       strokeColor=\"#1275E8\"\n" +
+        "                       fillColor=\"rgba(212, 92, 91, 0.2)\"\n" +
+        "                       lineWidth={2}\n" +
+        "                       radius={10000}\n" +
+        "                   />\n" +
+        "               </HEREMap>\n" +
+        "               \n" +
+        "               <button>\n" +
+        "                   Change Position\n" +
+        "               </button>\n" +
+        "               \n" +
+        "               <button>\n" +
+        "                   Change Radius\n" +
+        "               </button>\n" +
+        "           </div>\n" +
+        "       )\n" +
+        "   }\n" +
+        "}\n";
+
+    public state: MovableCircleMapState = {
+        center: {
+            lat: 51.5,
+            lng: 0,
+        },
+
+        radius: 10000,
+    };
+
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.togglePosition = this.togglePosition.bind(this);
+        this.toggleRadius = this.toggleRadius.bind(this);
+    }
+
+    public render() {
+        // center the map somewhere in London
+        const {
+            center,
+            radius,
+        } = this.state;
+
+        return (
+            <div>
+                <HEREMap
+                    center={center}
+                    zoom={8}
+                    hidpi={true}
+                    secure={true}
+                    appId="NoiW7CS2CC05ppu95hyL"
+                    appCode="28L997fKdiJiY7TVVEsEGQ"
+                >
+                    <Circle
+                        {...center}
+                        strokeColor="#1275E8"
+                        fillColor="rgba(18, 117, 232, 0.2)"
+                        lineWidth={2}
+                        radius={radius}
+                    />
+                </HEREMap>
+
+                <button onClick={this.togglePosition}>
+                    Change Position
+                </button>
+
+                <button onClick={this.toggleRadius}>
+                    Change Radius
+                </button>
+            </div>
+        );
+    }
+
+    private togglePosition() {
+        const {
+            center,
+        } = this.state;
+
+        center.lng = center.lng ? 0 : 0.2;
+
+        this.setState({
+            center,
+        } as MovableCircleMapState);
+    }
+
+    private toggleRadius() {
+        let {
+            radius,
+        } = this.state;
+
+        radius = radius === 10000 ? 5000 : 10000;
+
+        this.setState({
+            radius,
+        } as MovableCircleMapState);
+    }
+}

demo/examples/MovableMarkerMap.tsx

@@ -0,0 +1,105 @@
+import HEREMap, { Marker } from "../../src/main";
+import * as React from "react";
+
+interface MovableMarkerMapProps {
+
+}
+
+interface MovableMarkerMapState {
+    center: H.geo.IPoint;
+}
+
+export default class MovableMarkerMap extends React.Component<MovableMarkerMapProps, MovableMarkerMapState> {
+    public static subtitle = "This example shows you how to create an interactive map" +
+        " centred in London, England, with map images displayed in high resolution. " +
+        "A marker marking the center location is added by passing a Marker component" +
+        " instance as a child of the HEREMap component. The marker's position can be " +
+        "toggled between two possible locations by clicking a provided button.";
+
+    public static title = "Movable Marker Map";
+
+    public static code = "import React, { Component } from \"react\";\n" +
+        "import HEREMap from \"react-here-maps\";\n" +
+        "\n" +
+        "export default class Map extends Component {\n" +
+        "   render() {\n" +
+        "       // center the map somewhere in London\n" +
+        "       const center = {\n" +
+        "           lat: 51.5,\n" +
+        "           lng: 0,\n" +
+        "       };\n" +
+        "       \n" +
+        "       return (\n" +
+        "           <div>\n" +
+        "               <HEREMap\n" +
+        "                   appId={your_app_id}\n" +
+        "                   appCode={your_app_code}\n" +
+        "                   center={center}\n" +
+        "                   zoom={8}\n" +
+        "                   hidpi={true}\n" +
+        "               >\n" +
+        "                   <Marker {...center}>\n" +
+        "                       <div class='circle-marker' />\n" +
+        "                   </Marker>\n" +
+        "               </HEREMap>\n" +
+        "               \n" +
+        "               <button>\n" +
+        "                   Change Position\n" +
+        "               </button>\n" +
+        "           </div>\n" +
+        "       )\n" +
+        "   }\n" +
+        "}\n";
+
+    public state: MovableMarkerMapState = {
+        center: {
+            lat: 51.5,
+            lng: 0,
+        },
+    };
+
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.togglePosition = this.togglePosition.bind(this);
+    }
+
+    public render() {
+        // center the map somewhere in London
+        const {
+            center,
+        } = this.state;
+
+        return (
+            <div>
+                <HEREMap
+                    center={center}
+                    zoom={8}
+                    hidpi={true}
+                    secure={true}
+                    appId="NoiW7CS2CC05ppu95hyL"
+                    appCode="28L997fKdiJiY7TVVEsEGQ"
+                >
+                    <Marker {...center}>
+                        <div className="circle-marker" />
+                    </Marker>
+                </HEREMap>
+
+                <button onClick={this.togglePosition}>
+                    Change Position
+                </button>
+            </div>
+        );
+    }
+
+    private togglePosition() {
+        const {
+            center,
+        } = this.state;
+
+        center.lng = center.lng ? 0 : 0.2;
+
+        this.setState({
+            center,
+        } as MovableMarkerMapState);
+    }
+}

demo/stylesheets/_buttons.scss

@@ -0,0 +1,16 @@
+button {
+  background: #1275E8;
+  border: none;
+  box-shadow: none;
+  color: #FFF;
+  margin-top: 20px;
+  display: block;
+  width: 100%;
+  font-weight: 300;
+  padding: 20px 0;
+  font-size: 13px;
+
+  &:focus {
+    outline: none;
+  }
+}