style model icons

Author: citizen-dror

src/components/map/markers/IconCircle.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { IIconProps } from '../../types';
+
+interface Props extends IIconProps {
+  fill?: string;          // transparent inner color
+  stroke?: string;        // border color
+  opacity?: number;       // inner transparency
+  size?: number; 
+}
+
+export const IconCircle: React.FC<Props> = ({
+  size = 40,
+  fill = '#d22819ff',
+  stroke = '#d21919ff',
+  opacity = 0.35,
+}) => {
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size / 2 - 2;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx={cx}
+        cy={cy}
+        r={r}
+        fill={fill}
+        fillOpacity={opacity}
+        stroke={stroke}
+        strokeWidth={2}
+      />
+
+      {/* center dot */}
+      <circle
+        cx={cx}
+        cy={cy}
+        r={3}
+        fill="red"
+      />
+    </svg>
+  );
+};

src/components/map/markers/index.ts

@@ -7,4 +7,5 @@ export * from './IconScooter';
 export * from './IconQuestion';
 export * from './IconTruck';
 export * from './IconVehicle';
-export * from './IconWalk';
+export * from './IconWalk';
+export * from './IconCircle';

src/components/model/JunctionRadiusPicker.tsx

@@ -23,15 +23,16 @@ export const JunctionRadiusPicker: React.FC<JunctionRadiusPickerProps> = ({
       <Form.Label className="fw-semibold mb-0">
         {text}
       </Form.Label>
-
+<div style={{ width: 100 }}>
       <Form.Range
+         
         min={min}
         max={max}
         step={step}
         value={value}
         onChange={e => onChange(Number(e.target.value))}
       />
-
+</div>
       <span className="fw-bold">{value}m</span>
     </Form.Group>
   );

src/components/model/MaxClustersPicker.tsx

@@ -16,6 +16,7 @@ export const MaxClustersPicker: React.FC<Props> = ({
     <Form.Group>
       <Form.Label>Max clusters</Form.Label>
       <Form.Select
+        size="sm"
         value={value}
         onChange={e => onChange(Number(e.target.value))}
       >

src/components/model/ModelClusterMarkers.tsx

@@ -1,19 +1,19 @@
 import React, { FC } from 'react';
 import { observer } from 'mobx-react';
 import { ClusterRow } from '../../types';
-import MarkerSvg from '../map/MarkerSvg';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../stores/types';
 import ModelMarker from './ModelMarker';
 import { buildSeveritySectors, getSeverityColor, getSeverityMinMax } from './modelhelper';
 
 type Props = {
   clusters: ClusterRow[];
-  colorBy?: string;  
+  colorBy?: string;
+  isHeat: boolean;  
 };
 
 const ModelClusterMarkers: FC<Props> = observer(
-  ({ clusters, colorBy }) => {
+  ({ clusters, colorBy, isHeat }) => {
    const { language } = useSelector((state: RootState) => state.appUi);
    const { min, max } = getSeverityMinMax(clusters);
    const sectors = buildSeveritySectors(min, max);
@@ -28,6 +28,7 @@ const ModelClusterMarkers: FC<Props> = observer(
             data = {cluster}
             language={language}
             color={color}
+            isHeat={isHeat}
             markerIconsType={'general'}
           />
         );

src/components/model/ModelMap.tsx

@@ -9,6 +9,7 @@ import ModelClusterMarkers from './ModelClusterMarkers';
 
 type Props = {
     clusters: ClusterRow[];
+    isHeat: boolean;
 };
 
 /** ---------- Auto-fit map to clusters ---------- */
@@ -28,7 +29,7 @@ const FitBounds: React.FC<{ clusters: ClusterRow[] }> = ({ clusters }) => {
     return null;
 };
 
-export const ModelMap: React.FC<Props> = ({ clusters }) => {
+export const ModelMap: React.FC<Props> = ({ clusters, isHeat}) => {
     const mapRef = useRef<LeafletMap | null>(null);
     return (
         <Card style={{ height: '100%', padding: '0' }}>
@@ -43,7 +44,7 @@ export const ModelMap: React.FC<Props> = ({ clusters }) => {
                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                     />
-                    <ModelClusterMarkers clusters={clusters} colorBy='1' />
+                    <ModelClusterMarkers clusters={clusters} colorBy='1' isHeat={isHeat} />
                 </MapContainer>
             </div>
         </Card>

src/components/model/ModelMarker.tsx

@@ -2,34 +2,33 @@ import React from 'react';
 import { divIcon, LatLngExpression } from 'leaflet';
 import { Marker } from 'react-leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { getColors, getNumSeverity } from '../../utils/mapUtils';
-import { Accident, ClusterRow } from '../../types';
-// import { getColorByVehicle } from '../../../services/mapUtils';
-import {IconBike, IconBus, IconCar, IconEmpty, IconMotorcycle, IconQuestion, IconScooter, IconTruck, IconWalk } from '../map/markers';
+import { ClusterRow } from '../../types';
+import { IconEmpty, IconCircle } from '../map/markers';
 import ModelMarkerPopUp from './ModelMarkerPopUp';
-//import AccidentPopUp from './AccidentPopUp';
 
 // const iconSize = {
 //   iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41],
 // };
 
-const customMarketIcon = (iconMarkup:any, isSmall :boolean = false) => {
-  const size = isSmall? 9:22;
+const customMarketIcon = (iconMarkup:any, size :number = 40) => {
+  const half = size / 2;
   const res = divIcon({
     html: iconMarkup,
     className: 'ship-div-icon',
-    iconAnchor: [0, size],
-    popupAnchor: [2, -(size-2)],
+    iconAnchor: [-2, half],
+    popupAnchor: [0, -half]
   });
   return res;
 };
 
-const getEmptyIcon = (color: string, isAccuratePos: boolean) => {
-  const pin = <IconEmpty fill={color} isAccuratePos={isAccuratePos}/>;
+const getEmptyIcon = (color: string, isHeat: boolean) => {
+  const opacity = isHeat? 0.35: 0.8;
+  const size = isHeat? 40: 30;
+  const pin = <IconCircle fill={color} size={size} opacity={opacity} isAccuratePos={false}/>;
   const iconMarkup = renderToStaticMarkup(
     pin,
   );
-  const res = customMarketIcon(iconMarkup);
+  const res = customMarketIcon(iconMarkup, size);
   return res;
 };
 
@@ -39,15 +38,13 @@ interface IProps {
   language: string,
   color : string,
   markerIconsType: string,
+  isHeat: boolean
 }
 const ModelMarker: React.FC<IProps> = (({
-  data, position, language, color, markerIconsType,
+  data, position, language, color, isHeat,
 }) => {
-  //const lPoint = new L.LatLng(data.latitude, data.longitude);
-  //const color = (data.roadType=="junction")? '#D87F1D':'#A0202F'; //getColors(colorBy, data);
   const severity = 1;// getNumSeverity(data.injury_severity_hebrew);
-  //const isSmall = severity === 3; 
-  const icon =  getEmptyIcon(color, true);  
+  const icon =  getEmptyIcon(color, isHeat);  
   return (
     <Marker position={position} icon={icon}
       // @ts-ignore to allow custom props in Marker options

src/components/model/ModelTabs.tsx

@@ -80,11 +80,6 @@ const ModelTabs: React.FC<IProps> = () => {
       <Card.Body>
         {/* -------- Controls -------- */}
        <div className="d-flex flex-wrap gap-4 mb-3">
-          <JunctionRadiusPicker
-            value={junctionRadius}
-            onChange={setJunctionRadius}
-            text = "Junction radius"
-          />
           <JunctionRadiusPicker
             value={heatmapRadius}
             onChange={setHeatmapRadius}
@@ -93,6 +88,12 @@ const ModelTabs: React.FC<IProps> = () => {
             max = {200}
             step = {50}
           />
+          <JunctionRadiusPicker
+            value={junctionRadius}
+            onChange={setJunctionRadius}
+            text = "Junction radius"
+          />
+       
 
           <SeverityModePicker
             value={severityMode}
@@ -120,15 +121,15 @@ const ModelTabs: React.FC<IProps> = () => {
           <ClusterTable clusterTable={clusterTableDensity} />
         </Tab>
         <Tab eventKey="hetmap" title={t('HeatMap')}>
-          <ModelMap clusters={clusterTableDensity}/> 
+          <ModelMap clusters={clusterTableDensity} isHeat={true}/> 
         </Tab>
 
         <Tab eventKey="table" title={t('Table')}>
           <ClusterTable clusterTable={clusterTable} />
         </Tab>
 
         <Tab eventKey="map" title={t('Map')}>
-          <ModelMap clusters={clusterTable}/> 
+          <ModelMap clusters={clusterTable} isHeat={false}/> 
         </Tab> 
       </Tabs>
       </Card.Body>

src/components/model/SeverityModePicker.tsx

@@ -19,16 +19,16 @@ export const SeverityModePicker: React.FC<SeverityModePickerProps> = ({
 
       <Form.Select
         size="sm"
-        style={{ width: 260 }}
+        style={{ width: 170 }}
         value={value}
         onChange={e =>
           onChange(Number(e.target.value) as ModelSeverityMode)
         }
       >
         <option value={1}>All accidents equal</option>
-        <option value={2}>Pedestrian weighted</option>
-        <option value={3}>Pedestrian + electric</option>
-        <option value={4}>Fatal override</option>
+        <option value={2}>Pedestrian*2</option>
+        <option value={3}>Pedestrian*2, Bike*1.5</option>
+        <option value={4}>Fatal*2</option>
       </Form.Select>
     </Form.Group>
   );