Динамический / отзывчивый размер CSS

У меня есть карта с маркерами местоположения, и я хочу изменить размер маркеров, когда пользователь увеличивает / уменьшает масштаб. Я фиксирую уровень масштабирования в состоянии, и это число с плавающей запятой (например, 11,3235).

Как я могу передать это число (из состояния) в класс css, чтобы размер моих маркеров динамически изменял свой размер? Вместо того, чтобы иметь маленький / средний / большой маркер, я хочу, чтобы ширина и высота моего маркера были точными в соответствии с уровнем масштабирования.

class Mapbox extends Component {
  constructor(props){
    super(props)
    this.state = {
      viewport: {
        width: 900,
        height: 500,
        latitude: 49.2463,
        longitude: -123.1162,
        zoom: 11
      },
      active_vehicles: [],
      marker_size: 0,
    };
  }

  _onViewportChange = viewport => {
    this.setState({viewport});

  // Depending on zoom level, change Markers' class to dynamically change their display size/style
    this.setState({marker_size: this.state.viewport.zoom})

  };

  createMarkers = () => {
    let markers = []

    if (this.state.active_vehicles){
      for (let i = 0; i < this.state.active_vehicles.length; i++) {
        markers.push(
        <Marker key = {i} latitude = {this.state.active_vehicles[i]["Latitude"]} longitude = {this.state.active_vehicles[i]["Longitude"]}>
          <div className = {"location-marker " + this.state.marker_size}></div>
        </Marker>
        )
      }
      return markers
    }
  }

  render() {
    return (
      <ReactMapGL
        // mapbox API access token
        mapboxApiAccessToken = {MAPBOX_TOKEN}
        mapStyle = "mapbox://styles/mapbox/dark-v9"
        {...this.state.viewport}
        onViewportChange = {this._onViewportChange}>

        <div>
          {this.createMarkers()}
        </div>

      </ReactMapGL>
    );
  }   
}