-------------------------------ONLINEMAP--------------------------------

import React, { useState, useEffect, useCallback } from 'react';
import { Paper, Typography, Button } from '@material-ui/core';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import CenterFocusWeakIcon from '@material-ui/icons/CenterFocusWeak';
import { lightStyle, darkStyle } from './SummaryStyles/topologymap';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import 'react-leaflet-markercluster/dist/styles.min.css';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import { useCustomer } from '../../Common/CommonComponents';
import L from 'leaflet';
import green from '../../../../public/assets/green-marker.png';
import black from '../../../../public/assets/black-marker.png';
import blue from '../../../../public/assets/blue-marker.png';
import orange from '../../../../public/assets/orange-marker.png';
import red from '../../../../public/assets/red-marker.png';
import yellow from '../../../../public/assets/yellow-marker.png';
import sbaGreen from '../../../../public/assets/sba_green.png';
import sbaBlack from '../../../../public/assets/sba_gray.png';
import sbaBlue from '../../../../public/assets/sba_blue.png';
import sbaOrange from '../../../../public/assets/sba_orange.png';
import sbaRed from '../../../../public/assets/sba_red.png';
import sbaYellow from '../../../../public/assets/sba_yellow.png';
import { useAPI } from '../../../utils/hooks/useAPI';

