When I try to use create a MarkerAnnotation with a glyphImage ( glyphImage: { 1:'/static/imgs/marker.png' } ). I get an outline of the image, but it's just blank white space in the middle vs the glyphImage showing up properly. Any one had any luck?
Here is what I get:
https://www.dropbox.com/s/lv0jvxp6drtkuiw/Screenshot%202018-09-14%2023.19.15.png?dl=0
Thanks!
Hey ngandhy,
I don't know if you are using any or what type of framework, but I'm using mapkit js in Vue and what I did was upload the image to my CDN and it solved my problems.
e.g. glyphImage: {1: 'http://mycdn.com/myimage.png}
Didn't seem to work for me. Any chance you have a URL for one of yours so I can compare the headers and such? Thanks in advance
I had the same problem and it took me hours to figure out, how it works. No - there ist no special twist necessary with the image. No special header info or so. The truth is much simpler: Apple supports no colored glyph images. In fact, not even the brightness of the image pixels in the png is taken into consideration, this is why you saw a blank rectangle.
The one and only information used is the transparency! That means, that glyph images are by definition monochrome. Pixels with 0% opacity are of course invisible. Pixels with 100% opacity are rendered as pure white over whatever background you set for the map marker.
I hope that someone improves the documenation for MapKit js, as this is really not obvious.
