mapbox-gl-export icon indicating copy to clipboard operation
mapbox-gl-export copied to clipboard

Not export images icons on map

Open mahmoudadel54 opened this issue 2 years ago • 3 comments

I tried to print (export map as pdf) and my map has some images icons like this : image

if you check this images, you will see a vector (polygon) feature + 2 image, one in SVG format and the other one in PNG format when I printed it, it just shows the vector without the 2 images

Hope to get a solution for that

mahmoudadel54 avatar Nov 28 '21 12:11 mahmoudadel54

@mahmoudadel54 Did you add icons after loading style.json? This plugin will create an image style.json which you have loaded. So it will not be able to export other layers not from style.json such as FeatureState.

If possible, it might be better to provide us your source code. So we can know what is the reason.

JinIgarashi avatar Nov 28 '21 14:11 JinIgarashi

this is the piece of code that I added icons on it:

`// map loading map.on("load", () => { // Add a data source containing GeoJSON data. map.addSource("maine", { type: "geojson", data: { type: "Feature", geometry: { type: "Polygon", // These coordinates outline Maine. coordinates: [ [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573, 43.09008], [-70.75102, 43.08003], [-70.79761, 43.21973], [-70.98176, 43.36789], [-70.94416, 43.46633], [-71.08482, 45.30524], [-70.66002, 45.46022], [-70.30495, 45.91479], [-70.00014, 46.69317], [-69.23708, 47.44777], [-68.90478, 47.18479], [-68.2343, 47.35462], [-67.79035, 47.06624], [-67.79141, 45.70258], [-67.13734, 45.13745], ], ], }, }, });

  // Add a new layer to visualize the polygon.
  map.addLayer({
    id: "maine",
    type: "fill",
    source: "maine", // reference the data source
    layout: {},
    paint: {
      "fill-color": "#0080ff", // blue color fill
      "fill-opacity": 0.5,
    },
  });
  // Add a black outline around the polygon.
  map.addLayer({
    id: "outline",
    type: "line",
    source: "maine",
    layout: {},
    paint: {
      "line-color": "#000",
      "line-width": 3,
    },
  });

  //add image
  // Load an image from an external URL.
  map.loadImage(
    "https://docs.mapbox.com/mapbox-gl-js/assets/cat.png",
    (error, image) => {
      if (error) throw error;

      // Add the image to the map style.
      map.addImage("cat", image);

      // Add a data source containing one point feature.
      map.addSource("point", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [-77.4144, 25.0759],
              },
            },
          ],
        },
      });

      // Add a layer to use the image to represent the data.
      map.addLayer({
        id: "points",
        type: "symbol",
        source: "point", // reference the data source
        layout: {
          "icon-image": "cat", // reference the image
          "icon-size": 0.25,
        },
      });
    }
  );
  map.addImage("pulsing-dot", pulsingDot, { pixelRatio: 2 });

  map.addSource("dot-point", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [0, 0], // icon position [lng, lat]
          },
        },
      ],
    },
  });
  map.addLayer({
    id: "layer-with-pulsing-dot",
    type: "symbol",
    source: "dot-point",
    layout: {
      "icon-image": "pulsing-dot",
    },
  });
});

`

mahmoudadel54 avatar Nov 28 '21 17:11 mahmoudadel54

@mahmoudadel54 You are using additional GeoJSON source and icons apart from style.json. Currently, this plugin does not consider any layers and icons which are not defined in style.json. This issue is also related to https://github.com/watergis/mapbox-gl-export/issues/2 's feature state problem. But welcome to pull request anytime to add this feature to this plugin.

JinIgarashi avatar Nov 28 '21 19:11 JinIgarashi