react-leaflet#Circle JavaScript Examples

showDataOnMap = (data, casesType = "cases") =>
  data.map((country) => (
    <Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      fillOpacity={0.4}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >
      <Popup>
        <div className="info-container">
          <div
            className="info-flag"
            style={{ backgroundImage: `url(${country.countryInfo.flag})` }}
          ></div>
          <div className="info-name">{country.country}</div>
          <div className="info-confirmed">
            Cases: {numeral(country.cases).format("0,0")}
          </div>
          <div className="info-recovered">
            Recovered: {numeral(country.recovered).format("0,0")}
          </div>
          <div className="info-deaths">
            Deaths: {numeral(country.deaths).format("0,0")}
          </div>
        </div>
      </Popup>
    </Circle>
  ))

SelfCircle = () => {
  const { geolocation, geoPermission } = useContext ( AppContext )
  if ( geoPermission !== 'granted' ) {
    return null
  }
  return (
    <Circle 
      center={checkPosition(geolocation)}
      radius={25}
    />
  )
}

AddShapesToMap = () => {
  const state = {
    lat: 28.365724898272077,
    lng: -81.55525436402367,
    zoom: 13,
  };
  const position = [state.lat, state.lng];
  return (
    <Map center={position} zoom={state.zoom}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Circle
        color="yellow"
        opacity={1}
        fillOpacity={0.8}
        dashArray={12}
        fillColor="cyan"
        radius={500}
        center={position}
      />
    </Map>
  );
}

OtherLayer = () => {
  return (
    <Map center={defaultCenter} zoom={13}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <LayerGroup>
        <Circle color="yellow" radius={400} center={whiteHouse} />
        <Circle color="green" radius={200} center={eisenhowerOffice} />
      </LayerGroup>
      <FeatureGroup opacity={1} color="tomato">
        <Circle color="red" radius={200} center={washingtonMountain} />
        <Circle color="blue" radius={200} center={lincolnMemorial} />
        <Circle color="magenta" radius={200} center={worlwarTwoMemorial} />
        <Circle color="purple" radius={200} center={jeffersonMemorial} />
      </FeatureGroup>
    </Map>
  );
}

function AppMap({ hoveredProtest }) {
  const store = useStore();
  const { mapStore, protestStore, userCoordinates: coordinates } = store;
  const addressInputRef = useRef(); // Search Bar ref, used by the combobox

  const updateMap = (currentMapPosition) => {
    // The following if condition is a 'hack' to check if the userCoordinates have just updated their position
    // If they did, update the protest list with the fetched nearby protests (by setting the onlyMarkers parameter to false)
    // TODO: Check if the user has just updated their position & update nearby protests list in a more elegant way.
    if (currentMapPosition[0] === coordinates[0]) {
      protestStore.fetchProtests({ onlyMarkers: false, position: currentMapPosition });
    } else {
      // Check if the protests in the current map position were requested already.
      const alreadyRequested = mapStore.mapPositionHistory.some((pos) => pointWithinRadius(pos, currentMapPosition, 3000));

      if (!alreadyRequested) {
        protestStore.fetchProtests({ onlyMarkers: true, position: currentMapPosition });
      }
    }

    mapStore.setMapPosition(currentMapPosition);
  };

  return (
    <MapWrapper>
      <AddressBar inputRef={addressInputRef} />
      <MapElement
        center={coordinates.length > 0 ? coordinates : balfur}
        onMoveEnd={({ target }) => {
          updateMap([target.getCenter().lat, target.getCenter().lng]);
        }}
        zoom={14}
        zoomControl={false}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {coordinates.length > 0 && (
          <>
            <Marker position={coordinates} icon={positionPoint}></Marker>
            <MarkersList markers={mapStore.markers} hoveredProtest={hoveredProtest} />
            {MKs.map((mk) => (
              <Marker position={mk.position} icon={new L.icon(mk.icon)} key={mk.position[0]}>
                <Popup>{mk.name}</Popup>
              </Marker>
            ))}
            <Circle radius={1000} center={coordinates} />
          </>
        )}
      </MapElement>
    </MapWrapper>
  );
}

