-------------------------------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 (
Cihaz:{device.description}
Ip:{device.ipAddress}
Cihaz Detayı
);
};
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: `${cluster.getChildCount()}`,
className: `marker-cluster-custom-${color}`,
iconSize: L.point(25, 25, true)
});
};
return (
{/* {visibleElementStatus.map((status) => (
createClusterCustomIcon(cluster, status)}
showCoverageOnHover
zoomToBoundsOnClick
spiderfyOnMaxZoom
>
{devices.filter((d) => d.currentStatus === status).map((device) => getMarker(device))}
))} */}
{devices.map((device) => getMarker(device))}
);
}
-------------------------------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 (
Cihaz:{device.description}
Ip:{device.ipAddress}
Cihaz Detayı
);
};
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: `${cluster.getChildCount()}`,
className: `marker-cluster-custom-${color}`,
iconSize: L.point(35, 35, true)
});
};
return (
{loading ? : null}
{devices &&
status.map((stat, i) => (
{stat.length ? getElementStatusEnum(stat[0].currentStatus, true) : getElementStatusEnum(i + 1, true)}:{' '}
{stat.length}
))}
{/* {visibleElementStatus.map((status) => (
createClusterCustomIcon(cluster, status)}
showCoverageOnHover
zoomToBoundsOnClick
spiderfyOnMaxZoom
>
{devices.filter((d) => d.currentStatus === status).map((device) => getMarker(device))}
))} */}
{devices.map((device) => getMarker(device))}
);
}