@canmingir/link 1.1.0

package/minimal/src/sections/_examples/extra/map-view/clusters/index.jsx

@@ -0,0 +1,61 @@
+import { memo, useRef } from 'react';
+import Map, { Layer, Source } from 'react-map-gl';
+
+import { clusterLayer, clusterCountLayer, unclusteredPointLayer } from './layers';
+
+// ----------------------------------------------------------------------
+
+function MapClusters({ ...other }) {
+  const mapRef = useRef(null);
+
+  const onClick = (event) => {
+    const feature = event.features?.[0];
+
+    const clusterId = feature?.properties?.cluster_id;
+
+    const mapboxSource = mapRef.current?.getSource('earthquakes');
+
+    mapboxSource.getClusterExpansionZoom(clusterId, (error, zoom) => {
+      if (error) {
+        return;
+      }
+
+      if (feature?.geometry.type === 'Point') {
+        mapRef.current?.easeTo({
+          center: feature?.geometry.coordinates,
+          zoom: Number.isNaN(zoom) ? 3 : zoom,
+          duration: 500,
+        });
+      }
+    });
+  };
+
+  return (
+    <Map
+      initialViewState={{
+        latitude: 40.67,
+        longitude: -103.59,
+        zoom: 3,
+      }}
+      interactiveLayerIds={[clusterLayer.id || '']}
+      onClick={onClick}
+      ref={mapRef}
+      {...other}
+    >
+      <Source
+        id="earthquakes"
+        type="geojson"
+        data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
+        cluster
+        clusterMaxZoom={14}
+        clusterRadius={50}
+      >
+        <Layer {...clusterLayer} />
+        <Layer {...clusterCountLayer} />
+        <Layer {...unclusteredPointLayer} />
+      </Source>
+    </Map>
+  );
+}
+
+export default memo(MapClusters);

package/minimal/src/sections/_examples/extra/map-view/clusters/layers.js

@@ -0,0 +1,37 @@
+// ----------------------------------------------------------------------
+
+export const clusterLayer = {
+  id: 'clusters',
+  type: 'circle',
+  source: 'earthquakes',
+  filter: ['has', 'point_count'],
+  paint: {
+    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'],
+    'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
+  },
+};
+
+export const clusterCountLayer = {
+  id: 'cluster-count',
+  type: 'symbol',
+  source: 'earthquakes',
+  filter: ['has', 'point_count'],
+  layout: {
+    'text-field': '{point_count_abbreviated}',
+    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+    'text-size': 12,
+  },
+};
+
+export const unclusteredPointLayer = {
+  id: 'unclustered-point',
+  type: 'circle',
+  source: 'earthquakes',
+  filter: ['!', ['has', 'point_count']],
+  paint: {
+    'circle-color': '#11b4da',
+    'circle-radius': 4,
+    'circle-stroke-width': 1,
+    'circle-stroke-color': '#FFFFFF',
+  },
+};

package/minimal/src/sections/_examples/extra/map-view/draggable-markers/control-panel.jsx

@@ -0,0 +1,49 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '@mui/material/Typography';
+
+import { StyledControlPanel } from 'src/components/map';
+
+// ----------------------------------------------------------------------
+
+const EVENT_NAMES = ['onDragStart', 'onDrag', 'onDragEnd'];
+
+function round5(value) {
+  return (Math.round(value * 1e5) / 1e5).toFixed(5);
+}
+
+// ----------------------------------------------------------------------
+
+function ControlPanel({ events = {} }) {
+  return (
+    <StyledControlPanel>
+      {EVENT_NAMES.map((event) => {
+        const lngLat = events[event];
+
+        return (
+          <div key={event}>
+            <Typography variant="subtitle2" sx={{ color: 'common.white' }}>
+              {event}:
+            </Typography>
+
+            {lngLat ? (
+              <Typography variant="subtitle2" sx={{ color: 'primary.main' }}>
+                {`${round5(lngLat.lng)}, ${round5(lngLat.lat)}`}
+              </Typography>
+            ) : (
+              <Typography variant="body2" component="em" sx={{ color: 'error.main' }}>
+                null
+              </Typography>
+            )}
+          </div>
+        );
+      })}
+    </StyledControlPanel>
+  );
+}
+
+ControlPanel.propTypes = {
+  events: PropTypes.object,
+};
+export default memo(ControlPanel);

package/minimal/src/sections/_examples/extra/map-view/draggable-markers/index.jsx

