mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-23 21:44:19 +00:00
51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
import React, { useContext, useMemo } from "react"
|
|
import BoxMap from "../base/BoxMap"
|
|
import { Marker, Popup } from "react-leaflet"
|
|
import Coordinates from "../../objects/Coordinates"
|
|
import ContextRepositoryViewer from "../../contexts/ContextRepositoryViewer"
|
|
import useStrings from "../../hooks/useStrings"
|
|
|
|
|
|
/**
|
|
* A {@link BoxMap} displaying the displayed tweets of a RepositoryViewer as {@link Marker}s.
|
|
*
|
|
* @param props - Additional props to pass to the box.
|
|
* @returns {JSX.Element}
|
|
* @constructor
|
|
*/
|
|
export default function BoxVisualizationMap({ ...props }) {
|
|
const strings = useStrings()
|
|
const { tweets, mapViewHook } = useContext(ContextRepositoryViewer)
|
|
|
|
const markers = useMemo(
|
|
() => {
|
|
return tweets.filter(tweet => tweet.location).map(tweet => {
|
|
if(!tweet.location) {
|
|
return null
|
|
}
|
|
|
|
const coords = Coordinates.fromCrawlerString(tweet.location)
|
|
|
|
return (
|
|
<Marker key={tweet["snowflake"]} position={coords.toLatLng()}>
|
|
<Popup>
|
|
<p>
|
|
{tweet["content"]}
|
|
</p>
|
|
<p>
|
|
— <a href={`https://twitter.com/${tweet["poster"]}/status/${tweet["snowflake"]}`}>@{tweet["poster"]}</a>
|
|
</p>
|
|
</Popup>
|
|
</Marker>
|
|
)
|
|
})
|
|
},
|
|
[tweets],
|
|
)
|
|
|
|
return (
|
|
<BoxMap header={strings.visualMap} mapViewHook={mapViewHook} {...props}>
|
|
{markers}
|
|
</BoxMap>
|
|
)
|
|
}
|