const center = [39.061983, 35.268232];
const zoom = 5.6;
export default function OnlineMap() {
  let dark = useSelector((state) => state.dark);
  const { getVisibleElementStatus } = useCustomer();
  const [map, setMap] = useState(null);
  const { get } = useAPI();
  const [devices, setDevices] = useState([]);
  const { t } = useTranslation();
  const { getCustomer } = useCustomer();
  const isSba = (getCustomer()?.slug || '') === 'sba';
  const visibleElementStatus = getVisibleElementStatus()
    .map((status) => status.id)
    .filter(Boolean);
  console.log(visibleElementStatus);
  useEffect(() => {
    get('device/devicesInMap')
      .then((response) => {
        if (response) {
          setDevices(response.content);
          console.log(devices);
          const markers = L.markerClusterGroup();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  let greenMarker = L.icon({
    iconUrl: isSba ? sbaGreen : green,
    iconRetinaUrl: null,
    iconSize: [12, 12],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var blueMarker = L.icon({
    iconUrl: isSba ? sbaBlue : blue,
    iconRetinaUrl: null,
    iconSize: [12, 12],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var yellowMarker = L.icon({
    iconUrl: isSba ? sbaYellow : yellow,
    iconRetinaUrl: null,
    iconSize: [12, 12],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var orangeMarker = L.icon({
    iconUrl: isSba ? sbaOrange : orange,
    iconRetinaUrl: null,
    iconSize: [12, 12],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var redMarker = L.icon({
    iconUrl: isSba ? sbaRed : red,
    iconRetinaUrl: null,
    iconSize: [12, 12],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var blackMarker = L.icon({
    iconUrl: isSba ? sbaBlack : black,
    iconRetinaUrl: null,
    iconSize: [12, 12],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  const onClick = useCallback(() => {
    map.setView(center, zoom);
  }, [map]);

  const getMarker = (device) => {
    let icon = blackMarker;
    switch (device.currentStatus) {
      case 1:
        icon = greenMarker;
        break;
      case 2:
        icon = blueMarker;
        break;
      case 3:
        icon = yellowMarker;
        break;
      case 4:
        icon = orangeMarker;
        break;
      case 5:
        icon = redMarker;
        break;
      case 6:
        icon = blackMarker;
        break;
      default:
        break;
    }
    return (
      <Marker icon={icon} position={[device.lon, device.lat]}>
        <Popup>
          <div style={{ wordWrap: 'break-word' }}>Cihaz:{device.description}</div>
          <div>Ip:{device.ipAddress}</div>
          <a
            style={{ color: '#3C7489', textDecoration: 'underline', cursor: 'pointer' }}
            href={`/networkMonitor/devices/${device.id}`}
            target="_blank"
            rel="noreferrer"
          >
            Cihaz Detayı
          </a>
        </Popup>
      </Marker>
    );
  };

  const getColor = (status) => {
    let color = 'black';
    switch (status) {
      case 1:
        color = 'green';
        break;
      case 2:
        color = 'blue';
        break;
      case 3:
        color = 'yellow';
        break;
      case 4:
        color = 'orange';
        break;
      case 5:
        color = 'red';
        break;
      case 6:
        color = 'black';
        break;
      default:
        break;
    }
    return color;
  };

  const createClusterCustomIcon = function(cluster, status) {
    const color = getColor(status);
    return L.divIcon({
      html: `<span>${cluster.getChildCount()}</span>`,
      className: `marker-cluster-custom-${color}`,
      iconSize: L.point(25, 25, true)
    });
  };

  return (
    <Paper style={dark ? darkStyle.root : lightStyle.root}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ width: '100%' }}>
          <Typography style={dark ? darkStyle.heading : lightStyle.heading}>Harita</Typography>
        </div>
        <div style={{ display: 'flex', backgroundColor: '#3C7489', alignItems: 'center' }}>
          <Button
            style={{
              color: 'white',
              backgroundColor: '#1F4454',
              height: 30,
              justify: 'center',
              borderRadius: 5,
              padding: 10,
              margin: '10px',
              width: 120
            }}
            onClick={onClick}
          >
            Reset Map
          </Button>
          <Link
            to={{
              pathname: '/#map'
            }}
            style={{ textDecoration: 'none', textTransform: 'none' }}
          >
            <CenterFocusWeakIcon
              disableUnderline={true}
              style={dark ? darkStyle.button : lightStyle.button}
            ></CenterFocusWeakIcon>
          </Link>
        </div>
      </div>
      <div>
        <MapContainer center={center} zoom={zoom} scrollWheelZoom={false} whenCreated={setMap} style={{ height: 370 }}>
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         {/* {visibleElementStatus.map((status) => (
            <MarkerClusterGroup
              maxClusterRadius={isSba ? null : 70}
              iconCreateFunction={(cluster) => createClusterCustomIcon(cluster, status)}
              showCoverageOnHover
              zoomToBoundsOnClick
              spiderfyOnMaxZoom
            >
              {devices.filter((d) => d.currentStatus === status).map((device) => getMarker(device))}
            </MarkerClusterGroup>
          ))} */}
          {devices.map((device) => getMarker(device))}
        </MapContainer>
      </div>
    </Paper>
  );
}



















-------------------------------sba map container--------------------------------

import React, { useEffect, useState, useCallback } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { useAPI } from '../../../utils/hooks/useAPI';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import { useSelector } from 'react-redux';
import { Loading, useEnum, useCustomer } from '../../Common/CommonComponents';
import { lightStyle, darkStyle } from './MapContainer.style';
import green from '../../../../public/assets/green-marker.png';
import black from '../../../../public/assets/black-marker.png';
import blue from '../../../../public/assets/blue-marker.png';
import orange from '../../../../public/assets/orange-marker.png';
import red from '../../../../public/assets/red-marker.png';
import yellow from '../../../../public/assets/yellow-marker.png';
import 'react-leaflet-markercluster/dist/styles.min.css';
import MarkerClusterGroup from 'react-leaflet-markercluster';

import sbaGreen from '../../../../public/assets/sba_green.png';
import sbaBlack from '../../../../public/assets/sba_gray.png';
import sbaBlue from '../../../../public/assets/sba_blue.png';
import sbaOrange from '../../../../public/assets/sba_orange.png';
import sbaRed from '../../../../public/assets/sba_red.png';
import sbaYellow from '../../../../public/assets/sba_yellow.png';

const center = [39.061983, 35.268232];
const zoom = 6.5;

export default function SbaMapContainer() {
  const { get } = useAPI();
  const { getVisibleElementStatus } = useCustomer();
  const [devices, setDevices] = useState([]);
  const [status, setStatus] = useState([]);
  let dark = useSelector((state) => state.dark);
  const [loading, setLoading] = useState(false);
  const { getElementStatusEnum } = useEnum();
  const [map, setMap] = useState(null);
  const { getCustomer } = useCustomer();
  const isSba = (getCustomer()?.slug || '') === 'sba';
  const visibleElementStatus = getVisibleElementStatus()
    .map((status) => status.id)
    .filter(Boolean);
  console.log(visibleElementStatus);
  useEffect(() => {
    setLoading(true);
    get('device/devicesInMap')
      .then((response) => {
        if (response) {
          setDevices(response.content);
          setLoading(false);
          let statusData = [];
          Array(6)
            .fill('')
            .map((_x, i) => {
              let status = response.content.filter((c) => c.currentStatus === i + 1);
              statusData.push(status);
              console.log('stat', status);
            });
          setStatus(statusData);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  let greenMarker = L.icon({
    iconUrl: isSba ? sbaGreen : green,
    iconRetinaUrl: null,
    iconSize: [18, 18],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var blueMarker = L.icon({
    iconUrl: isSba ? sbaBlue : blue,
    iconRetinaUrl: null,
    iconSize: [18, 18],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var yellowMarker = L.icon({
    iconUrl: isSba ? sbaYellow : yellow,
    iconRetinaUrl: null,
    iconSize: [18, 18],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var orangeMarker = L.icon({
    iconUrl: isSba ? sbaOrange : orange,
    iconRetinaUrl: null,
    iconSize: [18, 18],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var redMarker = L.icon({
    iconUrl: isSba ? sbaRed : red,
    iconRetinaUrl: null,
    iconSize: [18, 18],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  var blackMarker = L.icon({
    iconUrl: isSba ? sbaBlack : black,
    iconRetinaUrl: null,
    iconSize: [18, 18],
    shadowUrl: null,
    shadowRetinaUrl: null
  });

  const onClick = useCallback(() => {
    map.setView(center, zoom);
  }, [map]);

  const getMarker = (device) => {
    let icon = blackMarker;
    switch (device.currentStatus) {
      case 1:
        icon = greenMarker;
        break;
      case 2:
        icon = blueMarker;
        break;
      case 3:
        icon = yellowMarker;
        break;
      case 4:
        icon = orangeMarker;
        break;
      case 5:
        icon = redMarker;
        break;
      case 6:
        icon = blackMarker;
        break;
      default:
        break;
    }

    return (
      <Marker icon={icon} position={[device.lon, device.lat]}>
        <Popup>
          <div style={{ wordWrap: 'break-word' }}>Cihaz:{device.description}</div>
          <div>Ip:{device.ipAddress}</div>
          <a
            style={{ color: '#3C7489', textDecoration: 'underline', cursor: 'pointer' }}
            href={`/networkMonitor/devices/${device.id}`}
            target="_blank"
            rel="noreferrer"
          >
            Cihaz Detayı
          </a>
        </Popup>
      </Marker>
    );
  };
  const getColor = (status) => {
    let color = 'black';
    switch (status) {
      case 1:
        color = 'green';
        break;
      case 2:
        color = 'blue';
        break;
      case 3:
        color = 'yellow';
        break;
      case 4:
        color = 'orange';
        break;
      case 5:
        color = 'red';
        break;
      case 6:
        color = 'black';
        break;
      default:
        break;
    }
    return color;
  };
  const createClusterCustomIcon = function(cluster, status) {
    const color = getColor(status);
    return L.divIcon({
      html: `<span>${cluster.getChildCount()}</span>`,
      className: `marker-cluster-custom-${color}`,
      iconSize: L.point(35, 35, true)
    });
  };
  return (
    <div>
      {loading ? <Loading /> : null}
      <Grid container spacing={1} style={{ height: 50, marginBottom: 30 }}>
        {devices &&
          status.map((stat, i) => (
            <Grid item xs={2}>
              <Card
                style={
                  dark ? { backgroundColor: '#3C7489', color: 'white', textAlign: 'center' } : { textAlign: 'center' }
                }
              >
                <CardContent>
                  {stat.length ? getElementStatusEnum(stat[0].currentStatus, true) : getElementStatusEnum(i + 1, true)}:{' '}
                  {stat.length}
                </CardContent>
              </Card>
            </Grid>
          ))}
      </Grid>
      <Button style={lightStyle.resetMapButton} onClick={onClick}>
        Reset Map
      </Button>
      <MapContainer center={center} zoom={zoom} scrollWheelZoom={true} whenCreated={setMap} style={{ height: '750px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         {/* {visibleElementStatus.map((status) => (
            <MarkerClusterGroup
              maxClusterRadius={isSba ? null : 70}
              iconCreateFunction={(cluster) => createClusterCustomIcon(cluster, status)}
              showCoverageOnHover
              zoomToBoundsOnClick
              spiderfyOnMaxZoom
            >
              {devices.filter((d) => d.currentStatus === status).map((device) => getMarker(device))}
            </MarkerClusterGroup>
          ))} */}
          {devices.map((device) => getMarker(device))}
        </MapContainer>
    </div>
  );
}