Template = (props) => {
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.mineral[props.id]));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=mineral__"+props.id).then(response=>response.json()).then(d=>setData(d)) : setData([])},[props.id, marker]);
    if(data !== null){return(marker ? (
        props.id === "photonscale" ? (
            data.map((x=>
                <Circle 
                    center={[x.lat,x.lng]}
                    radius={30}
                    pathOptions={{
                        color: 'pink',
                        fillColor: 'lightblue',
                        fillOpacity: '0.25'
                    }}
                >
                    <Marker icon={iconLib[props.id]} position={[x.lat,x.lng]}>
                        <Tooltip direction='top'><tooltip-window>
                            <header>
                                <span><menuicon/> {t("items:mineral."+props.id+".title")}</span>
                            </header>
                            <content>
                                {t("ui:LegendMenu.Categories.minerals")}
                                <br/>
                                {t("ui:Map.placedBy")}: {x.contributer}
                                <id>ID: {props.id}{x.id}</id>
                            </content>
                        </tooltip-window></Tooltip>
                    </Marker>
                </Circle>
            ))
        ) : (
            data.map((x=>
                <Marker icon={iconLib[props.id]} position={[x.lat,x.lng]}>
                    <Tooltip direction='top'><tooltip-window>
                        <header>
                            <span><menuicon/> {t("items:mineral."+props.id+".title")}</span>
                        </header>
                        <content>
                            {t("ui:LegendMenu.Categories.minerals")}
                            <br/>
                            {t("ui:Map.placedBy")}: {x.contributer}
                            <id>ID: {props.id}{x.id}</id>
                        </content>
                    </tooltip-window></Tooltip>
                </Marker>
            ))
        )
    ):<Fragment/>)}else{return <Fragment/>}
}

// to aggregate data by state+country and sum up metrics


