/**
 * Code ommits the eventHandlers declaration, 
 * see the Events or Playground sections for handling events on Hotlines
 */
 
import MapWrapper from "./map/MapWrapper";
import { Hotline } from 'react-leaflet-hotline';
 
const datas = [ 
    [ 
        { lat:  55.7612883 , lng:  12.5192078, value: 0 } , 
        { lat:  55.7598755 , lng:  12.5177353, value: 4 } , 
        { lat:  55.7593927 , lng:  12.5170125, value: 5 } , 
        { lat:  55.7587234 , lng:  12.5158659, value: 2 } , 
        { lat:  55.758321 ,  lng:  12.5149273, value: 0 } , 
    ],
    [ 
        { lat:  55.7573451 , lng:  12.5117588, value: 0 } , 
        { lat:  55.7571885 , lng:  12.5109398, value: 1 } , 
        { lat:  55.7570511 , lng:  12.5099903, value: 2 } , 
        { lat:  55.7569649 , lng:  12.5092035, value: 3 } , 
        { lat:  55.7569006 , lng:  12.5084274, value: 4 } , 
    ]
]
 
export default function MultiPolyline() {
    return (
        <MapWrapper>  
            <Hotline 
                data={datas} 
                // (t: any) is a trick here until a new version supports multipolylines better
                getLat={(t: any) => t.lat} 
                getLng={(t: any) => t.lng} 
                getVal={(t: any) => t.value}
                options={{tolerance: 10}}  />
        </MapWrapper>
    )
}