polygon tool click event draws immediately

[asarno]

mapbox-gl-js version: v1.1.1 mapbox-gl-draw version: v1.1.2

Steps to Trigger Behavior

I've built custom buttons that call this.drawTool.changeMode('insert_mode_here').

My local instance behaves as expected and I don't have any issues when drawing a polygon. However my production environment has stickiness. I think what's happening is the click event to initiate the drawing of the polygon starts spamming as soon as I this.drawTool.changeMode('draw_polygon').

Below are to video examples of what I'm referring to:

Dev Behavior

Prod Behavior

Here is my code that sets up the map (the below is appended to a div via ref). As you can see, nothing fancy.

import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";

this.map = new mapboxgl.Map({
    container: this.mapContainer,
    style: "mapbox://styles/mapbox/streets-v11",
    center: [lng, lat],
    zoom,
});

this.drawTool = new MapboxDraw({
    displayControlsDefault: false,
});

// add controls
this.map.addControl(
    new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true,
        },
        trackUserLocation: true,
    })
);

this.map.addControl(new mapboxgl.NavigationControl());
this.map.addControl(this.drawTool, "top-left");

Any ideas? I thought it could be a permissions issue with my api key? Perhaps I need to whitelist my prod domain? I tried this, but no luck :(

[DeWitteArne]

I have exactly the same issue. Unfortunately, I still haven't found a solution.

[shobishani]

Are you using it with webpack? @asarno @dewittearne I resolved my problem though I'm not sure what exactly was causing the problem. it was because of my webpack configuration that I completely replaced. Luckily I was using ReactJs so I extracted the webpack.config.js from create-react-app and configured my project with that now it's working perfect in both dev and production/build. If you need I can share the configuration file old and new.

[DeWitteArne]

@shobishani Yes I am using webpack. I am using VueJs so I guess the problem will be similar to the problem in ReactJs so yes maybe you can share the config file old and new. Thanks !

[ToDentru]

Hy guys, i have the same problem relate by @DeWitteArne, any updates here??? I use webpack...but when deploy the solution, have the behavior stranger. Thanks !

[shobishani]

Old webpack configurations that cause this prob I didn't debugged which plugin cause this but here are my old webpack configs. webpack.common.config.js https://gist.github.com/shobishani/f2aee0b2f99ec6bf02d4a5143c3507ab webpack.prod.config.js https://gist.github.com/shobishani/f12966617b5a1a3b2f352208850cdfd7

and I've resolved this issue by using react-scripts https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config

let me know if you still need something else. @ToDentru

[ToDentru]

Yes, yes, you are correct. I compared your settings and made some adjustments to my files. Now everything works fine. Follow the url repository if anyone else needs help. Thank you for your attention. https://github.com/ToDentru/webpack-mapbox-gl.git

[Nivani]

We found that this issue was caused by the uglifyjs-webpack-plugin.

Forcing webpack to import the minified file provided by the @mapbox/mapbox-gl-draw package instead of letting webpack build and minify the library itself fixed the problem for us.

This is what we changed in the Webpack config:

{
  resolve: {
    alias: {
      // makes sure Webpack imports the minified file instead of @mapbox/mapbox-gl-draw/index.js
      "@mapbox/mapbox-gl-draw$": "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js",
    },
  module: {
    noParse: [
      // prevents Webpack from transforming the imported mapbox-gl-draw.js file
      /(mapbox-gl-draw)\.js$/
    ],
  },
}

In your code:

// will now cause the minified file to be imported
import MapboxDraw from '@mapbox/mapbox-gl-draw';

[Nivani]

If you can find which specific minification option causes it to break, you can also update the options of the UglifyJsPlugin in your webpack config:

//...
new UglifyJsPlugin({
  uglifyOptions: {
    // configure here, see https://github.com/mishoo/UglifyJS2#minify-options
  },
}),
//...

For example, this also fixed the problem for us, but that is not what you want because it disables minification:

//...
new UglifyJsPlugin({
  uglifyOptions: {
    compress: false,
  },
}),
//...

[kkaefer]

This looks like it's a problem with ugifyjs/webpack, rather than with the code in this repository.