react-leaflet#useLeaflet TypeScript Examples

The following examples show how to use react-leaflet#useLeaflet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From aqualink-app with MIT License 6 votes vote down vote up 
SiteMarkers = ({ collection }: SiteMarkersProps) => {
  const storedSites = useSelector(sitesToDisplayListSelector);
  const sitesList = collection?.sites || storedSites || [];
  const siteOnMap = useSelector(siteOnMapSelector);
  const { map } = useLeaflet();

  const setCenter = useCallback(
    (inputMap: L.Map, latLng: [number, number], zoom: number) => {
      const maxZoom = Math.max(inputMap.getZoom() || 6, zoom);
      const pointBounds = L.latLngBounds(latLng, latLng);
      inputMap.flyToBounds(pointBounds, {
        duration: 2,
        maxZoom,
        paddingTopLeft: L.point(0, 200),
      });
    },
    []
  );
  // zoom in and center on site marker when it's clicked
  useEffect(() => {
    if (map && siteOnMap?.polygon.type === "Point") {
      const [lng, lat] = siteOnMap.polygon.coordinates;
      setCenter(map, [lat, lng], 6);
    }
  }, [map, siteOnMap, setCenter]);

  return (
    <LayerGroup>
      <MarkerClusterGroup
        iconCreateFunction={clusterIcon}
        disableClusteringAtZoom={1}
      >
        {sitesList.map((site: Site) => (
          <SiteMarker key={site.id} site={site} />
        ))}
      </MarkerClusterGroup>
    </LayerGroup>
  );
}
Example #2
Source File: index.tsx    From aqualink-app with MIT License 4 votes vote down vote up 
Popup = ({ site, classes, autoOpen }: PopupProps) => {
  const { map } = useLeaflet();
  const siteOnMap = useSelector(siteOnMapSelector);
  const popupRef = useRef<LeafletPopup>(null);
  const { name, region } = getSiteNameAndRegion(site);
  const isNameLong = name?.length && name.length > maxLengths.SITE_NAME_POPUP;

  const { dhw, satelliteTemperature } = site.collectionData || {};

  const onExploreButtonClick = () => {
    trackButtonClick(
      GaCategory.BUTTON_CLICK,
      GaAction.MAP_PAGE_BUTTON_CLICK,
      "Explore"
    );
  };

  useEffect(() => {
    if (
      map &&
      popupRef?.current &&
      siteOnMap?.id === site.id &&
      siteOnMap?.polygon.type === "Point" &&
      autoOpen
    ) {
      const { leafletElement: popup } = popupRef.current;
      const [lng, lat] = siteOnMap.polygon.coordinates;

      const point: LatLngTuple = [lat, lng];
      popup.setLatLng(point).openOn(map);
    }
  }, [autoOpen, map, site.id, siteOnMap]);

  return (
    <LeafletPopup
      ref={siteOnMap?.id === site.id ? popupRef : null}
      closeButton={false}
      className={classes.popup}
      autoPan={false}
    >
      <Card>
        <CardHeader
          className={classes.popupHeader}
          classes={{
            content: classes.popupHeaderContent,
            subheader: classes.subheader,
          }}
          title={
            <span title={isNameLong && name ? name : undefined}>
              {isNameLong
                ? `${name?.substring(0, maxLengths.SITE_NAME_POPUP)}...`
                : name}
            </span>
          }
          subheader={region}
        />
        <CardContent>
          <Grid container item xs={12}>
            <Grid item xs={6}>
              <Grid container item xs={12}>
                <Typography variant="caption" color="textSecondary">
                  SST
                </Typography>
              </Grid>
              <Grid container item xs={12}>
                <Typography
                  style={{ color: colors.lightBlue }}
                  variant="h5"
                  color="textSecondary"
                >
                  {`${formatNumber(satelliteTemperature, 1)}  °C`}
                </Typography>
              </Grid>
            </Grid>
            <Grid item xs={6}>
              <Grid container item xs={12}>
                <Typography variant="caption" color="textSecondary">
                  HEAT STRESS
                </Typography>
              </Grid>
              <Grid container alignItems="flex-end" item xs={12}>
                <Typography
                  style={{
                    color: `${dhwColorFinder(dhw)}`,
                  }}
                  variant="h5"
                  color="textSecondary"
                >
                  {formatNumber(dhw, 1)}
                  &nbsp;
                </Typography>
                <Tooltip title="Degree Heating Weeks - a measure of the amount of time above the 20 year historical maximum temperatures">
                  <Typography
                    style={{
                      color: `${dhwColorFinder(dhw)}`,
                      position: "relative",
                      bottom: 0,
                    }}
                    variant="h6"
                    color="textSecondary"
                  >
                    DHW
                  </Typography>
                </Tooltip>
              </Grid>
            </Grid>
          </Grid>
          <Grid style={{ margin: "1rem 0 1rem 0" }} container item xs={12}>
            <Grid item>
              <Link
                style={{ color: "inherit", textDecoration: "none" }}
                to={`/sites/${site.id}`}
              >
                <Button
                  onClick={onExploreButtonClick}
                  size="small"
                  variant="outlined"
                  color="primary"
                >
                  EXPLORE
                </Button>
              </Link>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    </LeafletPopup>
  );
}