nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PictureMarkerSymbol default width and height

YohanBienvenue

Hi,

I'm wondering how to create a PictureMarkerSymbol by using the default width and height of the image.

Even in the documentation it says the default values are the actual dimensions of the image, but at the same time the width and height are required values to enter.
https://developers.arcgis.com/javascript/jsapi/picturemarkersymbol-amd.html

I tried entering null or empty string but that just generates undefined javascript errors for width and height

Can't the API can read those values from the image source itself?

I really would prefer not having to enter a specific size myself since the image sources dimensions can vary quite a bit from symbol to symbol (by 1 to 5 pixels for width and/or height) and I don't want them to be distorted. On top of that the image sources might change from time to time.

Btw I currently generate images PNG sources by doing batch exporting in Inkscape with a single SVG that contains all the symbols. The exporter does not allow to specify a constant size (e.g. 20px x 20px) for the resulting images, it takes the size of the object itself. Thus my question here.

Thanks

Find more posts tagged with

Accepted answers

YohanBienvenue

Ok thanks for this

It's alright I actually found an alternative in the last few minutes.

I found another export plugin for Inkscape that works a bit differently then the one I was using. Instead of exporting the selected symbols in the image sprite to individual files, it exports all the layers as separate images, using the layer size as the image size.

So I gave my SVG a dimension of 20x20 and put all the symbols on seperate layers. This results in 20x20 images with the symbol centerd into it. So now I can have PictureMarkerSymbol with fixed 20x20 size even though my sources size can vary.

The Inkscape plugin, called ILBAEv0.1, can be found here:
http://www.inkscapeforum.com/viewtopic.php?f=34&t=15847

Cheers

All comments

JonathanUihlein

That sounds much easier than my solution. I'm glad you found something better 🙂

If you're satisfied, make sure you mark this thread as answered.

YohanBienvenue

JonathanUihlein

Unfortunately, the documentation is a bit misleading in this case.

There is no explicitly set default width and height for PictureMarkerSymbols.
The values *should be* the actual width and height of the image being used.
I will bring this up with the documentation folks.

In the meantime, it would be best if your symbols all used the same dimensions.

If you absolutely cannot figure any other solution, you can use javascript to calculate the dimensions of the image after it is loaded into memory.

map.on("click", function(evt){
  // Remove old Graphics
  myGraphicsLayer.graphics.forEach(function(g){
    if(g.visible === true)
      myGraphicsLayer.remove(g);
  });
  
  var symbol, point, graphic;
  var img = new Image();

  img.src = '../../uihlein/test/images/star.png';

  img.onload = function() {

    symbol = new PictureMarkerSymbol('../../uihlein/test/images/star.png', this.width, this.height);
    point = new Point(evt.mapPoint.getLongitude(), evt.mapPoint.getLatitude());
    graphic = new Graphic(point, symbol);
    
    myGraphicsLayer.add(graphic);
    
    map.infoWindow.show(point);    
  }

});

This is not the best solution (it took two minutes to write and is more of a proof of concept).
I strongly encourage you to seek out alternative solutions.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.