How to make different color of markers in amchart

Question

import React, { Component } from 'react';
import * as am4core from "@amcharts/amcharts4/core";
// import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/indiaLow";
import am4themes_frozen from "@amcharts/amcharts4/themes/frozen";

import './style.css'


am4core.useTheme(am4themes_frozen);

class WorldMap extends Component {
    constructor(props){
        super(props);
        this.state = {
            bubble:{}
        }
    }
componentDidMount() {
    let chart = am4core.create("worldmap", am4maps.MapChart);
    chart.geodata = am4geodata_worldLow;
    chart.projection = new am4maps.projections.Miller();
    let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.exclude = ["AQ"];
    polygonSeries.useGeodata = true;
    let polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = chart.colors.getIndex(0).lighten(0.5);

    let hs = polygonTemplate.states.create("hover");
    hs.properties.fill = chart.colors.getIndex(0);

    let imageSeries = chart.series.push(new am4maps.MapImageSeries());
    imageSeries.mapImages.template.propertyFields.longitude = "longitude";
    imageSeries.mapImages.template.propertyFields.latitude = "latitude";
    imageSeries.data = [ {
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Odisha",
        "latitude": 20.29,
        "longitude": 85.82,
        }, {
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Karnataka",
        "latitude": 12.99,
        "longitude": 77.71,
        }, {
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Andhra Pradesh",
        "latitude": 14.99,
        "longitude": 77.71,
        }
    ];

    chart.events.on( "mappositionchanged", updateCustomMarkers );

    function updateCustomMarkers( event ) {

    imageSeries.mapImages.each(function(image) {
        if (!image.dummyData || !image.dummyData.externalElement) {
            image.dummyData = {
                externalElement: createCustomMarker(image)
            };
        }

        let xy = chart.geoPointToSVG( { longitude: image.longitude, latitude: image.latitude } );
        image.dummyData.externalElement.style.top = xy.y + 'px';
        image.dummyData.externalElement.style.left = xy.x + 'px';
    });

    }

    // this function creates and returns a new marker element
    function createCustomMarker( image ) {

    let chart = image.dataItem.component.chart;

    // create holder
    let holder = document.createElement( 'div' );
    holder.className = 'map-marker';
    holder.title = image.dataItem.dataContext.title;
    holder.style.position = 'absolute';

    // maybe add a link to it?
    if ( undefined != image.url ) {
        holder.onclick = function() {
        window.location.href = image.url;
        };
        holder.className += ' map-clickable';
    }



    // create dot
    let dot = document.createElement( 'div' );
    dot.className = 'dot';
    holder.appendChild( dot );

    // create pulse
    let pulse = document.createElement( 'div' );
    pulse.className = 'pulse';
    holder.appendChild( pulse );

    // append the marker to the map container
    chart.svgContainer.htmlElement.appendChild( holder );

    return holder;
    }

}


    componentWillUnmount() {
        if (this.chart) {
        this.chart.dispose();
        }
    }



    render() {
        return (
            <div id="worldmap" style={{ width: "100%", height: "500px" }}></div>
        );
    }
}

export default WorldMap;

Here i am using amcharts with React.

Please have a look into my screenshot.

I want exact like this and it is coming but , the marker those are coming yellow i wants to change some markers to red and green.

Is it possible to do that ??

I have shared the screenshot below please have a look.

i found it from amcharts map demos

Answer 1

So, React is irrelevant here. The demo you've copied is our "Custom HTML Elements as Map Markers" demo.

You've shared some of the JavaScript code, but since these markers are pure HTML, they are styled via CSS. Here's the CSS from the demo:

#chartdiv {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.map-marker {
    /* adjusting for the marker dimensions
    so that it is centered on coordinates */
    margin-left: -8px;
    margin-top: -8px;
}
.map-marker.map-clickable {
    cursor: pointer;
}
.pulse {
    width: 10px;
    height: 10px;
    border: 5px solid #f7f14c;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #716f42;
    z-index: 10;
    position: absolute;
  }
.map-marker .dot {
    border: 10px solid #fff601;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    height: 50px;
    width: 50px;
    -webkit-animation: pulse 3s ease-out;
    -moz-animation: pulse 3s ease-out;
    animation: pulse 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 1;
    opacity: 0;
  }
  /* keyframe stuff here */

This is what's responsible for the yellow background color:

.pulse {
    /*...*/
    background-color: #716f42;
    /*...*/
}

If you want to change background colors, it can be done via the background-color declaration on the .pulse div. You can add more CSS classes (after .pulse), e.g.

.pulse--red {
  background-color: red;
}
.pulse--green {
  background-color: green;
}

Or you can pass color keys in your data, e.g.

    {
    "zoomLevel": 5,
    "scale": 0.5,
    "title": "Karnataka",
    "latitude": 12.99,
    "longitude": 77.71,
    "color": "red"
    }

I am not sure what your logic would be for changing colors, but let's say we want to change every 2nd of 3 markers to red and every 3 of 3 markers to green, here's an updated createCustomMarker function that uses color from data and adds additional pulse--* classes:

// keep a counter for fuzzy color logic
var markers = 0;

// this function creates and returns a new marker element
function createCustomMarker( image ) {

  var chart = image.dataItem.component.chart;

  // create holder
  var holder = document.createElement( 'div' );
  holder.className = 'map-marker';
  holder.title = image.dataItem.dataContext.title;
  holder.style.position = 'absolute';

  // maybe add a link to it?
  if ( undefined != image.url ) {
    holder.onclick = function() {
      window.location.href = image.url;
    };
    holder.className += ' map-clickable';
  }

  // create dot
  var dot = document.createElement( 'div' );
  dot.className = 'dot';
  holder.appendChild( dot );

  // create pulse
  var pulse = document.createElement( 'div' );
  pulse.className = 'pulse';
  // logic for switching colors
  switch (markers) {
    case 1:
      pulse.className += " pulse--red";
      ++markers;
      break;
    case 2:
      pulse.className += " pulse--green";
      markers = 0;
      break;
    default:
      ++markers;
      break;
  }
  // or apply color via data
  var color = image.dataItem.dataContext.color;
  if (color) {
    // pulse.setAttribute('style', 'background-color: ' + color + ' !important');
    // or
    pulse.style.backgroundColor = color;
  }
  holder.appendChild( pulse );

  // append the marker to the map container
  chart.svgContainer.htmlElement.appendChild( holder );

  return holder;
}

Here's a fork of our demo with the above:

https://codepen.io/team/amcharts/pen/6fad5b27c1456e6288032c5aaaae0c3e