Merge pull request #358 from systemli/add-fit-bounds-functionality

🚸 Set map view to defined point(s)

src/components/message/Message.tsx

@@ -4,7 +4,7 @@ import Moment from 'react-moment'
 import { Message as MessageType } from '../../api/Message'
 import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
-import { replaceMagic } from '../../lib/helper'
+import { replaceMagic } from '../../lib/replaceLinksHelper'
 import MessageModalDelete from './MessageModalDelete'
 import MessageMap from './MessageMap'
 import { Ticker } from '../../api/Ticker'

src/components/message/MessageMap.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react'
 import { GeoJSON, MapContainer, TileLayer } from 'react-leaflet'
 import { Message } from '../../api/Message'
 import { Ticker } from '../../api/Ticker'
+import { leafletOnDataAddFitToBounds } from '../../lib/leafletFitBoundsHelper'
 
 interface Props {
   message: Message
@@ -29,7 +30,12 @@ const MessageMap: FC<Props> = ({ message, ticker }) => {
   return (
     <MapContainer center={position} scrollWheelZoom={false} zoom={7}>
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-      <GeoJSON data={JSON.parse(message.geo_information)} />
+      <GeoJSON
+        data={JSON.parse(message.geo_information)}
+        eventHandlers={{
+          add: leafletOnDataAddFitToBounds,
+        }}
+      />
     </MapContainer>
   )
 }

src/components/message/MessageMapModal.tsx

@@ -5,6 +5,7 @@ import { EditControl } from 'react-leaflet-draw'
 import { Button, Modal } from 'semantic-ui-react'
 import { FeatureCollection, Geometry } from 'geojson'
 import { Ticker } from '../../api/Ticker'
+import { leafletOnDataAddFitToBounds } from '../../lib/leafletFitBoundsHelper'
 
 interface Props {
   callback: (features: FeatureCollection<Geometry, any>) => void
@@ -54,7 +55,12 @@ const MessageMapModal: FC<Props> = props => {
       <Modal.Content style={{ padding: 0 }}>
         <MapContainer center={position} style={{ height: 600 }} zoom={zoom}>
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-          <GeoJSON data={props.map} />
+          <GeoJSON
+            data={props.map}
+            eventHandlers={{
+              add: leafletOnDataAddFitToBounds,
+            }}
+          />
           <FeatureGroup ref={onFeatureGroupUpdate}>
             <EditControl
               draw={{ circle: false, circlemarker: false }}

src/lib/leafletFitBoundsHelper.ts

@@ -0,0 +1,19 @@
+import { LeafletEvent } from 'leaflet'
+
+export const leafletOnDataAddFitToBounds = (event: LeafletEvent) => {
+  const leafletLayer = event.target
+  const features = Object.values(leafletLayer._layers)
+
+  if (
+    features.length === 1 &&
+    // type is currently not defined
+    // @ts-ignore
+    features[0].feature.geometry.type === 'Point'
+  ) {
+    // @ts-ignore
+    const coords = features[0].feature.geometry.coordinates
+    leafletLayer._map.setView([coords[1], coords[0]], 13)
+  } else if (features.length > 1) {
+    leafletLayer._map.fitBounds(leafletLayer.getBounds())
+  }
+}

src/lib/helper.test.ts → src/lib/replaceLinksHelper.test.ts

@@ -1,4 +1,4 @@
-import { replaceMagic } from './helper'
+import { replaceMagic } from './replaceLinksHelper'
 
 describe('helper', function () {
   test('replace links', function () {