|
10 |
11 | # Usage
12 |
13 | Install "Tuktuk chart plotter" webapp from the Signal K Appstore together
14 | with [@signalk/charts-plugin](https://www.npmjs.com/package/@signalk/charts-plugin).
15 |
16 | Configure charts plugin to server some charts and open the Tuktuk chart plotter in
17 | `{selectedVessel.map(vesselId => (vesselId ? this.renderContent(vesselId) : null))}
37 | }
38 |
39 | renderContent(vesselId) {
40 | const {aisSettings} = this
41 | const {settings} = this.props
42 | const {getVesselAisData} = this.props.connection
43 | const vesselData = getVesselAisData(vesselId)
44 | const classes = settings.map(v => classNames('ais-details', {'menu-visible': v.showMenu}))
45 | return {vesselData.map(data => renderVesselData(data, aisSettings))}
46 | }
47 | }
48 |
49 | function renderVesselData(data, aisSettings) {
50 | function renderDataRow(label, value) {
51 | return (
52 |
53 |
56 | )
57 | }
58 | function renderFormattedDataRow(label, selector, unit, numberFormat, valueFormatter) {
59 | const value = _.get(data, selector)
60 | const formattedValue = valueFormatter ? valueFormatter(value) : value
61 | const valueWithUnit = value !== undefined ? `${numeral(formattedValue).format(numberFormat)} ${unit}` : undefined
62 | return renderDataRow(label, valueWithUnit)
63 | }
64 |
65 | return (
66 | {label}
54 | {value || 'N/A'}
55 |
67 |
88 | )
89 | }
90 |
91 | function initAisData(aisData, settings, aisSettings) {
92 | if (!window.map && window.map) {
93 | throw new Error('Unable to init AIS data, window.map does not exist')
94 | }
95 | const {map} = window
96 | let aisMarkers = {}
97 |
98 | const aisEnabled = settings.map(s => _.get(s, 'ais.enabled', false)).skipDuplicates()
99 | aisEnabled
100 | .not()
101 | .filter(_.identity)
102 | .onValue(() => {
103 | _.each(aisMarkers, marker => marker.remove()) // Remove all markers
104 | aisMarkers = {}
105 | })
106 |
107 | Bacon.interval(60 * 1000, true) // Check for expired AIS targets every 60s
108 | .filter(aisEnabled)
109 | .onValue(() => {
110 | aisMarkers = removeOldVesselMarkers(aisMarkers)
111 | })
112 |
113 | aisSettings
114 | .view(L.prop('selectedVessel'))
115 | .skipDuplicates()
116 | .filter(aisEnabled)
117 | .onValue(selectedVessel => {
118 | highlightSelectedVessel(aisMarkers, selectedVessel)
119 | })
120 |
121 | aisData
122 | .filter(aisEnabled)
123 | .skipDuplicates()
124 | .onValue(vessels => {
125 | _.each(vessels, (data, vesselId) => {
126 | const position = _.get(data, 'navigation.position')
127 | const course = toDegrees(_.get(data, 'navigation.courseOverGroundTrue.value'))
128 | if (aisMarkers[vesselId]) {
129 | updateVesselMarker(aisMarkers[vesselId], {position, course})
130 | } else if (position && course) {
131 | aisMarkers[vesselId] = addVesselMarker(map, vesselId, {position, course}, aisSettings)
132 | }
133 | if (aisMarkers[vesselId]) {
134 | setMarkerTooltip(aisMarkers[vesselId], data)
135 | }
136 | })
137 | })
138 | }
139 |
140 | function updateVesselMarker(marker, {position, course}) {
141 | course && marker.setRotationAngle(course)
142 | position && marker.setLatLng([position.value.latitude, position.value.longitude])
143 | }
144 |
145 | function addVesselMarker(map, vesselId, {position, course}, aisSettings) {
146 | const latlng = [position.value.latitude, position.value.longitude]
147 | const vesselMarker = Leaf.marker(latlng, {
148 | icon: aisTargetMarker,
149 | draggable: false,
150 | zIndexOffset: 980,
151 | rotationOrigin: 'center center',
152 | rotationAngle: course
153 | })
154 | vesselMarker.id = vesselId
155 | vesselMarker.on('click', () => {
156 | aisSettings.view(L.prop('selectedVessel')).set(vesselId)
157 | })
158 | vesselMarker.addTo(map)
159 | return vesselMarker
160 | }
161 |
162 | function setMarkerTooltip(marker, data) {
163 | const name = _.get(data, 'name.value') || data.name || 'Unknown'
164 | const sog = toKnots(_.get(data, 'navigation.speedOverGround.value'))
165 | const course = toDegrees(_.get(data, 'navigation.courseOverGroundTrue.value'))
166 | const formattedSog = numeral(sog).format('0.0')
167 | const formattedCog = numeral(course).format('0')
168 | const tooltip = `
68 |
76 | {_.get(data, 'name', 'Unknown')}
69 | MMSI: {_.get(data, 'mmsi', 'Unknown')}
70 |
75 |
77 | {renderDataRow('Vessel type:', _.get(data, 'design.aisShipType.value.name'))}
78 | {renderDataRow('State:', _.get(data, 'navigation.state.value', 'Unknown'))}
79 |
80 | {renderFormattedDataRow('SOG:', 'navigation.speedOverGround.value', 'kn', '0.0', toKnots)}
81 | {renderFormattedDataRow('COG:', 'navigation.courseOverGroundTrue.value', '°', '0', toDegrees)}
82 |
83 | {renderFormattedDataRow('Length:', 'design.length.value.overall', 'm', '0.0')}
84 | {renderFormattedDataRow('Beam:', 'design.beam.value', 'm', '0.0')}
85 | {renderFormattedDataRow('Draft:', 'design.draft.value.maximum', 'm', '0.0')}
86 |
87 | ${name}
SOG: ${formattedSog} kn
COG: ${formattedCog}
`
169 | marker.bindTooltip(tooltip, {className: 'aisTooltip'})
170 | marker._updatedAt = Date.now()
171 | }
172 |
173 | function removeOldVesselMarkers(currentMarkers) {
174 | const now = Date.now()
175 | const expired = _(currentMarkers)
176 | .toPairs()
177 | .filter(v => now - v[1]._updatedAt > 180 * 1000) // Remove markers if not updated in 3 minutes
178 | .value()
179 | _.each(expired, v => v[1].remove()) // Call Leaflet.Marker.remove()
180 | return _.omit(currentMarkers, _.map(expired, '0'))
181 | }
182 |
183 | function highlightSelectedVessel(markers, selectedVessel) {
184 | _.each(markers, marker => {
185 | if (marker.id === selectedVessel) {
186 | marker.setIcon(selectedAisTargetMarker)
187 | setTimeout(() => marker.closeTooltip(), 1)
188 | } else {
189 | marker.setIcon(aisTargetMarker)
190 | }
191 | })
192 | }
193 |
194 | module.exports = Ais
195 |
--------------------------------------------------------------------------------
/src/client/api.js:
--------------------------------------------------------------------------------
1 | import 'whatwg-fetch'
2 | import Bacon from 'baconjs'
3 |
4 | function checkStatus(response) {
5 | if (response.status >= 200 && response.status < 300) {
6 | return response
7 | } else {
8 | const error = new Error(response.statusText)
9 | error.response = response
10 | throw error
11 | }
12 | }
13 |
14 | function parseJSON(response) {
15 | return response.json()
16 | }
17 |
18 | function get({url}) {
19 | const request = fetch(url, {credentials: 'include'})
20 | .then(checkStatus)
21 | .then(parseJSON)
22 | return Bacon.fromPromise(request)
23 | }
24 |
25 | module.exports = {
26 | get
27 | }
28 |
--------------------------------------------------------------------------------
/src/client/app.js:
--------------------------------------------------------------------------------
1 | import React from 'baret'
2 | import * as L from 'partial.lenses'
3 | import Atom from 'bacon.atom'
4 | import {render} from 'react-dom'
5 | import numeral from 'numeral'
6 | import classNames from 'classnames'
7 | import DragSortableList from 'react-drag-sortable'
8 | import Bacon from 'baconjs'
9 | import _ from 'lodash'
10 | import {
11 | COG,
12 | HDG,
13 | MAX_ZOOM,
14 | MIN_ZOOM,
15 | EXTENSION_LINE_OFF,
16 | EXTENSION_LINE_2_MIN,
17 | EXTENSION_LINE_5_MIN,
18 | EXTENSION_LINE_10_MIN
19 | } from './enums'
20 | import Map from './map'
21 | import Ais from './ais'
22 | import Connection from './data-connection'
23 | import {toNauticalMiles} from './utils'
24 | import InstrumentConfig from './instrument-config'
25 | import fullscreen from './fullscreen'
26 | import {settings, clearSettingsFromLocalStorage} from './settings'
27 | numeral.nullFormat('N/A')
28 | fullscreen(settings)
29 |
30 | const drawObject = Atom({distance: 0, del: false})
31 | const connection = Connection({providers: settings.get().data, settings})
32 |
33 | const Controls = ({settings, connectionState}) => {
34 | return (
35 |
36 |
89 | )
90 | }
91 |
92 | const Instruments = ({settings, data}) => {
93 | const classes = settings.map(v =>
94 | classNames('right-bar-instruments', {visible: v.showInstruments, hidden: !v.showInstruments})
95 | )
96 | const renderSingleInstrument = key => {
97 | const config = InstrumentConfig[key]
98 | if (!config) {
99 | return null
100 | }
101 | return (
102 |
37 | settings.view(L.prop('showMenu')).modify(v => !v)}
42 | />
43 |
44 |
45 | {connectionState.map(state => {
46 | if (state === 'disconnected') {
47 | return
53 | Signal K disconnected
48 | } else {
49 | return null
50 | }
51 | })}
52 |
54 | { settings.view(L.prop('showInstruments')).modify(v => !v)}
60 | />
61 | settings.view(L.prop('follow')).modify(v => !v)}
66 | />
67 | settings.view(L.prop('fullscreen')).modify(v => !v)}
86 | />
87 |
88 |
68 | settings.view(L.prop('zoom')).modify(zoom => Math.min(zoom + 1, MAX_ZOOM))}
73 | />
74 | settings.view(L.prop('zoom')).modify(zoom => Math.max(zoom - 1, MIN_ZOOM))}
79 | />
80 |
81 |
117 |
124 | )
125 | }
126 |
127 | const PathDrawControls = ({settings}) => {
128 | const distance = drawObject
129 | .view(L.prop('distance'))
130 | .map(toNauticalMiles)
131 | .map(v => numeral(v).format('0.0'))
132 | return (
133 |
118 | {settings
119 | .map('.instruments')
120 | .skipDuplicates()
121 | .map(instruments => _.map(instruments, renderSingleInstrument))}
122 |
123 |
134 | settings.view(L.prop('drawMode')).modify(v => !v)}
145 | />
146 |
147 | )
148 | }
149 |
150 | const Instrument = ({value, format = '0.00', className, title, unit}) => {
151 | return (
152 | classNames('path-draw-controls', {enabled: v, disabled: !v}))}>
135 |
138 |
140 | {distance} nm
139 |
153 |
159 | )
160 | }
161 |
162 | const TopBarButton = ({enabled, className, iconClass, onClick}) => {
163 | return (
164 |
169 | )
170 | }
171 |
172 | const MenuCheckbox = ({checked, label, className, onClick}) => {
173 | const classname = checked.subscribe
174 | ? checked.map(v => (v ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked'))
175 | : checked
176 | ? 'icon-checkbox-checked'
177 | : 'icon-checkbox-unchecked'
178 | return (
179 |
183 | )
184 | }
185 |
186 | const MenuSwitch = ({label, valueLabel, className, onClick}) => {
187 | return (
188 |
192 | )
193 | }
194 |
195 | const Menu = ({settings}) => {
196 | function toggleExtensionLine() {
197 | settings.view(L.prop('extensionLine')).modify(v => {
198 | const order = [EXTENSION_LINE_OFF, EXTENSION_LINE_2_MIN, EXTENSION_LINE_5_MIN, EXTENSION_LINE_10_MIN]
199 | return order[(order.indexOf(v) + 1) % 4]
200 | })
201 | }
202 |
203 | return (
204 |
154 |
157 | {title}
155 | {unit}
156 | {value.map(v => numeral(v).format(format))}
158 | classNames('left-bar-menu', {visible: v.showMenu, hidden: !v.showMenu}))}>
205 |
263 | )
264 | }
265 |
266 | const ChartRow = ({provider, onClick}) => {
267 | const {id, name, enabled, description, minzoom, maxzoom} = provider
268 | return (
269 |
206 |
262 |
207 |
208 |
218 | settings
219 | .view(
220 | L.compose(
221 | L.prop('ais'),
222 | L.prop('enabled')
223 | )
224 | )
225 | .modify(v => !v)
226 | }
227 | />
228 | settings.view(L.prop('course')).modify(v => (v === COG ? HDG : COG))}
233 | />
234 |
240 |
241 |
243 |
244 |
246 |
254 |
255 |
256 |
261 |
257 | 
258 | https://github.com/vokkim/tuktuk-chart-plotter
259 |
260 |
258 | https://github.com/vokkim/tuktuk-chart-plotter
259 |
273 |
287 | )
288 | }
289 |
290 | const ChartSettings = ({chartProviders}) => {
291 | const renderProviderRow = provider => {
292 | const onClick = () =>
293 | chartProviders
294 | .view(
295 | L.compose(
296 | L.find(p => p.id === provider.id),
297 | L.prop('enabled')
298 | )
299 | )
300 | .modify(v => !v)
301 | return
274 |
283 | {name}
275 | {description &&{description}
} 276 | {minzoom && 277 | maxzoom && ( 278 |279 | Levels: {minzoom} - {maxzoom} 280 |
281 | )} 282 |
284 |
285 |
286 |
306 | {chartProviders.map(providers => {
307 | if (_.isEmpty(providers)) {
308 | return No charts
309 | }
310 | return _.map(_.sortBy(providers, 'index'), renderProviderRow)
311 | })}
312 |
313 | )
314 | }
315 |
316 | class InstrumentSettings extends React.Component {
317 | constructor(props) {
318 | super(props)
319 | const allConfigs = _.keys(InstrumentConfig)
320 | const initialInstruments = props.instrumentSettings.get()
321 | const initialSortOrder = _.sortBy(allConfigs, key => {
322 | const i = _.indexOf(initialInstruments, key)
323 | return i === -1 ? Number.MAX_VALUE : i
324 | })
325 | this._internalSort = Atom(initialSortOrder)
326 | this.unsub = this._internalSort.onValue(sortOrder => {
327 | this.props.instrumentSettings.modify(instruments => _.sortBy(instruments, key => _.indexOf(sortOrder, key)))
328 | })
329 | }
330 |
331 | componentWillUnmount() {
332 | this.unsub && this.unsub()
333 | }
334 |
335 | render() {
336 | const {_internalSort} = this
337 | const {instrumentSettings} = this.props
338 | const instruments = instrumentSettings.map(instruments => {
339 | const sortOrder = _internalSort.get()
340 | return _.map(sortOrder, key => {
341 | const config = InstrumentConfig[key]
342 | const selected = _.includes(instruments, key)
343 | const content = (
344 |
372 | {instruments.map(list => (
373 | // eslint-disable-next-line react/jsx-key
374 |
377 | )
378 | }
379 | }
380 |
381 | class Accordion extends React.Component {
382 | constructor(props) {
383 | super(props)
384 | this.state = {open: props.openByDefault || false}
385 | }
386 | render() {
387 | const {open} = this.state
388 | const {header, children, className} = this.props
389 | return (
390 |
391 |
397 | )
398 | }
399 | toggleOpen() {
400 | this.setState({open: !this.state.open})
401 | }
402 | }
403 |
404 | const App = (
405 |
392 | {header}
393 |
394 |
395 | {open && {children}
}
396 |
406 |
429 | )
430 |
431 | render(App, document.getElementById('app'))
432 |
--------------------------------------------------------------------------------
/src/client/data-connection.js:
--------------------------------------------------------------------------------
1 | import Bacon from 'baconjs'
2 | import SignalkProvider from './provider-signalk'
3 | import GeolocationProvider from './provider-geolocation'
4 |
5 | function connect({providers, settings}) {
6 | if (providers.length > 1) {
7 | throw 'Only 1 data provider supported for now'
8 | }
9 | if (providers.length === 0) {
10 | return {
11 | connectionState: Bacon.constant('disconnected'),
12 | selfData: Bacon.constant({}),
13 | aisData: Bacon.constant({})
14 | }
15 | }
16 | const provider = providers[0]
17 | if (provider.type === 'signalk') {
18 | return SignalkProvider({address: provider.address, settings})
19 | } else if (provider.type === 'geolocation') {
20 | return GeolocationProvider({settings})
21 | } else {
22 | throw `Unsupported provider ${provider}`
23 | }
24 | }
25 | module.exports = connect
26 |
--------------------------------------------------------------------------------
/src/client/enums.js:
--------------------------------------------------------------------------------
1 | const enums = {
2 | COG: 'COG',
3 | HDG: 'HDG',
4 | EXTENSION_LINE_OFF: 'Off',
5 | EXTENSION_LINE_2_MIN: '2 min',
6 | EXTENSION_LINE_5_MIN: '5 min',
7 | EXTENSION_LINE_10_MIN: '10 min',
8 | MAX_ZOOM: 16,
9 | MIN_ZOOM: 3,
10 | KNOTS_TO_MS: 0.514444,
11 | MS_TO_KNOTS: 1.94384,
12 | M_TO_NM: 0.000539957
13 | }
14 |
15 | module.exports = enums
16 |
--------------------------------------------------------------------------------
/src/client/fullscreen.js:
--------------------------------------------------------------------------------
1 | import screenfull from 'screenfull'
2 | import * as L from 'partial.lenses'
3 |
4 | module.exports = function(settings) {
5 | if (!screenfull.enabled) {
6 | return
7 | }
8 |
9 | settings
10 | .map('.fullscreen')
11 | .skip(1)
12 | .skipDuplicates()
13 | .onValue(val => {
14 | if (val && !screenfull.isFullscreen) {
15 | screenfull.request()
16 | }
17 | if (!val && screenfull.isFullscreen) {
18 | screenfull.exit()
19 | }
20 | })
21 | screenfull.onchange(() => {
22 | settings.view(L.prop('fullscreen')).set(screenfull.isFullscreen)
23 | })
24 | }
25 |
--------------------------------------------------------------------------------
/src/client/instrument-config.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import {toDegrees, toKnots} from './utils'
3 |
4 | const InstrumentConfigs = {
5 | sog: {
6 | dataKey: 'navigation.speedOverGround',
7 | transformFn: toKnots,
8 | className: 'sog',
9 | title: 'SOG',
10 | unit: 'kn'
11 | },
12 | stw: {
13 | dataKey: 'navigation.speedThroughWater',
14 | transformFn: toKnots,
15 | className: 'stw',
16 | title: 'STW',
17 | unit: 'kn'
18 | },
19 | heading: {
20 | dataKey: 'navigation.headingTrue',
21 | transformFn: toDegrees,
22 | className: 'heading',
23 | title: 'HDG',
24 | format: '00',
25 | unit: '°'
26 | },
27 | cog: {
28 | dataKey: 'navigation.courseOverGroundTrue',
29 | transformFn: toDegrees,
30 | className: 'cog',
31 | title: 'COG',
32 | format: '00',
33 | unit: '°'
34 | },
35 | dbt: {
36 | dataKey: 'environment.depth.belowTransducer',
37 | transformFn: _.identity,
38 | className: 'dbt',
39 | title: 'Depth',
40 | format: '0.0',
41 | unit: 'm'
42 | },
43 | tws: {
44 | dataKey: 'environment.wind.speedTrue',
45 | transformFn: _.identity,
46 | className: 'tws',
47 | title: 'TWS',
48 | format: '0.0',
49 | unit: 'm'
50 | },
51 | aws: {
52 | dataKey: 'environment.wind.speedApparent',
53 | transformFn: _.identity,
54 | className: 'aws',
55 | title: 'AWS',
56 | format: '0.0',
57 | unit: 'm'
58 | },
59 | awaSog: {
60 | dataKey: 'environment.wind.angleApparent',
61 | transformFn: toDegrees,
62 | className: 'awa',
63 | title: 'AWA',
64 | format: '0',
65 | unit: '°'
66 | },
67 | awaWater: {
68 | dataKey: 'environment.wind.angleTrueWater',
69 | transformFn: toDegrees,
70 | className: 'awa',
71 | title: 'AWA (STW)',
72 | format: '0',
73 | unit: '°'
74 | }
75 | }
76 |
77 | module.exports = InstrumentConfigs
78 |
--------------------------------------------------------------------------------
/src/client/map.js:
--------------------------------------------------------------------------------
1 | import React from 'baret'
2 | import * as L from 'partial.lenses'
3 | import Bacon from 'baconjs'
4 | import classNames from 'classnames'
5 | import _ from 'lodash'
6 | import * as Leaf from 'leaflet'
7 | import {computeDestinationPoint} from 'geolib'
8 | // eslint-disable-next-line no-unused-vars
9 | import LeafletRotatedMarker from 'leaflet-rotatedmarker'
10 | import api from './api'
11 | import {toDegrees} from './utils'
12 | import {COG, MAX_ZOOM, MIN_ZOOM, EXTENSION_LINE_OFF} from './enums'
13 |
14 | class Map extends React.Component {
15 | componentDidMount() {
16 | initMap(this.props.connection, this.props.settings, this.props.drawObject)
17 | }
18 | render() {
19 | const {settings} = this.props
20 | const classes = settings.map(v =>
21 | classNames('map-wrapper', {'instruments-visible': v.showInstruments, 'menu-visible': v.showMenu})
22 | )
23 | return (
24 |
416 |
418 | )
419 | } else {
420 | return (
421 | Loading ...
417 |
422 |
423 |
425 | )
426 | }
427 | })}
428 |
25 |
26 |
27 | )
28 | }
29 | }
30 |
31 | function initMap(connection, settings, drawObject) {
32 | console.log('Init map')
33 | const initialSettings = settings.get()
34 | const map = Leaf.map('map', {
35 | scrollWheelZoom: initialSettings.follow ? 'center' : true,
36 | zoom: initialSettings.zoom,
37 | zoomControl: false,
38 | minZoom: MIN_ZOOM,
39 | maxZoom: MAX_ZOOM,
40 | center: [0, 0],
41 | attributionControl: false
42 | })
43 | window.map = map
44 | initialSettings.worldBaseChart && addBasemap(map)
45 |
46 | addCharts(map, initialSettings.chartProviders, settings.map('.chartProviders'))
47 | const vesselIcons = createVesselIcons(_.get(initialSettings.data, ['0', 'type']) === 'geolocation')
48 |
49 | const myVessel = Leaf.marker([0, 0], {
50 | icon: resolveIcon(vesselIcons, initialSettings.zoom),
51 | draggable: false,
52 | zIndexOffset: 990,
53 | rotationOrigin: 'center center',
54 | rotationAngle: 0
55 | })
56 | myVessel.addTo(map)
57 | const pointerEnd = Leaf.circle([0, 0], {radius: 20, color: 'red', fillOpacity: 0})
58 | pointerEnd.addTo(map)
59 | const pointer = Leaf.polyline([], {color: 'red'})
60 | pointer.addTo(map)
61 |
62 | const vesselData = Bacon.combineTemplate({
63 | vesselData: connection.selfData,
64 | settings
65 | })
66 | vesselData.onValue(({vesselData, settings}) => {
67 | const position = vesselData['navigation.position']
68 | if (position) {
69 | const newPos = [position.latitude, position.longitude]
70 | myVessel.setLatLng(newPos)
71 | }
72 |
73 | const course =
74 | settings.course === COG ? vesselData['navigation.courseOverGroundTrue'] : vesselData['navigation.headingTrue']
75 | if (course) {
76 | myVessel.setRotationAngle(toDegrees(course))
77 | } else {
78 | myVessel.setRotationAngle(0)
79 | }
80 |
81 | const speed = vesselData['navigation.speedOverGround']
82 | const extensionLineCoordinates = calculateExtensionLine(position, course, speed, settings.extensionLine)
83 | if (extensionLineCoordinates) {
84 | pointer.setLatLngs([extensionLineCoordinates.start, extensionLineCoordinates.end])
85 | pointerEnd.setLatLng(extensionLineCoordinates.end)
86 | } else {
87 | pointer.setLatLngs([[0, 0], [0, 0]])
88 | pointerEnd.setLatLng([0, 0])
89 | }
90 | if (settings.follow && (extensionLineCoordinates || position)) {
91 | const to = extensionLineCoordinates ? extensionLineCoordinates.middle : [position.latitude, position.longitude]
92 | if (map.getCenter().distanceTo(to) > 100) {
93 | map.panTo(to)
94 | }
95 | }
96 | })
97 |
98 | handleDrawPath({map, settings, drawObject})
99 | handleMapZoom()
100 | handleDragAndFollow()
101 | handleInstrumentsToggle()
102 | function handleMapZoom() {
103 | settings
104 | .map('.zoom')
105 | .skipDuplicates()
106 | .onValue(zoom => {
107 | map.setZoom(zoom)
108 | myVessel.setIcon(resolveIcon(vesselIcons, zoom))
109 | if (zoom < 12) {
110 | pointer.setStyle({opacity: 0})
111 | pointerEnd.setStyle({opacity: 0})
112 | } else {
113 | pointer.setStyle({opacity: 1})
114 | pointerEnd.setStyle({opacity: 1})
115 | }
116 | })
117 |
118 | const zoomEnd = Bacon.fromEvent(map, 'zoomend')
119 | zoomEnd.onValue(() => {
120 | settings.view(L.prop('zoom')).set(map.getZoom())
121 | })
122 | }
123 |
124 | function handleDragAndFollow() {
125 | const follow = settings.map('.follow').skipDuplicates()
126 | follow.onValue(f => {
127 | map.options.scrollWheelZoom = f ? 'center' : true
128 | })
129 |
130 | const dragStart = Bacon.fromEvent(map, 'dragstart')
131 | //TODO: How to combine lenses and streams?
132 | dragStart.filter(follow).onValue(() => {
133 | settings.view(L.prop('follow')).modify(v => !v)
134 | })
135 | }
136 |
137 | function handleInstrumentsToggle() {
138 | settings
139 | .map('.showInstruments')
140 | .changes()
141 | .merge(settings.map('.showMenu').changes())
142 | .skipDuplicates()
143 | .delay(250)
144 | .onValue(() => {
145 | map.invalidateSize(true)
146 | })
147 | }
148 | }
149 |
150 | function handleDrawPath({map, settings, drawObject}) {
151 | const pathMarker = Leaf.icon({
152 | iconUrl: 'path-marker.png',
153 | iconSize: [20, 20],
154 | iconAnchor: [10, 10]
155 | })
156 | let path = []
157 | let lastMoveAt = undefined
158 | const del = drawObject.view(L.prop('del'))
159 | const pathPolyline = Leaf.polyline([], {color: '#3e3e86', weight: 5})
160 | pathPolyline.addTo(map)
161 |
162 | Bacon.fromEvent(map, 'click')
163 | .filter(settings.map('.drawMode'))
164 | .filter(e => _.every(path, marker => e.latlng.distanceTo(marker._latlng) > 30))
165 | .filter(() => lastMoveAt === undefined || Date.now() - lastMoveAt > 50) // Do not add new marker if one was just dragged
166 | .map(e => {
167 | const {latlng} = e
168 | return Leaf.marker(latlng, {icon: pathMarker, draggable: true, zIndexOffset: 900})
169 | })
170 | .onValue(marker => {
171 | marker.addTo(map)
172 | path.push(marker)
173 | marker.on('move', redrawPathAndChangeDistance)
174 | redrawPathAndChangeDistance()
175 | })
176 |
177 | function redrawPathAndChangeDistance() {
178 | lastMoveAt = Date.now()
179 | const latlngs = _.map(path, marker => marker._latlng)
180 | pathPolyline.setLatLngs(latlngs)
181 | const distance = _.reduce(
182 | path,
183 | (sum, marker, i) => {
184 | if (i > 0) {
185 | return sum + path[i - 1]._latlng.distanceTo(marker._latlng)
186 | } else {
187 | return 0
188 | }
189 | },
190 | 0
191 | )
192 | drawObject.view(L.prop('distance')).set(distance)
193 | }
194 |
195 | del
196 | .filter(_.identity)
197 | .changes()
198 | .merge(
199 | settings
200 | .map('.drawMode')
201 | .skipDuplicates()
202 | .changes()
203 | )
204 | .onValue(() => {
205 | _.each(path, marker => marker.remove())
206 | path = []
207 | redrawPathAndChangeDistance()
208 | drawObject.view(L.prop('del')).set(false)
209 | })
210 | }
211 |
212 | function addCharts(map, providers, providersP) {
213 | // Initialize charts based on initial providers
214 | const mapLayers = _.map(providers, provider => {
215 | const {index, name, maxzoom, minzoom, tilemapUrl, enabled, type, center} = provider
216 |
217 | if (!_.includes(['tilelayer'], type)) {
218 | console.error(`Unsupported chart type ${type} for chart ${name}`)
219 | return
220 | }
221 | if (!tilemapUrl) {
222 | console.error(`Missing tilemapUrl for chart ${name}`)
223 | return
224 | }
225 | const pane = `chart-${index}`
226 | map.createPane(pane)
227 | const bounds = parseChartBounds(provider)
228 | // 'detectRetina' messes up Leaflet maxNativeZoom, fix with a hack:
229 | const maxNativeZoom = maxzoom ? maxzoom - (Leaf.Browser.retina ? 1 : 0) : undefined
230 | const minNativeZoom = minzoom ? minzoom + (Leaf.Browser.retina ? 1 : 0) : undefined
231 | const layer = Leaf.tileLayer(tilemapUrl, {detectRetina: true, bounds, maxNativeZoom, minNativeZoom, pane})
232 |
233 | if (enabled) {
234 | layer.addTo(map)
235 | if (_.isArray(center) && center.length === 2) {
236 | map.panTo([center[1], center[0]])
237 | } else if (bounds) {
238 | map.fitBounds(bounds)
239 | }
240 | }
241 | return {provider, layer}
242 | })
243 |
244 | // Toggle chart layers on/off based on enabled providers
245 | providersP
246 | .skipDuplicates()
247 | .skip(1)
248 | .onValue(providers => {
249 | _.each(providers, ({enabled, id}) => {
250 | const mapLayer = _.find(mapLayers, ({provider}) => provider.id === id)
251 | if (enabled) {
252 | mapLayer.layer.addTo(map)
253 | } else {
254 | mapLayer.layer.removeFrom(map)
255 | }
256 | })
257 | })
258 | }
259 |
260 | function addBasemap(map) {
261 | map.createPane('basemap')
262 | const basemapStyle = {
263 | stroke: false,
264 | fill: true,
265 | fillColor: '#fafafa',
266 | fillOpacity: 1
267 | }
268 | const baseMap = api.get({url: 'world-base.geo.json'})
269 | baseMap.onError(e => console.log('Unable to fetch base map', e))
270 | baseMap.onValue(worldBaseGeoJSON =>
271 | Leaf.geoJson(worldBaseGeoJSON, {clickable: false, style: basemapStyle, pane: 'basemap'}).addTo(map)
272 | )
273 | }
274 |
275 | function calculateExtensionLine(position, course, speed, extensionLineSetting) {
276 | if (extensionLineSetting === EXTENSION_LINE_OFF) {
277 | return undefined
278 | }
279 | const time = 60 * parseInt(extensionLineSetting)
280 | if (position && position.latitude && position.longitude && course && speed > 0.5) {
281 | const distance = speed * time // Speed in m/s
282 | const start = [position.latitude, position.longitude]
283 | const destination = computeDestinationPoint(
284 | {lat: position.latitude, lon: position.longitude},
285 | distance,
286 | toDegrees(course)
287 | )
288 | const middle = computeDestinationPoint(
289 | {lat: position.latitude, lon: position.longitude},
290 | distance / 2,
291 | toDegrees(course)
292 | )
293 | return {
294 | start,
295 | middle: [middle.latitude, middle.longitude],
296 | end: [destination.latitude, destination.longitude]
297 | }
298 | }
299 | return undefined
300 | }
301 |
302 | function createVesselIcons(shouldUseRoundIcon) {
303 | if (shouldUseRoundIcon) {
304 | const icon = Leaf.icon({
305 | iconUrl: 'vessel-marker-round.png',
306 | iconSize: [30, 30],
307 | iconAnchor: [15, 15]
308 | })
309 | return {large: icon, medium: icon, small: icon}
310 | }
311 | const large = Leaf.icon({
312 | iconUrl: 'vessel-large.png',
313 | iconSize: [20, 50],
314 | iconAnchor: [10, 25]
315 | })
316 |
317 | const medium = Leaf.icon({
318 | iconUrl: 'vessel-medium.png',
319 | iconSize: [16, 40],
320 | iconAnchor: [8, 20]
321 | })
322 |
323 | const small = Leaf.icon({
324 | iconUrl: 'vessel-small.png',
325 | iconSize: [12, 30],
326 | iconAnchor: [6, 15]
327 | })
328 | return {large, medium, small}
329 | }
330 |
331 | function resolveIcon(icons, zoom) {
332 | if (zoom < 7) {
333 | return icons.small
334 | } else if (zoom < 12) {
335 | return icons.medium
336 | } else {
337 | return icons.large
338 | }
339 | }
340 |
341 | function parseChartBounds(provider) {
342 | if (!provider.bounds) {
343 | return undefined
344 | }
345 | if (!_.isArray(provider.bounds) || provider.bounds.length !== 4) {
346 | throw new Error('Unrecognized bounds format: ' + JSON.stringify(provider.bounds))
347 | }
348 |
349 | const corner1 = Leaf.latLng(provider.bounds[1], provider.bounds[0])
350 | const corner2 = Leaf.latLng(provider.bounds[3], provider.bounds[2])
351 | const bounds = Leaf.latLngBounds(corner1, corner2)
352 | if (!bounds.isValid()) {
353 | throw new Error('Invalid bounds: ' + JSON.stringify(provider.bounds))
354 | }
355 | return bounds
356 | }
357 |
358 | module.exports = Map
359 |
--------------------------------------------------------------------------------
/src/client/provider-geolocation.js:
--------------------------------------------------------------------------------
1 | import Bacon from 'baconjs'
2 | import {toRadians} from './utils'
3 |
4 | function connect() {
5 | const rawStream = new Bacon.Bus()
6 |
7 | if (!navigator.geolocation || !navigator.geolocation.watchPosition) {
8 | throw 'Missing geolocation API'
9 | }
10 | const success = event => {
11 | const position = {
12 | path: 'navigation.position',
13 | latitude: event.coords.latitude,
14 | longitude: event.coords.longitude
15 | }
16 | const sog = {
17 | path: 'navigation.speedOverGround',
18 | value: event.coords.speed
19 | }
20 | const heading = {
21 | path: 'navigation.headingTrue',
22 | value: toRadians(event.coords.heading)
23 | }
24 | const vesselData = {
25 | 'navigation.position': position,
26 | 'navigation.speedOverGround': sog,
27 | 'navigation.headingTrue': heading
28 | }
29 | rawStream.push(vesselData)
30 | }
31 | const error = err => {
32 | console.log('Geolocation error', err)
33 | }
34 |
35 | const options = {
36 | enableHighAccuracy: true,
37 | maximumAge: 5000
38 | }
39 |
40 | navigator.geolocation.watchPosition(success, error, options)
41 |
42 | return {
43 | connectionState: Bacon.constant('connected'),
44 | selfData: rawStream,
45 | aisData: Bacon.constant({})
46 | }
47 | }
48 |
49 | module.exports = connect
50 |
--------------------------------------------------------------------------------
/src/client/provider-signalk.js:
--------------------------------------------------------------------------------
1 | import Bacon from 'baconjs'
2 | import _ from 'lodash'
3 | import api from './api'
4 | import SignalK from '@signalk/client'
5 |
6 | let selfId // TODO: Nasty, get rid of this mutate
7 |
8 | const isSelf = id => {
9 | return selfId && (selfId === id || selfId === `vessels.${id}`)
10 | }
11 |
12 | function connect({address, settings}) {
13 | const rawStream = new Bacon.Bus()
14 | const connectionStateBus = new Bacon.Bus()
15 | const connectionState = connectionStateBus.toProperty('connecting')
16 |
17 | const onMessage = msg => {
18 | if (!selfId && msg && msg.self && _.isString(msg.self)) {
19 | selfId = msg.self
20 | }
21 | rawStream.push(msg)
22 | }
23 | const onConnect = c => {
24 | connectionStateBus.push('connected')
25 | c.send({
26 | context: 'vessels.self',
27 | subscribe: [
28 | {
29 | path: '*',
30 | format: 'delta',
31 | policy: 'ideal',
32 | minPeriod: 3000
33 | }
34 | ]
35 | })
36 |
37 | c.send({
38 | context: 'vessels.*',
39 | subscribe: [{path: '*', period: 10000}]
40 | })
41 | console.log(`SignalK connected to ${parseAddress(address)}`)
42 | }
43 | const onDisconnect = c => {
44 | c && c.close && c.close()
45 | rawStream.end()
46 | connectionStateBus.push('disconnected')
47 | console.log('SignalK disconnected')
48 | }
49 | const onError = e => {
50 | rawStream.push(new Bacon.Error(e))
51 | onDisconnect()
52 | }
53 |
54 | const signalk = new SignalK.Client()
55 | signalk.connectDelta(parseAddress(address), onMessage, onConnect, onDisconnect, onError, onDisconnect, 'none')
56 | const selfStream = rawStream.filter(msg => isSelf(msg.context))
57 |
58 | const updates = selfStream.map(msg => {
59 | return _(msg.updates)
60 | .map(u =>
61 | _.map(u.values, v => {
62 | return {
63 | timestamp: u.timestamp,
64 | path: v.path,
65 | value: v.value
66 | }
67 | })
68 | )
69 | .flatten()
70 | .value()
71 | })
72 |
73 | const selfData = updates
74 | .filter(values => !_.isEmpty(values))
75 | .scan({}, (sum, values) => {
76 | const pairs = _.map(values, v => [v.path, v.value])
77 | return _.assign({}, sum, _.fromPairs(pairs))
78 | })
79 | .debounceImmediate(1000)
80 |
81 | const {aisData, getVesselAisData} = parseAISData({selfStream, address, rawStream, settings})
82 |
83 | return {
84 | connectionState: connectionState,
85 | rawStream,
86 | selfData,
87 | aisData,
88 | getVesselAisData
89 | }
90 | }
91 |
92 | function parseAISData({selfStream, address, rawStream, settings}) {
93 | const hasSelf = selfStream
94 | .take(1)
95 | .map(true)
96 | .toProperty(false)
97 | const aisEnabled = settings.map(s => _.get(s, 'ais.enabled', false)).skipDuplicates()
98 | //TODO: Subscribe / unsubscribe for AIS vessels
99 | const aisStream = rawStream
100 | .filter(aisEnabled)
101 | .map(singleDeltaMessageToAisData)
102 | .bufferWithTimeOrCount(1000, 100)
103 | .map(deltas => _.reduce(deltas, _.merge, {}))
104 | const fullAisData = Bacon.combineTemplate({
105 | hasSelf,
106 | aisEnabled
107 | })
108 | .flatMapLatest(({hasSelf, aisEnabled}) => {
109 | return hasSelf && aisEnabled ? getInitialAISData(address).concat(aisStream) : Bacon.once()
110 | })
111 | .scan({delta: {}, full: {}}, (previous, data) => {
112 | const full = _.merge({}, previous.full, _.omitBy(data, (value, key) => isSelf(key)))
113 | const delta = _.pick(full, _.keys(data))
114 | return {delta, full}
115 | })
116 |
117 | const deltaAisData = fullAisData.map('.delta').filter(d => !_.isEmpty(d))
118 |
119 | function getVesselAisData(vesselId) {
120 | return fullAisData
121 | .map(data => data.full[vesselId])
122 | .filter(_.identity)
123 | .skipDuplicates(_.isEqual)
124 | }
125 |
126 | return {
127 | aisData: deltaAisData,
128 | getVesselAisData
129 | }
130 | }
131 |
132 | function singleDeltaMessageToAisData(msg) {
133 | if (!msg.context) {
134 | return {} // Not a proper SK delta message
135 | }
136 | const data = _.reduce(
137 | msg.updates,
138 | (sum, update) => {
139 | const {timestamp} = update
140 | _.each(update.values, value => {
141 | _.set(sum, value.path + '.value', value.value)
142 | _.set(sum, value.path + '.timestamp', timestamp)
143 | })
144 | return sum
145 | },
146 | {}
147 | )
148 | return {[msg.context.substring(8)]: data}
149 | }
150 |
151 | function getInitialAISData(address) {
152 | const protocol = window.location.protocol
153 | const url = `${protocol}//${parseAddress(address)}/signalk/v1/api/`
154 | return api.get({url}).map('.vessels')
155 | }
156 |
157 | function parseAddress(address) {
158 | if (_.isEmpty(address)) {
159 | throw 'Empty SignalK address!'
160 | }
161 | if (_.isEmpty(address.split(':')[0])) {
162 | // Relative address such as ':80'
163 | return `${window.location.hostname}:${address.split(':')[1]}`
164 | } else {
165 | return address
166 | }
167 | }
168 |
169 | module.exports = connect
170 |
--------------------------------------------------------------------------------
/src/client/settings.js:
--------------------------------------------------------------------------------
1 | import Atom from 'bacon.atom'
2 | import Bacon from 'baconjs'
3 | import Store from 'store'
4 | import _ from 'lodash'
5 | import api from './api'
6 | import * as L from 'partial.lenses'
7 | import InstrumentConfig from './instrument-config'
8 | import {COG, EXTENSION_LINE_5_MIN, MIN_ZOOM, MAX_ZOOM} from './enums'
9 | const LOCAL_STORAGE_KEY = 'plotter-settings'
10 | const defaultSettings = {
11 | zoom: 13,
12 | fullscreen: false,
13 | drawMode: false,
14 | course: COG,
15 | follow: true,
16 | showMenu: false,
17 | extensionLine: EXTENSION_LINE_5_MIN,
18 | showInstruments: true,
19 | ais: {
20 | enabled: false
21 | },
22 | worldBaseChart: true,
23 | chartProviders: [],
24 | loadingChartProviders: true,
25 | data: [],
26 | instruments: _.keys(InstrumentConfig)
27 | }
28 |
29 | const fromLocalStorage = Store.get(LOCAL_STORAGE_KEY) || {}
30 |
31 | const charts = _.get(window.INITIAL_SETTINGS, 'charts', [])
32 | const settings = Atom(_.assign(defaultSettings, _.omit(window.INITIAL_SETTINGS, ['charts']) || {}, fromLocalStorage))
33 |
34 | const chartProviders = Bacon.fromArray(charts)
35 | .flatMap(provider => {
36 | switch (provider.type) {
37 | case 'local':
38 | return fetchLocalCharts(provider, fromLocalStorage.hiddenChartProviders)
39 | case 'signalk':
40 | return fetchSignalKCharts(provider, fromLocalStorage.hiddenChartProviders)
41 | default:
42 | return Bacon.once(provider)
43 | }
44 | })
45 | .fold([], _.concat)
46 |
47 | chartProviders.onValue(charts => {
48 | settings.view(L.prop('chartProviders')).set(charts)
49 | settings.view(L.prop('loadingChartProviders')).set(false)
50 | })
51 |
52 | chartProviders.onError(e => {
53 | console.error('Error fetching chart providers')
54 | console.error(e)
55 | })
56 |
57 | settings
58 | .map(v => {
59 | const hiddenChartProviders = v.chartProviders ? _.filter(v.chartProviders, p => !p.enabled) : []
60 | return Object.assign({}, v, {hiddenChartProviders: _.map(hiddenChartProviders, 'id')})
61 | })
62 | .map(v => _.omit(v, ['chartProviders', 'drawMode', 'data', 'loadingChartProviders', 'zoom']))
63 | .skipDuplicates((a, b) => JSON.stringify(a) === JSON.stringify(b))
64 | .onValue(v => {
65 | Store.set(LOCAL_STORAGE_KEY, v)
66 | })
67 |
68 | function fetchLocalCharts(provider, hiddenChartProviders) {
69 | const url = '/charts/'
70 | return api
71 | .get({url})
72 | .map(_.values)
73 | .flatMap(charts => {
74 | return Bacon.fromArray(
75 | _.map(charts, chart => {
76 | const from = _.pick(chart, [
77 | 'tilemapUrl',
78 | 'index',
79 | 'type',
80 | 'name',
81 | 'minzoom',
82 | 'maxzoom',
83 | 'center',
84 | 'description',
85 | 'format',
86 | 'bounds'
87 | ])
88 | return _.merge(
89 | {
90 | id: chart.name,
91 | index: provider.index || 0,
92 | enabled: isChartHidden(hiddenChartProviders, chart.name)
93 | },
94 | from
95 | )
96 | })
97 | )
98 | })
99 | }
100 |
101 | function fetchSignalKCharts(provider, hiddenChartProviders) {
102 | const address = parseChartProviderAddress(provider.address)
103 | const url = `${address}/signalk/v1/api/resources/charts`
104 | return api
105 | .get({url})
106 | .map(_.values)
107 | .flatMap(charts => {
108 | return Bacon.fromArray(
109 | _.map(charts, chart => {
110 | const tilemapUrl = chart.tilemapUrl.startsWith('http') ? chart.tilemapUrl : address + chart.tilemapUrl
111 | const from = _.pick(chart, [
112 | 'type',
113 | 'name',
114 | 'minzoom',
115 | 'maxzoom',
116 | 'center',
117 | 'description',
118 | 'format',
119 | 'bounds'
120 | ])
121 | return _.merge(
122 | {
123 | id: chart.name,
124 | tilemapUrl,
125 | minzoom: MIN_ZOOM,
126 | maxzoom: MAX_ZOOM,
127 | index: provider.index || 0,
128 | enabled: !isChartHidden(hiddenChartProviders, chart.name)
129 | },
130 | from
131 | )
132 | })
133 | )
134 | })
135 | }
136 |
137 | const isChartHidden = (hiddenChartProviders, requestedChartId) => {
138 | return !!_.find(hiddenChartProviders, id => id === requestedChartId)
139 | }
140 |
141 | function parseChartProviderAddress(address) {
142 | if (_.isEmpty(address)) {
143 | throw 'Empty chart provider address!'
144 | }
145 | if (_.isEmpty(address.split(':')[0])) {
146 | // Relative address such as ':80'
147 | return `${window.location.protocol}//${window.location.hostname}:${address.split(':')[1]}`
148 | } else {
149 | return address
150 | }
151 | }
152 |
153 | function clearSettingsFromLocalStorage() {
154 | Store.remove(LOCAL_STORAGE_KEY)
155 | }
156 |
157 | module.exports = {
158 | settings,
159 | clearSettingsFromLocalStorage
160 | }
161 |
--------------------------------------------------------------------------------
/src/client/utils.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 | import {MS_TO_KNOTS, M_TO_NM} from './enums'
3 |
4 | function toDegrees(angle) {
5 | if (_.isFinite(angle)) {
6 | return angle * (180 / Math.PI)
7 | } else {
8 | return null
9 | }
10 | }
11 |
12 | function toRadians(angle) {
13 | if (_.isFinite(angle)) {
14 | return (angle * Math.PI) / 180
15 | } else {
16 | return null
17 | }
18 | }
19 |
20 | function toKnots(speed) {
21 | if (_.isFinite(speed)) {
22 | return speed * MS_TO_KNOTS
23 | } else {
24 | return null
25 | }
26 | }
27 |
28 | function toNauticalMiles(distance) {
29 | if (_.isFinite(distance)) {
30 | return distance * M_TO_NM
31 | } else {
32 | return null
33 | }
34 | }
35 |
36 | module.exports = {
37 | toDegrees,
38 | toRadians,
39 | toKnots,
40 | toNauticalMiles
41 | }
42 |
--------------------------------------------------------------------------------
/src/server/chart-routes.js:
--------------------------------------------------------------------------------
1 | import express from 'express'
2 | import _ from 'lodash'
3 | import Bacon from 'baconjs'
4 | import path from 'path'
5 | import settings from './settings'
6 | import MBTiles from '@mapbox/mbtiles'
7 | import url from 'url'
8 |
9 | const api = express.Router()
10 |
11 | let chartProviders = {}
12 | refreshChartProviders().onValue(providers => console.log(`Initial chart providers: ${_.keys(providers).length}`))
13 |
14 | api.get('/charts/', (req, res) => {
15 | const providers = refreshChartProviders()
16 | providers.onError(err => {
17 | console.error('Error refreshing chart providers:', err)
18 | res.sendStatus(500)
19 | })
20 |
21 | providers.onValue(providers => {
22 | const sanitized = _.map(_.values(providers), provider => {
23 | return _.merge(_.omit(provider, ['db']), {
24 | tilemapUrl: `/charts/${provider.name}/{z}/{x}/{y}`,
25 | type: 'tilelayer'
26 | })
27 | })
28 | res.send(sanitized)
29 | })
30 | })
31 |
32 | api.get('/charts/:map/:z/:x/:y', (req, res) => {
33 | const {map, z, x, y} = req.params
34 | const provider = chartProviders[map]
35 | if (!provider) {
36 | res.sendStatus(404)
37 | return
38 | }
39 | provider.db.getTile(z, x, y, (err, tile, headers) => {
40 | if (err && err.message && err.message === 'Tile does not exist') {
41 | res.sendStatus(404)
42 | } else if (err) {
43 | console.error(`Error fetching tile ${map}/${z}/${x}/${y}:`, err)
44 | res.sendStatus(500)
45 | } else {
46 | headers['Cache-Control'] = 'public, max-age=7776000' // 90 days
47 | res.writeHead(200, headers)
48 | res.end(tile)
49 | }
50 | })
51 | })
52 |
53 | function refreshChartProviders() {
54 | const providers = Bacon.fromNodeCallback(MBTiles.list, settings.chartsPath)
55 | .flatMap(files => Bacon.combineAsArray(_.map(files, chartFileToProvider)))
56 | .map(providers => {
57 | return _.reduce(
58 | providers,
59 | (sum, p) => {
60 | sum[p.name] = p
61 | return sum
62 | },
63 | {}
64 | )
65 | })
66 | .doAction(providers => {
67 | chartProviders = providers
68 | })
69 |
70 | return providers
71 | }
72 |
73 | function chartFileToProvider(uri) {
74 | const {pathname} = url.parse(uri)
75 | const name = sanitizeMapName(path.parse(pathname).name)
76 | const bus = new Bacon.Bus() // Must use Bus for now, since `new MBTiles` is not so easily Baconized
77 | new MBTiles(pathname, (err, db) => {
78 | if (err) {
79 | bus.push(new Bacon.Error(err))
80 | } else {
81 | bus.push(db)
82 | }
83 | bus.end()
84 | })
85 | return bus.flatMap(db => {
86 | return Bacon.fromNodeCallback(db, 'getInfo').map(metadata => {
87 | const fromMetadata = _.pick(metadata, [
88 | 'bounds',
89 | 'minzoom',
90 | 'maxzoom',
91 | 'type',
92 | 'format',
93 | 'attribution',
94 | 'center',
95 | 'description',
96 | 'scheme'
97 | ])
98 | return _.merge({name, file: pathname, db}, fromMetadata)
99 | })
100 | })
101 | }
102 |
103 | function sanitizeMapName(name) {
104 | return _.snakeCase(_.deburr(name))
105 | }
106 |
107 | module.exports = api
108 |
--------------------------------------------------------------------------------
/src/server/server.js:
--------------------------------------------------------------------------------
1 | import express from 'express'
2 | import Bacon from 'baconjs'
3 | import fs from 'fs'
4 | import path from 'path'
5 | import settings from './settings'
6 | import chartRoutes from './chart-routes'
7 |
8 | const app = express()
9 |
10 | app.get('/', function(req, res) {
11 | const clientConfig = Bacon.fromNodeCallback(fs, 'readFile', settings.clientConfigFile)
12 | .flatMap(config => {
13 | try {
14 | return Bacon.once(JSON.parse(config))
15 | } catch (e) {
16 | return Bacon.once(new Bacon.Error(e))
17 | }
18 | })
19 | .flatMapError(err => {
20 | if (err.code === 'ENOENT') {
21 | console.log('No client config file found')
22 | return Bacon.once({})
23 | } else {
24 | console.error('Error loading client config file: ', err)
25 | return Bacon.once({})
26 | }
27 | })
28 | clientConfig.onValue(config => {
29 | res.send(createIndexHtml({config}))
30 | })
31 | })
32 |
33 | app.use('/', express.static(path.join(__dirname, '../../public')))
34 |
35 | app.listen(settings.port, function() {
36 | console.log(`Listening ${settings.port}`)
37 | })
38 |
39 | app.use(chartRoutes)
40 |
41 | function createIndexHtml({config}) {
42 | return `
43 |
44 |
45 |
46 |