Can I add image?

[jack-solutions]

Will I be able to add Image on vertices/start or end Points instead of point while drawing Polygon/Line/Point ? If Yes the How? or If No then why?

[mcwhittemore]

@jack-solutions,

You can use custom styling with Draw to style points how you wish. I hope that solves your problem.

[jack-solutions]

@mcwhittemore Is it possible for me to plot image at specific position instead of circle by making some changes in the style??? as shown in This Demo

[mcwhittemore]

@jack-solutions,

I'm not well versed in styling. Please refer to the style spec for questions on how to do different kinds of styling. You can also use Mapbox Studio to play with what is possible.

https://www.mapbox.com/mapbox-gl-js/style-spec/

Regards, Matthew

[marksmall]

Sorry but I don't feel the responses here have answered the question Can I add an image and if so, how. I've not been able to find any issues, examples, blogs on how to add an image, it would be great if the docs could contain some more explanations, I find myself more likely referring to the code than the docs, but that doesn't always help my understanding.

I have tried implementing this myself but have failed. I added a new style

  {
    id: 'gl-draw-image',
    type: 'raster',
    filter: ['all', ['==', '$type', 'Point'], ['==', 'mode', 'ImageMode']],
    paint: {
      'raster-opacity': 0.5
    }
  }

and mode:

import MapboxDraw from '@mapbox/mapbox-gl-draw';
import Constants from '@mapbox/mapbox-gl-draw/src/constants';

const ImageMode = { ...MapboxDraw.modes.draw_point };

ImageMode.onSetup = function(opts) {
  const props = MapboxDraw.modes.draw_point.onSetup.call(this, opts);
  props.point.properties = {
    ...props.point.properties,
    ...opts
  };

  return {
    ...props
  };
};

ImageMode.onClick = ImageMode.onTap = function(state, event) {
  const {
    lngLat: { lng, lat }
  } = event;

  this.updateUIClasses({ mouse: Constants.cursors.MOVE });
  state.point.updateCoordinate('', lng, lat);
};

ImageMode.toDisplayFeatures = function(state, geojson, display) {
  console.log('DISPLAY: ', state, geojson);
  const isActivePoint = geojson.properties.id === state.point.id;
  geojson.properties.active = isActivePoint ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
  if (!isActivePoint) return display(geojson);

  return display(geojson);
};

export default ImageMode;

I overrode the draw_point mode, so I can add user properties to the feature, but I nothing happens. The idea is:

1. User enters URL to image
2. User clicks add image button
3. Draw enters ImageMode
4. Draw renders Point feature, I tried a raster feature, but got told only Point, Polygon and LineString are permitted.

Expected Outcome: I expected to see the image being loaded and then displayed on the screen at the coordinates clicked. I accept my code is wrong, but getting no feedback isn't making it easy to understand where the problem lies.

Any help, thoughts etc would be appreciated, if it is better to create a new issue for this, then I'm fine with that, just let me know.