Custom image on GeoMap markers

[eric]

Hi folks, I have an image that I want to use it on my GeoMap markers. I review the Custom Markers section of the Maps documentation but I only see CSS rules to define the shape of the marker. Is setting an image supported?

[dario]

Hi @eric, yes you can use an image as a custom marker, here is an example:

var markerHtmlStyle = () => {
    return `
            width: 30px;
            height: 30px;
            display: block;
            left: -15px;
            top: -6px;
            position: relative;
            background-image: url('marker.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            `;
};

cf.provider('Elasticsearch')
    .source('chicago_taxi_trips')
    .fields('pickup_latitude', 'pickup_longitude', 'company')
    .set('markerHtmlStyle', markerHtmlStyle)
    .graph('Geo Map')
    .element('chart');

According to the example above, you would have to have an image called marker.png on the same folder that contains the web app that you are developing and you have to add the following rule as a global CSS rule:

.my-custom-pin:after {
    display: none;
}

Let me know if you have any other question. Best regards.