@@ -0,0 +1,56 @@
+import Map from 'react-map-gl';
+import { memo, useState, useCallback } from 'react';
+
+import { MapMarker, MapControl } from 'src/components/map';
+
+import ControlPanel from './control-panel';
+
+// ----------------------------------------------------------------------
+
+function MapDraggableMarkers({ ...other }) {
+  const [marker, setMarker] = useState({
+    latitude: 40,
+    longitude: -100,
+  });
+
+  const [events, logEvents] = useState({});
+
+  const onMarkerDragStart = useCallback((event) => {
+    logEvents((prevEvents) => ({ ...prevEvents, onDragStart: event.lngLat }));
+  }, []);
+
+  const onMarkerDrag = useCallback((event) => {
+    logEvents((prevEvents) => ({ ...prevEvents, onDrag: event.lngLat }));
+
+    setMarker({
+      longitude: event.lngLat.lng,
+      latitude: event.lngLat.lat,
+    });
+  }, []);
+
+  const onMarkerDragEnd = useCallback((event) => {
+    logEvents((prevEvents) => ({ ...prevEvents, onDragEnd: event.lngLat }));
+  }, []);
+
+  return (
+    <>
+      <Map initialViewState={{ latitude: 40, longitude: -100, zoom: 3.5 }} {...other}>
+        <MapControl />
+
+        <MapMarker
+          longitude={marker.longitude}
+          latitude={marker.latitude}
+          anchor="bottom"
+          draggable
+          onDragStart={onMarkerDragStart}
+          onDrag={onMarkerDrag}
+          onDragEnd={onMarkerDragEnd}
+        />
+      </Map>
+
+      <ControlPanel events={events} />
+    </>
+  );
+}
+
+export default memo(MapDraggableMarkers);

package/minimal/src/sections/_examples/extra/map-view/heatmap/control-panel.jsx

@@ -0,0 +1,91 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+
+import { fDate } from 'src/utils/format-time';
+
+import { StyledControlPanel } from 'src/components/map';
+
+// ----------------------------------------------------------------------
+
+function ControlPanel({
+  startTime,
+  endTime,
+  allDays,
+  selectedTime,
+  onChangeTime,
+  onChangeAllDays,
+}) {
+  const day = 24 * 60 * 60 * 1000;
+
+  const days = Math.round((endTime - startTime) / day);
+
+  const selectedDay = Math.round((selectedTime - startTime) / day);
+
+  const handleChangeDays = (value) => {
+    const daysToAdd = value;
+
+    const newTime = startTime + daysToAdd * day;
+
+    onChangeTime(newTime);
+  };
+
+  return (
+    <StyledControlPanel>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Typography variant="subtitle2" sx={{ color: 'common.white' }}>
+          All Days
+        </Typography>
+
+        <Switch
+          size="small"
+          checked={allDays}
+          onChange={(event) => onChangeAllDays(event.target.checked)}
+        />
+      </Box>
+
+      <br />
+
+      <Typography
+        gutterBottom
+        variant="body2"
+        sx={{ color: allDays ? 'text.disabled' : 'common.white' }}
+      >
+        Each Day: {fDate(selectedTime)}
+      </Typography>
+
+      <Slider
+        min={1}
+        step={1}
+        max={days}
+        disabled={allDays}
+        value={selectedDay}
+        onChange={(event, newValue) => {
+          if (typeof newValue === 'number') handleChangeDays(newValue);
+        }}
+      />
+    </StyledControlPanel>
+  );
+}
+
+ControlPanel.propTypes = {
+  allDays: PropTypes.bool,
+  endTime: PropTypes.number,
+  onChangeAllDays: PropTypes.func,
+  onChangeTime: PropTypes.func,
+  selectedTime: PropTypes.number,
+  startTime: PropTypes.number,
+};
+
+export default memo(ControlPanel);

package/minimal/src/sections/_examples/extra/map-view/heatmap/index.jsx

