diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx index 523add39..891121d6 100644 --- a/src/components/message/Message.tsx +++ b/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' diff --git a/src/components/message/MessageMap.tsx b/src/components/message/MessageMap.tsx index 40740a03..85e5d46b 100644 --- a/src/components/message/MessageMap.tsx +++ b/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 = ({ message, ticker }) => { return ( - + ) } diff --git a/src/components/message/MessageMapModal.tsx b/src/components/message/MessageMapModal.tsx index 0691c755..d7b22956 100644 --- a/src/components/message/MessageMapModal.tsx +++ b/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) => void @@ -54,7 +55,12 @@ const MessageMapModal: FC = props => { - + { + 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()) + } +} diff --git a/src/lib/helper.test.ts b/src/lib/replaceLinksHelper.test.ts similarity index 95% rename from src/lib/helper.test.ts rename to src/lib/replaceLinksHelper.test.ts index e9f2d690..381ebe41 100644 --- a/src/lib/helper.test.ts +++ b/src/lib/replaceLinksHelper.test.ts @@ -1,4 +1,4 @@ -import { replaceMagic } from './helper' +import { replaceMagic } from './replaceLinksHelper' describe('helper', function () { test('replace links', function () { diff --git a/src/lib/helper.ts b/src/lib/replaceLinksHelper.ts similarity index 100% rename from src/lib/helper.ts rename to src/lib/replaceLinksHelper.ts