3

enter image description hereI'm using google charts to display markers on the map. It only has simple circles. I want to use custom images and animations if possible.

<Chart
  width={'100vw'}
  height={'100vh'}
  chartType='GeoChart'
  data={[
    ['Lat', 'Long', 'Name'],
    [0, 0, 'test'],
  ]}
  options={{
    region: 'US',
    displayMode: 'markers',
    colorAxis: { colors: ['green', 'blue'] },
    resolution: 'provinces',
    defaultColor: '#555',
    backgroundColor: '#444',
    datalessRegionColor: '#f8bbd0',
  }}
/>

circle::before {
  content: '';
  background-image: url('../images/man.svg');
  position: absolute;
  color: blue;
  width: 70px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
}

I don't really understand why it doesn't work. Is this something that can't be done with CSS?

rmlockerd
  • 3,776
  • 2
  • 15
  • 25
ozansozuoz
  • 217
  • 1
  • 13
  • Can you add the react code as well? Furthermore, what is the result that you are getting, do you see your class being applied at all? – Arthur Costa Aug 02 '21 at 01:38
  • 1
    I added more information, I want the circle to be a custom image. The class will be updated if I change the fills color for example. But I can't seem to replace the image – ozansozuoz Aug 02 '21 at 01:42
  • By any chance have you just forgot to add a . in front of the circle class? – Arthur Costa Aug 02 '21 at 04:32

0 Answers0