Render map with marker base on coordinates

[qubiack]

Is it possible in mbgl-renderer to render a map with SVG markers on it? I don't see this in documentation for this project.

[brendan-ward]

You should be able to use a symbol layer. However, you need to use an image from a spritesheet that is loaded by your style JSON, and I believe that these do not support SVG images.

Note: you aren't able to use the addImage to load an image because we don't expose the map object or expose an API against it (other than for rendering based on the props you pass in).

[Sehbaz]

I wanted to add .png image into map using symbol but couldn't do it.
Any recommendation ?

[brendan-ward]

@Sehbaz what wasn't working? Are you doing this via the server or CLI?

You can pass in an object of image info, and then reference that to create icons in your style JSON:

Images are assigned under an id exampleImageID and must have a url, which can be base64 encoded image data or a valid URL to a PNG on the internet:

const images = {
    "exampleImageID": {
        "url": "data:image/png;base64,iVBORw0KGg....truncated...",
        "sdf": true / false (default),
        "pixelRatio": 1 (default)
    }
}

You then reference them by ID in your style:

layers:[
    {
        "id": "...",
        "type": "symbol",
        "source": "...",
        "layout": {
            "icon-image": "exampleImageID",
            ...
        },
        "paint": {
            ...
        }
    }
]

We have tests that do this for both base64 and remote image URLS. For example, here is the images for that test and here is the style JSON that references them.

If that doesn't work you'll need to provide more info about what is not working.

[Sehbaz]

@brendan-ward
I was using it from docker container.
Thanks, I will give this a go.