export default function MapContainer(props) {
  const {
    setDashboardData,
    setRootData,
    setPan,
    pan
  } = props;

  const [indiaData, setIndiaData] = useState(null);

  const [stateData, setStateData] = useState(null);
  const [countrySummary, setCountrySummary] = useState(null);

  const [districtData, setDistrictData] = useState(null);

  const [internationalData, setInternationalData] = useState([]);
  const [countryStats, setCountryStats] = useState(null);
  const [worldStats, setWorldStats] = useState(null);

  const [viewTestCenters, setViewTestCenters] = useState(false);
  const [showInfoHead, setShowInfoHead] = useState(true);
  const [firstLoad, setFirstLoad] = useState(true);

  const [mapPan, setMapPan] = useState(pan);

  useEffect(()=>{
    setMapPan(pan)
    console.log("Pan: " + JSON.stringify(pan.geoJson))
  },[pan])

  useEffect(()=>{
    setRootData({data: internationalData})
  },[internationalData])
  useEffect(() => {
    fetch("https://stats.coronasafe.live/covid_data_json/kerala_covid_data.json")
      .then(res => res.json())
      .then(
        result => {
          console.log("Received Response" + result);
          setDistrictData(result);
          }
      );
    
    fetch("https://stats.coronasafe.live/covid_data_json/other_countries_covid_data.json")
      .then(res => res.json())
      .then(
        result => {
          setInternationalData(result.reduce((acc,cur) => {
            return {
              ...acc,
              [cur.Country]:{
                geojson_feature: JSON.parse(cur.geo_json_feature.split("'").join("\"")), 
                confirmed: cur['Confirmed'], 
                deceased: cur['Deaths'],
                recovered: cur['Recovered'], 
                active: cur['Active'],
                latitude: cur['Lat'],
                longitude: cur['Long_']
              }
            }
          },{}));
          }
      );

  }, []);

  const findRadius = cases => {
    return (Math.cbrt(cases)) * 1500
  }

  const geoJSONStyle = (feature) => {return {
    color: '#FFFFFF',
    weight: 1,
    fillOpacity: 0.5,
    fillColor: '#A73829',
  }}
  const renderTooltip = (feature) => {
    return `Details Unavailable`
  }
  const onEachFeature = (feature, layer) => {
    const tooltipChildren = renderTooltip(feature);
    const popupContent = `<Popup> ${tooltipChildren} </Popup>`
    layer.bindPopup(popupContent)
  }
  const focusLocation = (latlng) => {
    const [closest,closestData] = findClosest(latlng, internationalData);
    const newGeo = closestData.geojson_feature
    setPan({geoJson:newGeo, location:closest})
    setDashboardData({...closestData, name: closest})
  }
  return (
      <Map 
        className="h-full w-full md:w-4/5 fixed" 
        center={mapPan.position} 
        zoom={mapPan.zoom} 
        minZoom={2}
        maxBounds={[[-85,-180],[85,180]]}
        onClick={e=>{focusLocation(e.latlng)}}
        onMoveend={e=>{focusLocation(e.target.getCenter())}}
      >
        {
          mapPan.geoJson &&
          <GeoJSON
            key={mapPan.location}
            data={mapPan.geoJson}
            style={geoJSONStyle}
            onEachFeature={onEachFeature}
          />
        }
        <TileLayer
          attribution='&amp;copy <a href="https://carto.com">Carto</a>'
          url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
        />
        {districtData &&
          Object.entries(districtData.data).map(([location,data]) =>
            // console.log(location.state + "|" + JSON.stringify(indiaData.stateData[location.state]))
              <Circle
                key={location}
                center={[data.latitude, data.longitude]}
                fillColor="#d14f69"
                fillOpacity={0.6}
                stroke={false}
                radius={15000 + findRadius(data.active)}
              />
          )}
        {Object.entries(internationalData).map(([country,location], index) => {
          if (location.country_region === "India") {
            if (countryStats === null) setCountryStats(location);
            return null;
          }
          return (
            <Circle
              key={
                country
              }
              center={{lat: location.latitude, lng: location.longitude}}
              fillColor="#d14f69"
              fillOpacity={0.6}
              stroke={false}
              radius={15000 + findRadius(location.confirmed)}
              onMouseOver={e => {
                e.target.openPopup();
              }}
            >
              <Popup>
                {country}
                {location.confirmed}
                {/* <h3>
                  {location.province_state
                    ? location.province_state
                    : location.country_region}
                </h3>
                {location.province_state && (
                  <span>
                    {location.country_region}
                    <br />
                  </span>
                )}
                    Cases: {location.confirmed}
                    Cured/Discharged: {location.recovered}
                    Deaths: {location.deaths}
                <hr />
                Last Update: {location.last_update}
                <br /> */}
              </Popup>
            </Circle>
          );
        })}
        {viewTestCenters &&
          testCenters.map(testCenter => {
            return (
              <Marker
                key={testCenter.institution}
                position={[testCenter.latitude, testCenter.longitude]}
                onMouseOver={e => {
                  e.target.openPopup();
                }}
              >
                <Popup>
                  <h3>{testCenter.institution}</h3>
                  <a
                    href={
                      "https://www.google.com/maps/search/?api=1&query=" +
                      testCenter.institution +
                      "&query_place_id=" +
                      testCenter.place_id
                    }
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Open in Maps
                  </a>
                </Popup>
              </Marker>
            );
          })}
      </Map>
  );
}

