CODEWITHSUNDEEP
reactjsmapboxmapbox-marker
Susitha Ravinda Senarath
Susitha Ravinda Senarath

Reputation: 1678

React mapbox layer with icon not appearing

I have a mapbox set up in a react app and it use icons(markers) to render some layers. Recently I changed a css paint layer to a icon and added relevant Image to the map instance. Issue is newly added icon works fine locally but does not work when deployed to the server. Also I see a warning on the console as follows.

enter image description here

I added logs for Image instances and working markers seems like logged as data:image but the one that is not working has a src.

enter image description here

I have no clue with this works fine locally and not working when deployed. What can be the problem here.

layers related to the issue.

return [
{
  id: `selected-${name}`,
  type: 'symbol',
  source: name,
  layout: {
    'icon-image': selectedMarker || 'hollow-marker',
    'icon-size': 1.1,
    'icon-allow-overlap': true,
  },
  filter: ['match', ['get', 'isSelected'], 'true', true, false],
  paint: {
    'icon-color': borderColour,
    'text-color': borderColour,
  },
  maxzoom: 24,
  minzoom: 0,
  weight: weight + 1,
},
{
  id: name,
  type: 'symbol',
  source: name,
  layout: {
    'icon-image': marker || 'hollow-marker',
    'icon-size': 1.1,
    'icon-allow-overlap': true,
  },
  paint: {
    'icon-color': borderColour,
    'text-color': borderColour,
  },
  maxzoom: 24,
  minzoom: 0,
  weight,
},

];

Adding images to the map instance

const wellIcon = new Image(30, 30);
  const { default: wellImage } = await import('images/search/well.png');
  wellIcon.src = wellImage;

  const documentIcon = new Image(15, 15);
  const { default: documentImage } = await import(
    'images/search/document.png'
  );
  documentIcon.src = documentImage;
  const selectedDocumentIcon = new Image(30, 30);
  const { default: selectedDocumentImage } = await import(
    'images/search/selected-document.png'
  );
  selectedDocumentIcon.src = selectedDocumentImage;

  mapInstance.on('load', () => {
    innerSetMap(mapInstance);
    setMapReference(mapInstance);

    mapInstance.addImage(WELL_MARKER, wellIcon);
    mapInstance.addImage(DOCUMENT_MARKER, documentIcon);
    mapInstance.addImage(SELECTED_DOCUMENT_MARKER, selectedDocumentIcon);

    mapInstance.addControl(new Minimap(), 'bottom-left');
    mapInstance.addControl(drawMap, 'top-right');
    innerSetDraw(drawMap);

    mapInstance.resize();
  });

Upvotes: 0

Views: 1286

Answers (1)

Susitha Ravinda Senarath
Susitha Ravinda Senarath

Reputation: 1678

as per the log suggest last image has not been added due to a CORS issue. That is why last image logged as a source link but not a base64 image. Mapbox need a pre loaded image so last one will cause a error and even rendering of other layers can get disturbed.

Upvotes: 1

Related Questions