How to use the @conveyal/lonlat function in @conveyal/lonlat

onMapClick = (e: MouseEvent) => {
    const {
      _id,
      comparisonId,
      setRegionalAnalysisOrigin,
      isRegionalAnalysisSamplingDistributionComponentOnMap
    } = this.props
    // if the destination component is already on the map, don't add it - change
    // destination by dragging destination marker
    if (!isRegionalAnalysisSamplingDistributionComponentOnMap) {
      setRegionalAnalysisOrigin({
        regionalAnalysisId: _id,
        comparisonRegionalAnalysisId: comparisonId,
        lonlat: lonlat(e.latlng)
      })
    }
  }

dispatch(geocode(qs.end, (feature) => {
        const position = lonlat(feature.center)
        dispatch([
          setEnd({
            label: qs.end,
            position: lonlat(feature.center)
          }),
          fetchDestinationDataForLonLat(position)
        ])

        if (!qs.start) {
          dispatch(updateMap({centerCoordinates: lonlat.toLeaflet(feature.center)}))
        }
      }))
    }

function getControlPointsForSegments(segments) {
  const controlPoints = []
  for (let i = 0; i < segments.length; i++) {
    if (!segments[i].stopAtStart) {
      controlPoints.push({
        position: lonlat(coordinatesFromSegment(segments[i])),
        index: i
      })
    }

    if (i === segments.length - 1 && !segments[i].stopAtEnd) {
      controlPoints.push({
        position: lonlat(coordinatesFromSegment(segments[i], true)),
        index: i + 1
      })
    }
  }
  return controlPoints
}

_setMapCenter = (feature: Feature) => {
    this.props.setMapCenter(lonlat(feature.geometry.coordinates))
  }

async function geocodeP (p) {
    if (qs[p]) {
      const results = await geocode({
        apiKey: process.env.MAPZEN_SEARCH_KEY,
        boundary: geocoder.boundary,
        focusPoint: geocoder.focusLatlng,
        text: qs[p]
      })
      if (results.features.length > 0) {
        return {
          label: results.features[0].properties.label,
          latlng: lonlat(results.features[0].geometry.coordinates)
        }
      }
    }
  }
  return [await geocodeP('start'), await geocodeP('end')]

dragEnd = (e: Event & {target: LeafletMarker}): void => {
    const {setRegionalAnalysisOrigin, comparisonId, _id} = this.props
    setRegionalAnalysisOrigin({
      regionalAnalysisId: _id,
      comparisonRegionalAnalysisId: comparisonId,
      lonlat: lonlat(e.target.getLatLng())
    })
  }
}

dispatch(geocode(qs.start, (feature) => {
        const originLonlat = lonlat(feature.center)
        dispatch(setStart({
          label: qs.start,
          position: originLonlat
        }))

        dispatch(loadOrigins(origins, originLonlat, currentZoom))
      }))
    } else {

m.on('click', e => {
      const bbox = [
        [e.point.x - 5, e.point.y - 5],
        [e.point.x + 5, e.point.y + 5]
      ]
      const pois = m.queryRenderedFeatures(bbox, {layers: [POI_ID]})
      if (pois.length > 0) {
        const poi = pois[0]
        events.onClick({
          label: poi.properties.label,
          position: lonlat(poi.geometry.coordinates)
        })
      } else {
        events.onClick({position: lonlat(e.lngLat)})
      }
    })
    m.on('moveend', () => events.onMove(lonlat(m.getCenter())))

    m.on('moveend', () => events.onMove(lonlat(m.getCenter())))
    m.on('zoomend', () => events.onZoom(m.getZoom()))

function featureToLocation(f) {
  if (!f) return null
  return {
    label: f.place_name,
    position: lonlat(f.geometry.coordinates)
  }
}