Merge branch 'release/1.2.0'

.eslintrc.json

@@ -1,12 +1,15 @@
 {
-    "extends": "google",
+    "extends": ["eslint:recommended", "google"],
+    "env": {
+        "browser": true,
+        "commonjs": true
+    },
     "parserOptions": {
         "ecmaVersion": 6,
         "sourceType": "module"
     },
     "rules": {
         "max-len": ["error", {"code": 120, "ignoreStrings": true}],
-        "require-jsdoc": "off",
         "comma-dangle": ["error", "never"]
     }
 }

.gitignore

@@ -1,3 +1,3 @@
 .idea
-node_modules
-bundle.*
+node_modules/
+dist/

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "5"

API.md

@@ -0,0 +1,176 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+-   [MapboxCircle](#mapboxcircle)
+    -   [map](#map)
+    -   [map](#map-1)
+    -   [center](#center)
+    -   [center](#center-1)
+    -   [radius](#radius)
+    -   [radius](#radius-1)
+    -   [zoom](#zoom)
+    -   [constructor](#constructor)
+    -   [\_center](#_center)
+    -   [\_radius](#_radius)
+    -   [options](#options)
+    -   [\_map](#_map)
+    -   [\_zoom](#_zoom)
+    -   [\_circle](#_circle)
+    -   [\_handles](#_handles)
+    -   [getBounds](#getbounds)
+    -   [onZoomEnd](#onzoomend)
+    -   [onCenterHandleMouseDown](#oncenterhandlemousedown)
+    -   [onCenterHandleMouseMove](#oncenterhandlemousemove)
+    -   [onCenterHandleMouseUp](#oncenterhandlemouseup)
+    -   [onRadiusHandleMouseDown](#onradiushandlemousedown)
+    -   [onRadiusHandleMouseMove](#onradiushandlemousemove)
+    -   [onRadiusHandleMouseUp](#onradiushandlemouseup)
+    -   [onMouseMove](#onmousemove)
+    -   [addTo](#addto)
+
+## MapboxCircle
+
+A `google.maps.Circle` replacement for Mapbox GL JS, rendering a "spherical cap" on top of the world.
+
+**Parameters**
+
+-   `center`  
+-   `radius`  
+-   `options`  
+
+### map
+
+**Parameters**
+
+-   `map` **mapboxgl.Map** Target map.
+
+### map
+
+Returns **mapboxgl.Map** Mapbox map.
+
+### center
+
+**Parameters**
+
+-   `newCenter` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Center `[lng, lat]` coordinates.
+
+### center
+
+Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Center `[lng, lat]` coordinates.
+
+### radius
+
+**Parameters**
+
+-   `newRadius` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Meter radius.
+
+### radius
+
+Returns **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Circle radius.
+
+### zoom
+
+**Parameters**
+
+-   `newZoom` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** New zoom level.
+
+### constructor
+
+**Parameters**
+
+-   `center` **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Center `[lng, lat]` coordinates.
+-   `radius` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** Meter radius.
+-   `options` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** 
+    -   `options.strokeColor` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Stroke color. (optional, default `'#000000'`)
+    -   `options.fillColor` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** Fill color. (optional, default `'#FB6A4A'`)
+    -   `options.fillOpacity` **[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Fill opacity. (optional, default `0.5`)
+    -   `options.properties` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Property metadata for Mapbox GL JS circle object. (optional, default `{}`)
+    -   `options.statusEl` **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)??** HTML element for emitting debug info.
+
+### \_center
+
+### \_radius
+
+Type: [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
+
+### options
+
+Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
+
+### \_map
+
+Type: mapboxgl.Map
+
+### \_zoom
+
+Type: [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
+
+### \_circle
+
+Type: Polygon
+
+### \_handles
+
+Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;Point>
+
+### getBounds
+
+Get geodesic bounds for the circle.
+
+Returns **\[[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** 
+
+### onZoomEnd
+
+Adjust circle precision (steps used to draw the polygon).
+
+### onCenterHandleMouseDown
+
+Disable panning, set color of center handle, add onCenterHandleMouseMove (drag) listener and wait for mouse-up.
+
+### onCenterHandleMouseMove
+
+Mouse-move listener, emulating a drag listener in conjunction with onCenterHandleMouseDown/onCenterHandleMouseUp.
+
+**Parameters**
+
+-   `event` **MapMouseEvent** 
+
+### onCenterHandleMouseUp
+
+Restore center handle color, re-enable panning and remove onCenterHandleMouseMove (drag) listener.
+
+### onRadiusHandleMouseDown
+
+Disable panning, set color of radius handles, add mouse-move listener and wait for mouse-up (emulating drag).
+
+### onRadiusHandleMouseMove
+
+Mouse-move listener for the radius handles, emulating a drag event with
+onRadiusHandleMouseDown/onRadiusHandleMouseUp.
+
+**Parameters**
+
+-   `event` **MapMouseEvent** 
+
+### onRadiusHandleMouseUp
+
+Restore color of radius handles, re-enable panning and deactivate existing mouse-move listener.
+
+### onMouseMove
+
+Deactivate existing mouse-down listeners, check position and add new ones for map or handle as appropriate.
+
+**Parameters**
+
+-   `event` **MapMouseEvent** 
+
+### addTo
+
+Set map and initialize it with Mapbox GL layers for circle artifacts.
+
+**Parameters**
+
+-   `map` **mapboxgl.Map** 
+
+Returns **[MapboxCircle](#mapboxcircle)** 

Dockerfile

@@ -1,12 +1,12 @@
-# To build: docker build -t draw-circle .
-# To run:   docker run -d -p 9966:9966 draw-circle
+# To build: docker build -t mapbox-gl-circle .
+# To run:   docker run -i -p 9966:9966 mapbox-gl-circle
 # To test:  open http://localhost:9966
 
 FROM node:8-alpine
 
-WORKDIR /opt/draw-circle
+WORKDIR /opt/mapbox-gl-circle
 
-COPY package.json index.html index.js circle.js /opt/draw-circle/
+COPY package.json example/index.js lib/main.js /opt/mapbox-gl-circle/
 
 RUN npm install
 

README.md

@@ -1,10 +1,13 @@
-# Create a Native Circle in GL JS
+# Spherical-Cap "Native Circle" for Mapbox GL JS
 
-This demo uses turf.js to create a geojson circle class that works with GL JS to edit
-circle features.
+This project uses Turf.js to create a `google.maps.Circle` replacement, as a Mapbox GL JS compatible GeoJSON object.
+Allowing the developer to define a circle using center coordinates and radius (in meters). And, optionally, enabling
+interactive editing via draggable center/radius handles. Just like the Google original!
 
-The bulk of the code is in `circle.js`, the geojson circle class.  Interactivity with
-the circle object and map code is in `index.js`.
+
+## Usage
+
+See [API.md](https://github.com/mblomdahl/mapbox-gl-circle/blob/master/API.md).
 
 
 ## Development
@@ -31,6 +34,19 @@ the circle object and map code is in `index.js`.
 
 ## Changelog
 
+### v. 1.2.0
+
+* Removed dead code and unused methods
+* Restructured library, moving ``circle.js -> lib/main.js`` and ``index.js -> example/index.js``
+* Refactored helper functions from ``example/index.js`` into *MapboxCircle* class, obsoleted *index.html* with
+  DOM updates in *example/index.js*
+* Refactor into *MapboxCircle* into new-style ES6 class
+* Made *MapboxCircle.animate()* and a bunch of properties private, added overridable defaults for fillColor/fillOpacity
+* Updated ESLint config to respect browser/commonjs built-ins and added docs to *MapboxCircle* in order to
+  align with ESLint JSDoc requirements
+* Updated project details in package.json and committed first-draft API documentation
+
+
 ### v. 1.1.0
 
 Updated circle from Mapbox [bl.ocks.org sample](https://bl.ocks.org/ryanbaumann/d286190943d6b4eb70e65a9f76eab5a5/d3cd7cea5feed0dfddbf3705b7936ff560f668d1).