@@ -0,0 +1,94 @@
+import Map, { Layer, Source } from 'react-map-gl';
+import { memo, useMemo, useState, useEffect } from 'react';
+
+import ControlPanel from './control-panel';
+import { heatmapLayer } from './map-style';
+
+// ----------------------------------------------------------------------
+
+function MapHeatmap({ ...other }) {
+  const [allDays, useAllDays] = useState(true);
+
+  const [timeRange, setTimeRange] = useState([0, 0]);
+
+  const [selectedTime, selectTime] = useState(0);
+
+  const [earthquakes, setEarthQuakes] = useState();
+
+  useEffect(() => {
+    fetch('https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson')
+      .then((resp) => resp.json())
+      .then((json) => {
+        const { features } = json;
+
+        const endTime = features[0].properties.time;
+
+        const startTime = features[features.length - 1].properties.time;
+
+        setTimeRange([startTime, endTime]);
+
+        setEarthQuakes(json);
+
+        selectTime(endTime);
+      })
+      .catch((error) => console.error('Could not load data', error));
+  }, []);
+
+  const data = useMemo(
+    () => (allDays ? earthquakes : filterFeaturesByDay(earthquakes, selectedTime)),
+    [earthquakes, allDays, selectedTime]
+  );
+
+  return (
+    <>
+      <Map
+        initialViewState={{
+          latitude: 40,
+          longitude: -100,
+          zoom: 3,
+        }}
+        {...other}
+      >
+        {data && (
+          <Source type="geojson" data={data}>
+            <Layer {...heatmapLayer} />
+          </Source>
+        )}
+      </Map>
+
+      <ControlPanel
+        startTime={timeRange[0]}
+        endTime={timeRange[1]}
+        selectedTime={selectedTime}
+        allDays={allDays}
+        onChangeTime={selectTime}
+        onChangeAllDays={useAllDays}
+      />
+    </>
+  );
+}
+
+export default memo(MapHeatmap);
+
+// ----------------------------------------------------------------------
+
+function filterFeaturesByDay(featureCollection, time) {
+  const date = new Date(time);
+
+  const year = date.getFullYear();
+
+  const month = date.getMonth();
+
+  const day = date.getDate();
+
+  const features = featureCollection?.features.filter((feature) => {
+    const featureDate = new Date(feature.properties?.time);
+
+    return (
+      featureDate.getFullYear() === year &&
+      featureDate.getMonth() === month &&
+      featureDate.getDate() === day
+    );
+  });
+  return { type: 'FeatureCollection', features };
+}

package/minimal/src/sections/_examples/extra/map-view/heatmap/map-style.js

@@ -0,0 +1,40 @@
+// ----------------------------------------------------------------------
+
+const MAX_ZOOM_LEVEL = 9;
+
+export const heatmapLayer = {
+  id: 'heatmap',
+  maxzoom: MAX_ZOOM_LEVEL,
+  type: 'heatmap',
+  paint: {
+    // Increase the heatmap weight based on frequency and property magnitude
+    'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
+    // Increase the heatmap color weight weight by zoom level
+    // heatmap-intensity is a multiplier on top of heatmap-weight
+    'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, MAX_ZOOM_LEVEL, 3],
+    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
+    // Begin color ramp at 0-stop with a 0-transparancy color
+    // to create a blur-like effect.
+    'heatmap-color': [
+      'interpolate',
+      ['linear'],
+      ['heatmap-density'],
+      0,
+      'rgba(33,102,172,0)',
+      0.2,
+      'rgb(103,169,207)',
+      0.4,
+      'rgb(209,229,240)',
+      0.6,
+      'rgb(253,219,199)',
+      0.8,
+      'rgb(239,138,98)',
+      0.9,
+      'rgb(255,201,101)',
+    ],
+    // Adjust the heatmap radius by zoom level
+    'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, MAX_ZOOM_LEVEL, 20],
+    // Transition from heatmap to circle layer by zoom level
+    'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0],
+  },
+};

package/minimal/src/sections/_examples/extra/map-view/index.jsx

