smithmicro/mapbox-gl-circle

A *google.maps.Circle* replacement for Mapbox GL JS

mapbox-gl-circle's Issues

Tag builds with version number

When the Jenkinsfile produces an artifact, the name should include current version number from package.json

Poor performance on interactive circle radius edits in Firefox

When interacting with the circle in Firefox, performance is rather sluggish.

Is it possible to remove a MapboxCircle via JS?

I want to show/hide the circles, maybe using a classname or ID.
Is this possible? (Sorry for opening an issue, I didn't see any other resources available).

Thanks-

optionalDependencies?

Is there a need to have optionalDependencies? Our installation procedure always tries to install them regardless of no-optional flag in npm, but I was wondering is there any particular reason you ship package.json with that property? Could it be removed or transferred to devDependencies since it’s mostly build stuff like Yarn?

Cancel drag op on blur

Sometimes the drag operation does not end in a "mouseup", e.g. when drag ends outside the document or cmd-shifting to another application during drag. Circle logic should handle this as a dragend.

Add `click` and `contextmenu` events

• When clicking on a circle, it should fire a click event with target circle as first callback argument.
• When right-clicking on a circle, it should fire a contextmenu event with target circle as first callback argument.
• When doing the funky ctrl + left-click combo that some old Mac users might use as means of right-clicking, it should also fire a contextmenu event (and suppress the "normal" click)

What's a good way to show the radius of a circle

What's a good way to show the radius of a circle

Very slow when using Internet Expolorer

I don't like using IE either, but I need to support it.
Using the demo in IE (https://smithmicro.github.io/mapbox-gl-circle/) is very slow

Is this repo maintained?

Hi @mblomdahl

I was wondering if this repo is still maintained. Can see some some critical open PR s still not merged.

Thanks

Getting weird lines within circle at various zoom levels

I get some strange lines that span the circle at various points that shift based on zoom level. However, they seem to disappear above zoom level 16 or there abouts.

const areaCircle = new MapboxCircle({ lat: 42.2446, lng: -70.9623 }, 804, { strokeColor: '#ffffff', strokeWeight: 5, fillOpacity: 0, }).addTo(map);

Conflict with other map elements

Hey guys,

I've noticed that there is an issue while moving with circle while there are also some other elements placed on the map, like markers. When you move across these elements it will stop dragging the circle, I've prepared codepen example so you can check it out. I think that issue exists there from version 1.4.0, I'm using version 1.3.0 for now as it's working fine there.

Example

GL circle looks nothing like the google.maps.Circle

(Google Maps version on left pane.)

Passing `editable: false` to circle has no effect

When creating a circle with option editable: false, the setting is ignored. Correct behavior would be to draw a circle without the handles and event listeners.

Mismatch with Google Circle behavior when editing radius

When hovering over a radius handle, before dragging:

• mapbox-gl-circle: all handles are highlighted
• google.maps.Circle: only the radius handle under mouse cursor is highlighted

When dragging a handle to adjust radius:

• mapbox-gl-circle
  1. all radius handles moves
  2. extra circle stroke follows radius handles
• google.maps.Circle:
  1. only the handle that user interact with moves
  2. extra circle stroke follows radius handle

react build issue

hey guys,
we are using your library in 1 project,
however we faced an issue when trying to deploy to production,
in create-react-app project we are not able to build it,
it's saying it's app.js line 43, but I cannot figure out what's wrong there,
would be great if you can fix it,
thanks,
Greg

Circles appear behind other layers

Hi, I started implementing mapbox-gl-circle into a program that has several other layers on the map and noticed that the circle always appeared behind one of my other layers, regardless of what order they were added in.

I tracked it down to these lines in the code where waterway-label is hardcoded as the second argument to addLayer causing the circle to always be added just before this layer.

You can see the issue in action here:

It's pretty straightforward to expose the before argument to the user so that users can control where a circle is added in the layer stack. I implemented a fix as you can see in this image.

Here's my pull request for the proposed fix https://github.com/mblomdahl/mapbox-gl-circle/pull/51

Thanks!

Improve example usage docs

Add usage instructions when not relying on require(...) (standalone script load) + test that it actually works as NPM dependency for third-party libraries.

Tag builds with branch name and build number

When the Jenkinsfile produces an artifact, the name should include current git branch and build number.

Replace Jenkins CI/CD with GitHub Actions CI/CD

Initially brought up during review of PR #86, the current CI/CD via Jenkins is broken and needs a replacement to continue structured and robust maintenance of this repository.

Draft acceptance criterion:

• Document how to add the necessary NPM credentials to the repo, replacing the current NPM_TOKEN = credentials('mblomdahl_npm') secret in Jenkinsfile L#131
• Evaluate and propose alternative to the current code for generating unique build identifiers, Jenkinsfile L#11-L#67
• Building from the release/x.y.z branch should push a release candidate to NPM
• Building from the master branch should push a release to NPM

Ping @gleite-smsi FYI!

Check if lodash.debounce mitigates performance issues

Evaluate impact of using Ryan Baumann's debounce tip from mapbox/smithmicro-collab#1, map.on('mousemove', _.debounce(onMousemove, 12, {trailing: true, leading: true})).

Style switcher no longer working with GL JS 0.44.1

When attempting to update GL JS version from 0.40.1 to 0.44.1, we found that the style-layer switching no longer works.

How it was (successfully) handled in the latest mapbox-gl-circle version:

1. a circle listens to styledataloading upon being added to a map
2. when switching style layer, the circle would remove itself from the map and wait for styledata firing
3. on styledata firing, the circle would add itself back to the map

Was working really well.

Here's the code that does it:

class MapboxCircle {

    /* snip */

    /**
     * When map style is changed, remove circle assets from map and add it back on next MapboxGL 'styledata' event.
     * @param {MapDataEvent} event
     * @private
     */
    _onMapStyleDataLoading(event) {
        if (this.map) {
            this.map.once('styledata', () => {
                // noinspection JSUnresolvedVariable
                this.addTo(event.target);
            });
            this.remove();
        }
    }

    /* snip */

    addTo(map, before) {
        const addCircleAssetsOnMap = () => {
            /* snip */
            map.on('styledataloading', this._onMapStyleDataLoading);
            /* snip */
    }

    /* snip */

    /**
     * Remove source data, layers and listeners from map.
     * @return {MapboxCircle}
     * @public
     */
    remove() {
        this.map.off('styledataloading', this._onMapStyleDataLoading);

        this.observer.disconnect();

        if (this.options.editable) {
            this._unbindBroadcastListeners();
            MapboxCircle._removeActiveEditableCircle(this);

            this.off('radiuschanged', this._onRadiusChanged).off('centerchanged', this._onCenterChanged);

            this._unbindRadiusHandlesListeners();
            this.map.removeLayer(this._circleRadiusHandlesId);

            this._unbindCenterHandleListeners();
            this.map.removeLayer(this._circleCenterHandleId);

            this.map.removeSource(this._circleRadiusHandlesSourceId);
            this.map.removeSource(this._circleCenterHandleSourceId);
        }

        this.map.off('zoomend', this._onZoomEnd);
        this._unbindCircleFillListeners();
        this.map.removeLayer(this._circleFillId);
        this.map.removeLayer(this._circleStrokeId);

        this.map.removeSource(this._circleSourceId);

        this.map = null;

        return this;
    }

    /* snip */

}

What happens with the latest version is that remove() call fails because, apparently, the circle assets already does not exist.

Question: @ryanbaumann is there some earlier event we should listen to in order to detect-and-handle a style layer change?

Cannot minify repo during Webpack build

Import repo:
import MapboxCircle from 'mapbox-gl-circle';

Summary:
Run Webpack to build the codebase with Webpack's UglifyJsPlugin on. Webpack is attempting to minify all the files in the codebase, but cannot handle ES6 code, resulting in an error.

Error:
ERROR in <file>.js from UglifyJs Unexpected token: name (MapboxCircle)

Workaround:
import MapboxCircle from 'mapbox-gl-circle/dist/mapbox-gl-circle.min.js'

Importing the minified file seems to be an acceptable workaround for the time being.

Solution:
I don't believe this is limited to Webpack. I'm guessing any minification would result in this error. ES6 code could still cause errors in older browsers as well if not transpiled to ES5. It would be nice if the main file for importing was transpiled to ES5 so that it could be imported as mapbox-gl-circle; building and minifying would work well and unbuilt/unminified code could be assumed to work in older browsers.

Publish normal release builds to NPM registry

When building a normal release, the build should be automatically published to NPM after "Build Artifacts" stage steps have completed successfully, tagged as @latest.

Depends upon:

• #6 Pre-release publishing to NPM
• #7 Normal release identifier

Format build identifier as SemVer version-only tag for releases

When the current branch is master, the build identifier should be set based on version from the commit tag as per SemVer release spec: http://semver.org/#spec-item-2

E.g. "1.2.2" after a Gitflow Workflow release-merge from release/1.2.2 branch

Depends upon:

• #3 Version Number
• #4 Branch and Build Number
• #5 Build metadata
• #6 Pre-release

First handle interaction always fail

When attempting to drag a center or radius handle, it consistently pans the map instead of triggering the intended handle. Once this has failed once, both center and radius handles work as intended.

Doesn't work on mobile device

Hi,

When adding the circle library to my mapbox app, it works fine on the desktop but I can't seem to interact with the circle at all on a mobile device.

Is there any way to get this working?

Thanks in advance

Fire centerChanged/radiusChanged events when the circle has been modified

Should behave like google.maps.Circle (obviously).

Emit a 'radiuschanging' event

For a more advanced styling I'd need to keep track of a circle whose radius is being dragged.
Currently we only have 'radiuschanged' which is emitted once the drag has ended. So a 'radiuschanging' could come in handy.

To be consistent, a 'centerchanging' could also be added.

What do you think? would you accept a PR with this feature?

Unable to resize and drag circle

I am using react-map-gl + mapbox-gl-circle. I displayed a circle but I cannot resize it and drag it.

But if I use mapbox-gl + mapbox-gl-circle = all is good.

import React from "react";
import MapboxCircle from "mapbox-gl-circle";
import MapGL from "react-map-gl";

const MAPBOX_ACCESS_TOKEN =
  "pk.eyJ1IjoiYWxlcGhyaSIsImEiOiJjamdwbHpycjIyZm45Mndud3AzamRibHpqIn0.ejAHwSGT6dcGxiDOrPCFLg";

export default function App() {
  const [viewport, setViewport] = React.useState({
    latitude: 6,
    longitude: 22,
    zoom: 12,
    bearing: 0,
    pitch: 0
  });

  const [mapRef, setMapRef] = React.useState(null);

  const myCircle = new MapboxCircle({ lat: 6, lng: 22 }, 2200, {
    editable: true,
    minRadius: 120,
    fillColor: "#29AB87"
  });

  if (mapRef !== null) {
    myCircle.addTo(mapRef.getMap());

    myCircle.on("centerchanged", function(circleObj) {
      console.log("New center:", circleObj.getCenter());
    });
    myCircle.once("radiuschanged", function(circleObj) {
      console.log("New radius (once!):", circleObj.getRadius());
    });
    myCircle.on("click", function(mapMouseEvent) {
      console.log("Click:", mapMouseEvent.point);
    });
    myCircle.on("contextmenu", function(mapMouseEvent) {
      console.log("Right-click:", mapMouseEvent.lngLat);
    });
  }

  return (
      <MapGL
        ref={e => setMapRef(e)}
        width="100%"
        height="100vh"
        mapStyle="mapbox://styles/mapbox/light-v9"
        mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
        latitude={viewport.latitude}
        longitude={viewport.longitude}
        zoom={viewport.zoom}
        bearing={viewport.bearing}
        pitch={viewport.pitch}
        onViewportChange={viewport => setViewport(viewport)}
      />
  );
}

Codesandbox react-map-gl example:
https://codesandbox.io/s/competent-feather-geo7c

Codesandbox mapbox-gl example:
https://codesandbox.io/s/react-and-mapbox-gl-2tnnx

Result is oval

i use it in EPSG:4326 or EPSG:3857. The result is an oval.

Verify standalone dist is compatible with SafePath Web

Must be importable as a drop-in replacement for Leaflet/Mapbox.js L.EditableCircle.

Any plans for React bindings?

Rotate circle and create half/quarter of the circle

Hi I am using mapbox-gl-circle library to create circle on mapbox-gl map in my Angular application providing center of the circle and radius in metres.

Two simple questions:

1. Can I create half or quarter the circle (something looking like pizza slice) with center coordinates of the circle. So I need exactly the same functionality like creating circle with center coordinates just I don't want full circle, rather than this it would be awesome if I can create half or quarter of the circle?
2. Can I somehow rotate circle after it is created?

Best regards.

Format build identifier as per SemVer pre-release spec when on release branch

When the current branch is of type release/, the build identifier should be set according to SemVer pre-release spec: http://semver.org/#spec-item-9

Format: "<upcoming_version>-rc.<build_number>"

E.g. "1.2.2-rc.3" for build number 3 on release/1.2.2 branch

Depends upon:

• #3 Version Number
• #4 Branch and Build Number
• #5 Build metadata

Circles does not survive change of map style

Before and after map.setStyle:

Some advice to implement it with vue-mapbox-gl ?

Warnings in Docker build

Running Docker build:

docker build -t circle .

produces warnings on Step 4/8:

...
Step 4/8 : RUN npm install && mkdir -p example/ lib/
 ---> Running in 88bdb9b71fdb
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN deprecated [email protected]: It is recommended to install Yarn using the native installation method for your environment. See https://yarnpkg.com/en/docs/install
npm WARN deprecated [email protected]: This package has been moved to @mapbox/mapbox-gl-supported
npm WARN deprecated [email protected]: This module is now under the @mapbox namespace: install @mapbox/geojson-area instead
npm WARN lifecycle [email protected]~prepare: cannot run in wd %s %s (wd=%s) [email protected] mkdir -p dist && browserify --standalone MapboxCircle -t [ babelify --presets [ es2015 ] ] lib/main.js | uglifyjs -c -m > dist/mapbox-gl-circle-${BUILD_VERSION:-dev}.min.js && cp -f dist/mapbox-gl-circle-${BUILD_VERSION:-dev}.min.js dist/mapbox-gl-circle.min.js /opt/mapbox-gl-circle
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
...

We should get these cleaned up to produce a clean Docker image.

Prevent overlapping mouse down events

Currently, when the circle is small enough, radius and center edit handlers will overlap.
Dragging one of those handlers will trigger both events _onCenterHandleMouseDown and _onRadiusHandlesMouseDown which provoke weird behaviours after mouseup/mouseout: the circle sticks to the cursor and you have to refresh the page to reset it:

v1.6.5

I would expect only one of the events to be triggered: the one corresponding to the cursor style.

• move -> center handler mouse down event
• ns-resize , ew-resize -> radius handler mouse down event

bugfix/overlapping-events

Pull request: #79

Format build identifier as per SemVer build metadata spec when on develop/bugfix/feature branches

When the current branch is of Gitflow Workflow type feature/, bugfix/, or develop, the build identifier should be set to according to SemVer build metadata spec: http://semver.org/#spec-item-10

Depends upon:

• #3 Version Number
• #4 Branch and Build Number

Users are wondering if the repo is maintained or not

🐛 Describe the bug

There are a bunch of issues #100, #92, #91, #90, #89, #87, #83, #76, #72, #61, #60, #56, #49, and #25 they are left unanswered for years. Now @AbhishekD15 is wondering in #101, is it maintained or should it be marked as archived?

⚠️ Current behavior

Someone files a bug or a feature request, and maintainers do not reply for multiple years.

✅ Expected behavior

I would expect maintainers to read their notifications and react in some way when filing a issue in their open source project.

💣 Steps to reproduce

N/A

📷 Screenshots

📱 Tech info

N/A

ew-resize icon used on north-south handles

ew-resize should only be used for handles on the sides, on top/bottom the vertical ns-resize arrow should be used.

Make edits cancellable by centerChanged/radiusChanged event listeners

When "illegally" edits are made, the application should be able to cancel the operation and restore the circle to its previous state.

Unable to drag and resize sometimes

🐛 Describe the bug

Dragging and resizing doesnt work after zooming in to a certain level

⚠️ Current behavior

✅ Expected behavior

It should allow to drag and resize at any zoom level

💣 Steps to reproduce

1. add the circle to map
2. slowly zoom in one step at a time and keep hovering on sides
3. at some point the resize arrow will become normal hand arrow
4. then resizing doesnt work

📷 Screenshots

📱 Tech info

• Device: Chrome Browser
• OS: Linux
• Library/App version: 1.6.7

Expose minRadius

minRadius and maxRadius are hardcoded in v. 1.4.2; lines 161-162.

It would be better to expose these as constructor options, alongside fillColor, strokeOpacity and friends.

Publish pre-release builds to NPM registry

When the current branch is of type release/, the build should be automatically published to NPM after "Build Artifacts" stage steps have completed successfully, tagged as @next.

Depends upon:

• #6 Pre-release identifier

Need dynamic options

Its good if support dynamic options like fillcolor / editable will change dynamically.
#feature_request

Resize and drag circle is not working in IE11 browser

I tried the resize and drag functionality of circle but these is not working as expected. Is there any possible to give support on IE11 browser ?

Mismatch with Google Circle behavior when moving center

When dragging circle center:

• mapbox-gl-circle
  1. center handle moves
  2. radius handles move
  3. circle stroke moves
• google.maps.Circle:
  1. center handle moves
  2. radius handles stay in place
  3. circle stroke moves

Angular CLI production build issue

Hey we built a map using mapbox-gl-circle. Works fine on local but when uglifies/minifies for production, the map that uses mapbox-gl-circle eats up CPU and browsers freezes

After creating a circle, there's no way of removing it from the map

When calling .remove() on a circle instance, it should remove its map sources, layers and event listeners.