Add Map Images

back to Map.vue

Images sources should already have been established following keep image sources as computed props so that the publicPath can used, for pushing the app to different environments

To be able to use each image on the map, you have to call both:

• await map.loadImage()

• map.addImage()

  const cameraImage = await map.loadImage(cameraSrc.value) map.addImage('camera-icon', cameraImage.data);

After that, you can use the image with a Map Source:

cyclomediaCamera: {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [],
    }
  }
},

You put the image id (in this example, 'camera-icon') in a Map Layer:

{
  id: 'cyclomediaCamera',
  source: 'cyclomediaCamera',
  type: 'symbol',
  layout: {
    'icon-image': 'camera-icon',
    'icon-anchor' : 'center',
    'icon-size': 0.09,
    'icon-rotate': 0,
    'icon-rotation-alignment': 'map',
    "icon-allow-overlap" : true,
    "text-allow-overlap": true,
  },
},