add styleClass and onTap props to Marker

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-here-maps",
-  "version": "0.4.0",
+  "name": "cwt-map",
+  "version": "0.6.1",
   "description": "React.js HERE Maps component",
   "main": "dist/main.js",
   "scripts": {
@@ -11,12 +11,13 @@
     "coverage:remap": "remap-istanbul -i coverage/coverage.json -o coverage/coverage.json -t json -e node_modules,test",
     "coverage:report": "istanbul report",
     "coverage:post": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "prepublishOnly": "npm run pretest && gulp",
-    "lint": "tslint --config tslint.json --project tsconfig.json --type-check"
+    "lint": "tslint --config tslint.json --project tsconfig.json --type-check",
+    "prepublishOnly": "npm run gulp",
+    "gulp": "gulp"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Josh-ES/react-here-maps.git"
+    "url": "git+https://github.com/noamAngularteam/react-here-maps.git"
   },
   "keywords": [
     "React.js",
@@ -36,12 +37,12 @@
     "here",
     "maps"
   ],
-  "author": "Josh-ES",
+  "author": "CWT",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/Josh-ES/react-here-maps/issues"
+    "url": "https://github.com/noamAngularteam/react-here-maps/issues"
   },
-  "homepage": "https://github.com/Josh-ES/react-here-maps#readme",
+  "homepage": "https://github.com/noamAngularteam/react-here-maps#readme",
   "devDependencies": {
     "@types/bluebird": "^3.5.8",
     "@types/chai": "^4.0.1",
@@ -111,9 +112,11 @@
     "webpack-uglify-js-plugin": "^1.1.9"
   },
   "dependencies": {
+    "@types/prop-types": "^15.7.1",
     "bluebird": "^3.4.1",
     "core-js": "^2.4.1",
-    "lodash": "^4.15.0"
+    "lodash": "^4.15.0",
+    "prop-types": "^15.6.2"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",

src/Circle.tsx

@@ -1,4 +1,5 @@
-import * as React from "react";
+import * as React from 'react';
+import { object } from 'prop-types';
 
 // declare an interface containing the required and potential
 // props that can be passed to the HEREMap Circle component
@@ -18,14 +19,14 @@ export interface CircleContext {
 export class Circle extends React.Component<CircleProps, object> {
   // define the context types that are passed down from a <HEREMap> instance
   public static contextTypes = {
-    map: React.PropTypes.object,
+    map: object,
   };
 
   public static defaultProps = {
-    fillColor: "rgba(255, 255, 255, 0.5)",
+    fillColor: 'rgba(255, 255, 255, 0.5)',
     lineWidth: 1,
     radius: 1000,
-    strokeColor: "black",
+    strokeColor: 'black',
   };
 
   public context: CircleContext;
@@ -48,15 +49,15 @@ export class Circle extends React.Component<CircleProps, object> {
 
   // remove the circle on unmount of the component
   public componentWillUnmount() {
-    const {map} = this.context;
+    const { map } = this.context;
 
     if (this.circle) {
       map.removeObject(this.circle);
     }
   }
 
   public render(): JSX.Element {
-    const {map} = this.context;
+    const { map } = this.context;
 
     if (map && !this.circle) {
       this.addCircleToMap();
@@ -66,30 +67,25 @@ export class Circle extends React.Component<CircleProps, object> {
   }
 
   private addCircleToMap() {
-    const {
-      map,
-    } = this.context;
-
-    const {
-      lat,
-      lng,
-      strokeColor,
-      lineWidth,
-      fillColor,
-      radius,
-    } = this.props;
+    const { map } = this.context;
+
+    const { lat, lng, strokeColor, lineWidth, fillColor, radius } = this.props;
 
     // create a circle at the provided location
-    const circle = new H.map.Circle({
-      lat,
-      lng,
-    }, radius, {
-      style: {
-        fillColor,
-        lineWidth,
-        strokeColor,
+    const circle = new H.map.Circle(
+      {
+        lat,
+        lng,
+      },
+      radius,
+      {
+        style: {
+          fillColor,
+          lineWidth,
+          strokeColor,
+        },
       },
-    });
+    );
 
     map.addObject(circle);
 

src/HEREMap.tsx

@@ -1,12 +1,13 @@
-import { debounce, uniqueId } from "lodash";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { debounce, uniqueId } from 'lodash';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
-import HMapMethods from "./mixins/h-map-methods";
-import cache, { onAllLoad } from "./utils/cache";
-import getLink from "./utils/get-link";
-import getPlatform from "./utils/get-platform";
-import getScriptMap from "./utils/get-script-map";
+import HMapMethods from './mixins/h-map-methods';
+import cache, { onAllLoad } from './utils/cache';
+import getLink from './utils/get-link';
+import getPlatform from './utils/get-platform';
+import getScriptMap from './utils/get-script-map';
+import { object } from 'prop-types';
 
 // declare an interface containing the required and potential
 // props that can be passed to the HEREMap component
@@ -34,11 +35,10 @@ export interface HEREMapChildContext {
 
 // export the HEREMap React Component from this module
 @HMapMethods
-export class HEREMap
-  extends React.Component<HEREMapProps, HEREMapState>
+export class HEREMap extends React.Component<HEREMapProps, HEREMapState>
   implements React.ChildContextProvider<HEREMapChildContext> {
   public static childContextTypes = {
-    map: React.PropTypes.object,
+    map: object,
   };
 
   // add typedefs for the HMapMethods mixin
@@ -63,21 +63,13 @@ export class HEREMap
   }
 
   public getChildContext() {
-    const {map} = this.state;
-    return {map};
+    const { map } = this.state;
+    return { map };
   }
 
   public componentDidMount() {
     onAllLoad(() => {
-      const {
-        appId,
-        appCode,
-        center,
-        hidpi,
-        interactive,
-        secure,
-        zoom,
-      } = this.props;
+      const { appId, appCode, center, hidpi, interactive, secure, zoom } = this.props;
 
       // get the platform to base the maps on
       const platform = getPlatform({
@@ -92,22 +84,18 @@ export class HEREMap
 
       const hereMapEl = ReactDOM.findDOMNode(this);
 
-      const map = new H.Map(
-        hereMapEl.querySelector(".map-container"),
-        defaultLayers.normal.map,
-        {
-          center,
-          pixelRatio: hidpi ? 2 : 1,
-          zoom,
-        },
-      );
+      const map = new H.Map(hereMapEl.querySelector('.map-container'), defaultLayers.normal.map, {
+        center,
+        pixelRatio: hidpi ? 2 : 1,
+        zoom,
+      });
 
       if (interactive !== false) {
         // make the map interactive
         // MapEvents enables the event system
         // Behavior implements default interactions for pan/zoom
         const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
-
+        behavior.disable(H.mapevents.Behavior.WHEELZOOM);
         // create the default UI for the map
         const ui = H.ui.UI.createDefault(map, defaultLayers);
 
@@ -118,48 +106,40 @@ export class HEREMap
       }
 
       // make the map resize when the window gets resized
-      window.addEventListener("resize", this.debouncedResizeMap);
+      window.addEventListener('resize', this.debouncedResizeMap);
 
       // attach the map object to the component"s state
       this.setState({ map });
     });
   }
 
   public componentWillMount() {
-    const {
-      secure,
-    } = this.props;
+    const { secure } = this.props;
 
     cache(getScriptMap(secure === true));
-    const stylesheetUrl = `${secure === true ? "https:" : ""}//js.api.here.com/v3/3.0/mapsjs-ui.css`;
-    getLink(stylesheetUrl, "HERE Maps UI");
+    const stylesheetUrl = `${secure === true ? 'https:' : ''}//js.api.here.com/v3/3.0/mapsjs-ui.css`;
+    getLink(stylesheetUrl, 'HERE Maps UI');
   }
 
   public componentWillUnmount() {
     // make the map resize when the window gets resized
-    window.removeEventListener("resize", this.debouncedResizeMap);
+    window.removeEventListener('resize', this.debouncedResizeMap);
   }
 
   public render() {
     const { children } = this.props;
 
     return (
       <div>
-        <div
-          className="map-container"
-          id={`map-container-${uniqueId()}`}
-          style={{height: "100%"}}
-        >
+        <div className="map-container" id={`map-container-${uniqueId()}`} style={{ height: '100%' }}>
           {children}
         </div>
       </div>
     );
   }
 
   private resizeMap() {
-    const {
-      map,
-    } = this.state;
+    const { map } = this.state;
 
     if (map) {
       map.getViewPort().resize();

src/Marker.tsx

@@ -2,16 +2,18 @@
 // large numbers of markers of this type can be added to the map
 // very quickly and efficiently
 
-import * as React from "react";
-import * as ReactDOMServer from "react-dom/server";
-
-import getDomMarkerIcon from "./utils/get-dom-marker-icon";
-import getMarkerIcon from "./utils/get-marker-icon";
+import * as React from 'react';
+import * as ReactDOMServer from 'react-dom/server';
 
+import getDomMarkerIcon from './utils/get-dom-marker-icon';
+import getMarkerIcon from './utils/get-marker-icon';
+import { object } from 'prop-types';
 // declare an interface containing the required and potential
 // props that can be passed to the HEREMap Marker component
 export interface MarkerProps extends H.map.Marker.Options, H.geo.IPoint {
   bitmap?: string;
+  styleClass?: string;
+  onTap?: () => void;
 }
 
 // declare an interface containing the potential context parameters
@@ -23,7 +25,7 @@ export interface MarkerContext {
 export class Marker extends React.Component<MarkerProps, object> {
   // define the context types that are passed down from a <HEREMap> instance
   public static contextTypes = {
-    map: React.PropTypes.object,
+    map: object,
   };
 
   public context: MarkerContext;
@@ -50,7 +52,7 @@ export class Marker extends React.Component<MarkerProps, object> {
   }
 
   public render(): JSX.Element {
-    const {map} = this.context;
+    const { map } = this.context;
 
     if (map && !this.marker) {
       this.addMarkerToMap();
@@ -60,46 +62,45 @@ export class Marker extends React.Component<MarkerProps, object> {
   }
 
   private addMarkerToMap() {
-    const {
-      map,
-    } = this.context;
+    const { map } = this.context;
 
-    const {
-      children,
-      bitmap,
-      lat,
-      lng,
-    } = this.props;
+    const { children, bitmap, lat, lng, styleClass, onTap } = this.props;
 
     let marker: H.map.DomMarker | H.map.Marker;
 
     if (React.Children.count(children) > 0) {
       // if children are provided, we render the provided react
       // code to an html string
-      const html = ReactDOMServer.renderToStaticMarkup((
-        <div className="dom-marker">
-          {children}
-        </div>
-      ));
+      const html = ReactDOMServer.renderToStaticMarkup(
+        <div className={'dom-marker ' + styleClass || ''}>{children}</div>,
+      );
 
       // we then get a dom icon object from the wrapper method
       const icon = getDomMarkerIcon(html);
 
       // then create a dom marker instance and attach it to the map,
       // provided via context
-      marker = new H.map.DomMarker({lat, lng}, {icon});
+      marker = new H.map.DomMarker({ lat, lng }, { icon });
+      onTap &&
+        marker.addEventListener(
+          'tap',
+          function(e) {
+            onTap();
+          },
+          false,
+        );
       map.addObject(marker);
     } else if (bitmap) {
       // if we have an image url and no react children, create a
       // regular icon instance
       const icon = getMarkerIcon(bitmap);
 
       // then create a normal marker instance and attach it to the map
-      marker = new H.map.Marker({lat, lng}, {icon});
+      marker = new H.map.Marker({ lat, lng }, { icon });
       map.addObject(marker);
     } else {
       // create a default marker at the provided location
-      marker = new H.map.Marker({lat, lng});
+      marker = new H.map.Marker({ lat, lng });
       map.addObject(marker);
     }