Mapbox GL Draw

To create a custom mode, define an object containing lifecycle functions.

1. toDisplayFeatures (Required): This is the only mandatory function. It decides which features from the data store are rendered on the map. It receives the current geojson and a display callback function. You must call display(geojson) (or pass modified versions) to ensure features appear on the map.
2. onSetup: Triggered when transitioning into the mode. It receives opts (passed via draw.changeMode('mode', opts)) and should return a state object. This state object is then passed as the first argument to all other lifecycle functions.
3. Interaction Handlers: Implement functions like onClick, onDrag, onMouseMove, onKeyDown, etc., to respond to user input. Within these, you can use this.newFeature(geojson) to create a DrawFeature and this.addFeature(feature) to add it to the map.
4. Mode Switching: Use this.changeMode('mode_name') within a lifecycle function to transition to a different mode (e.g., returning to simple_select).

var LotsOfPointsMode = {};

// 1. Setup state
LotsOfPointsMode.onSetup = function(opts) {
  var state = {};
  state.count = opts.count || 0;
  return state;
};

// 2. Handle interactions
LotsOfPointsMode.onClick = function(state, e) {
  var point = this.newFeature({
    type: 'Feature',
    properties: { count: state.count },
    geometry: { type: 'Point', coordinates: [e.lngLat.lng, e.lngLat.lat] }
  });
  this.addFeature(point);
};

LotsOfPointsMode.onKeyUp = function(state, e) {
  if (e.keyCode === 27) return this.changeMode('simple_select');
};

// 3. Required: Define how to render
LotsOfPointsMode.toDisplayFeatures = function(state, geojson, display) {
  display(geojson);
};

// 4. Register the mode
var draw = new MapboxDraw({
  defaultMode: 'lots_of_points',
  modes: Object.assign({
    lots_of_points: LotsOfPointsMode,
  }, MapboxDraw.modes),
});

Draw uses a Mapbox GL Style. When creating custom styles for Draw, follow these rules:

1. Do NOT provide a source: Draw manages its own sources (mapbox-gl-draw-hot and mapbox-gl-draw-cold) to optimize performance. It will provide a source for you automatically.
2. You MUST provide an id: Draw will append .hot and .cold suffixes to your provided ID.

Available Feature Properties for Styling:

If opts.userProperties is set to true, user properties are available via the user_ prefix.

When instantiating MapboxDraw, you can pass an optional configuration object. All options are optional:

• keybindings (boolean, default: true): Enable/disable keyboard interactions.
• touchEnabled (boolean, default: true): Enable/disable touch interactions.
• boxSelect (boolean, default: true): Enable/disable box selection via shift+click+drag.
• clickBuffer (number, default: 2): Pixel radius around features/vertices for click response.
• touchBuffer (number, default: 25): Pixel radius around features/vertices for touch response.
• controls (Object): Toggle individual controls: point, line_string, polygon, trash, combine_features, and uncombine_features.
• displayControlsDefault (boolean, default: true): The default state for the controls object.
• styles (Array<Object>): Custom map styles for Draw features.
• modes (Object): Override default modes with custom ones.
• defaultMode (string, default: 'simple_select'): The initial mode the user enters.
• userProperties (boolean, default: false): If true, feature properties are prefixed with user_ for styling (e.g., ['==', 'user_custom_label', 'Example']).
• suppressAPIEvents (boolean, default: true): If false, Draw will emit events when API methods are called.