Load = {
Veteran:()=>{
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.veteran));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__veteran").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
    if(data !== null){return (marker ? (data.map((x=>
        <Marker icon={iconLib.veteran} position={[x.lat,x.lng]}>
            <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                <header>
                    <span><menuicon/> {t("items:other.veteran.title")}</span>
                </header>
                <content>
                    {t("enemies:"+x.string)}
                    <br/>
                    {t("ui:Map.placedBy")}: {x.contributer}
                    <id>ID: veteran{x.id}:{x.string}</id>
                </content>
            </tooltip-window></Tooltip>
        </Marker>
    ))):<Fragment/>)}else{return <Fragment/>}
},
AlphaReactor:()=>{
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.alphareactor));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__alphareactor").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
    if(data !== null){return (marker ? (data.map((x=>
        <Marker icon={iconLib.alphareactor} position={[x.lat,x.lng]}>
            <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                <header>
                    <span><menuicon/> {t("items:other.alphareactor.title")}</span>
                </header>
                <content>
                    {t("items:other.alphareactor.description")}
                    <br/>
                    {t("ui:Map.placedBy")}: {x.contributer}
                    <id>ID: alphareactor{x.id}</id>
                </content>
            </tooltip-window></Tooltip>
        </Marker>
    ))):<Fragment/>)}else{return <Fragment/>}
},
Snoal:()=>{
    const {t} = useTranslation();
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.snoal));
        return ()=>clearInterval(i);
    });
    const data = [
        {"lat": "-201","lng": "522",},
        {"lat": "-172","lng": "562",},
        {"lat": "-255","lng": "568",},
        {"lat": "-298","lng": "582",},
        {"lat": "-348","lng": "579",}
    ];
    return (marker ? (data.map((x=>
        <Circle 
            center={[x.lat,x.lng]}
            radius={20}
            pathOptions={{
                color: 'gold',
                fillColor: 'yellow',
                fillOpacity: '0.25'
            }}
        >
            <Marker icon={iconLib.snoal} position={[x.lat,x.lng]}>
                <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                    <header>
                        <span><menuicon/> {t("items:other.snoal.title")}</span>
                    </header>
                    <content>
                        {t("items:other.snoal.description")}
                    </content>
                </tooltip-window></Tooltip>
            </Marker>
        </Circle>
    ))):<Fragment/>)
},
StellarFragment:()=>{
    const {t} = useTranslation();
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.stellarseed));
        return ()=>clearInterval(i);
    });
    const data = [
        {"lat": -1068, "lng": 1423.5}
    ]
    return(marker ? (data.map((x=>
        <Circle 
            center={[x.lat,x.lng]}
            radius={35}
            pathOptions={{
                color: 'gold',
                fillColor: 'yellow',
                fillOpacity: '0.25'
            }}
        >
            <Marker icon={iconLib.stellarseed} position={[x.lat,x.lng]}>
                <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                    <header>
                        <span><menuicon/> {t("items:other.stellarseed.title")}</span>
                    </header>
                    <content>
                        {t("items:other.stellarseed.description")}
                    </content>
                </tooltip-window></Tooltip>
            </Marker>
        </Circle>
    ))):<Fragment/>)
},
StellarGrace:()=>{
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.stellargrace));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__stellargrace").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
    if(data !== null){return (marker ? (data.map((x=>
        <Marker icon={(()=>{
            if(x.string === "gold"){return iconLib.stellarGrace_Gold}
            if(x.string === "silver"){return iconLib.stellarGrace_Silver}
            if(x.string === "default"){return iconLib.stellarGrace_Default}
        })()} position={[x.lat,x.lng]}>
            <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                <header>
                    <span><menuicon/> {t("items:other.stellargrace.title")}</span>
                </header>
                <content>
                    {t("ui:Map.type")}: {t("ui:Map.stellarGraceType."+x.string)}
                    <br/>
                    {t("ui:Map.placedBy")}: {x.contributer}
                    <id>ID: stellargrace{x.id}</id>
                </content>
            </tooltip-window></Tooltip>
        </Marker>
    ))):<Fragment/>)}else{return <Fragment/>}
},
Datapod:()=>{
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.datapod));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__datapod").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
    if(data !== null){return (marker ? (data.map((x=>
        <Marker 
            icon={window.localStorage_Checked.datapods && window.localStorage_Checked.datapods.indexOf(x.string)>-1 ? iconLib.datapodChecked :iconLib.datapod}
            position={[x.lat,x.lng]} 
            eventHandlers={{
                contextmenu:(e)=>{
                    if(e.target.getIcon() === iconLib.datapod){
                        e.target.setIcon(iconLib.datapodChecked);
                        if(!window.localStorage_Checked.datapods){
                            window.localStorage_Checked.datapods = []
                        }
                        window.localStorage_Checked.datapods[window.localStorage_Checked.datapods.length]=x.string;
                        localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
                    }else{
                        e.target.setIcon(iconLib.datapod);
                        var mark = window.localStorage_Checked.datapods.indexOf(x.string);
                        window.localStorage_Checked.datapods.splice(mark,1);
                        localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
                    }
                }
            }}
        >
            <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                <header>
                     <span><menuicon/> {t("items:other.datapod.title")}</span>
                </header>
                <content>
                    {t("datapods:"+x.string)}
                    <br/>
                    {t("ui:Map.placedBy")}: {x.contributer}
                    <id>ID: {x.string}</id>
                </content>
            </tooltip-window></Tooltip>
        </Marker>
    ))):<Fragment/>)}else{return <Fragment/>}
},
BGM:()=>{
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.musicplace));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__musicplace").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
    if(data !== null){return (marker ? (data.map((x=>
        <Marker icon={iconLib.musicplace} position={[x.lat,x.lng]}>
            <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                <header>
                    <span><menuicon/> {t("items:other.musicplace.title")}</span>
                </header>
                <content>
                    {x.string}
                    <br/>
                    {t("ui:Map.placedBy")}: {x.contributer}
                </content>
            </tooltip-window></Tooltip>
        </Marker>
    ))):<Fragment/>)}else{return <Fragment/>}
},
Mischief:()=>{
    const {t} = useTranslation();
    const [data,setData] = useState([]);
    const [marker,setMarker] = useState([]);
    useEffect(()=>{
        var i = setInterval(()=>setMarker(window.localStorage_Settings.other.mischief));
        return ()=>clearInterval(i);
    });
    useEffect(()=>{marker === 1 ? fetch("./api/read.php?table=other__mischief").then(response=>response.json()).then(d=>setData(d)) : setData([])},[marker]);
    if(data !== null){return (marker ? (data.map((x=>
        <Marker 
            icon={window.localStorage_Checked.mischief && window.localStorage_Checked.mischief.indexOf(x.id)>-1 ? iconLib.mischiefChecked : iconLib.mischief}
            position={[x.lat,x.lng]} 
            eventHandlers={{
                contextmenu:(e)=>{
                    if(e.target.getIcon() === iconLib.mischief){
                        e.target.setIcon(iconLib.mischiefChecked);
                        if(!window.localStorage_Checked.mischief){
                            window.localStorage_Checked.mischief = []
                        }
                        window.localStorage_Checked.mischief[window.localStorage_Checked.mischief.length]=x.id;
                        localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
                    }else{
                        e.target.setIcon(iconLib.mischief);
                        var mark = window.localStorage_Checked.mischief.indexOf(x.id);
                        window.localStorage_Checked.mischief.splice(mark,1);
                        localStorage.setItem("checked",JSON.stringify(window.localStorage_Checked))
                    }
                }
            }}
        >
            <Tooltip direction='top'><tooltip-window style={{width: "320px"}}>
                <header>
                    <span><menuicon/> {t("items:other.mischief.title")}</span>
                </header>
                <content>
                    {t("ui:Map.placedBy")}: {x.contributer}
                    <id>ID: mischief{x.id}</id>
                </content>
            </tooltip-window></Tooltip>
        </Marker>
    ))):<Fragment/>)}else{return <Fragment/>}
}
}