@@ -0,0 +1,183 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import { styled } from '@mui/material/styles';
+import Container from '@mui/material/Container';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+
+import { paths } from 'src/routes/paths';
+
+import { MAPBOX_API } from 'src/config-global';
+import { cities as CITIES } from 'src/_mock/map/cities';
+import { countries as COUNTRIES } from 'src/_mock/map/countries';
+
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+
+import MapHeatmap from './heatmap';
+import MapClusters from './clusters';
+import MapInteraction from './interaction';
+import MapSideBySide from './side-by-side';
+import MapChangeTheme from './change-theme';
+import MapMarkersPopups from './map-markers-popups';
+import MapDraggableMarkers from './draggable-markers';
+import MapViewportAnimation from './viewport-animation';
+import MapGeoJSONAnimation from './map-geo-json-animation';
+import MapHighlightByFilter from './map-highlight-by-filter';
+
+// ----------------------------------------------------------------------
+
+const THEMES = {
+  streets: 'mapbox://styles/mapbox/streets-v11',
+  outdoors: 'mapbox://styles/mapbox/outdoors-v11',
+  light: 'mapbox://styles/mapbox/light-v10',
+  dark: 'mapbox://styles/mapbox/dark-v10',
+  satellite: 'mapbox://styles/mapbox/satellite-v9',
+  satelliteStreets: 'mapbox://styles/mapbox/satellite-streets-v11',
+};
+
+const baseSettings = {
+  mapboxAccessToken: MAPBOX_API,
+  minZoom: 1,
+};
+
+const StyledMapContainer = styled('div')(({ theme }) => ({
+  zIndex: 0,
+  height: 560,
+  overflow: 'hidden',
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  '& .mapboxgl-ctrl-logo, .mapboxgl-ctrl-bottom-right': {
+    display: 'none',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function MapView() {
+  return (
+    <>
+      <Box
+        sx={{
+          py: 5,
+          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
+        }}
+      >
+        <Container>
+          <CustomBreadcrumbs
+            heading="Map"
+            links={[
+              {
+                name: 'Components',
+                href: paths.components,
+              },
+              { name: 'Map' },
+            ]}
+            moreLink={[
+              'http://visgl.github.io/react-map-gl',
+              'http://visgl.github.io/react-map-gl/examples',
+            ]}
+          />
+        </Container>
+      </Box>
+
+      <Container sx={{ my: 10 }}>
+        <Stack spacing={5}>
+          <Card>
+            <CardHeader title="Change Theme" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapChangeTheme {...baseSettings} themes={THEMES} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Markers & Popups" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapMarkersPopups {...baseSettings} data={COUNTRIES} mapStyle={THEMES.light} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Draggable Markers" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapDraggableMarkers {...baseSettings} mapStyle={THEMES.light} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Geojson Animation" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapGeoJSONAnimation {...baseSettings} mapStyle={THEMES.satelliteStreets} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Clusters" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapClusters {...baseSettings} mapStyle={THEMES.light} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Interaction" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapInteraction {...baseSettings} mapStyle={THEMES.light} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Viewport Animation" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapViewportAnimation
+                  {...baseSettings}
+                  data={CITIES.filter((city) => city.state === 'Texas')}
+                  mapStyle={THEMES.light}
+                />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Highlight By Filter" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapHighlightByFilter {...baseSettings} mapStyle={THEMES.light} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Heatmap" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapHeatmap {...baseSettings} mapStyle={THEMES.light} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Side By Side" />
+            <CardContent>
+              <StyledMapContainer>
+                <MapSideBySide {...baseSettings} />
+              </StyledMapContainer>
+            </CardContent>
+          </Card>
+        </Stack>
+      </Container>
+    </>
+  );
+}

package/minimal/src/sections/_examples/extra/map-view/interaction/control-panel.jsx

@@ -0,0 +1,85 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import Switch from '@mui/material/Switch';
+import InputBase from '@mui/material/InputBase';
+import Typography from '@mui/material/Typography';
+import { alpha, styled } from '@mui/material/styles';
+
+import { StyledControlPanel } from 'src/components/map';
+
+// ----------------------------------------------------------------------
+
+const StyledRow = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  textTransform: 'capitalize',
+  justifyContent: 'space-between',
+  color: theme.palette.common.white,
+  '&:not(:last-of-type)': {
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const camelPattern = /(^|[A-Z])[a-z]*/g;
+
+function formatSettingName(name) {
+  return name.match(camelPattern)?.join(' ');
+}
+
+function ControlPanel({ settings, onChange }) {
+  const renderSetting = (name, value) => {
+    switch (typeof value) {
+      case 'boolean':
+        return (
+          <StyledRow key={name}>
+            <Typography variant="body2">{formatSettingName(name)}</Typography>
+            <Switch
+              size="small"
+              checked={value}
+              onChange={(event) => onChange(name, event.target.checked)}
+            />
+          </StyledRow>
+        );
+      case 'number':
+        return (
+          <StyledRow key={name}>
+            <Typography variant="body2">{formatSettingName(name)}</Typography>
+            <InputBase
+              value={value}
+              onChange={(event) => onChange(name, Number(event.target.value))}
+              inputProps={{ type: 'number' }}
+              sx={{
+                '& input': {
+                  py: 0.25,
+                  width: 40,
+                  fontSize: 14,
+                  borderRadius: 0.5,
+                  textAlign: 'center',
+                  color: 'common.white',
+                  bgcolor: (theme) => alpha(theme.palette.grey[500], 0.12),
+                },
+              }}
+            />
+          </StyledRow>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <StyledControlPanel>
+      {Object.keys(settings).map((name) => renderSetting(name, settings[name]))}
+    </StyledControlPanel>
+  );
+}
+
+ControlPanel.propTypes = {
+  onChange: PropTypes.func,
+  settings: PropTypes.object,
+};
+
+export default memo(ControlPanel);