// References force this cell to re-evalutate and render markers when the user selection of campaigns changes. // Value of rendered is number of markers currently drawn on map. Markers are removed and redrawn with any invalidation of this cell. renderMarks = { function addStation2Map(feature, options) { var el = document.createElement("div"); el.className = options.class; el.style["background-color"] = options.color; el.style["border"] = options.class === "track" ? "1px gray" : "solid .5px"; el.style["background-opacity"] = options.class === "track" ? 0.2 : 0.8; el.innerHTML = showLabels && feature.properties.time ? "__" + d3.timeFormat("%H:%M")( d3.timeParse("%Y-%m-%dT%H:%M:%SZ")(feature.properties.time) ) + "" : ""; return new mapboxgl.Marker(el) .setLngLat(feature.geometry.coordinates) .setPopup( new mapboxgl.Popup({ offset: 25 }).setHTML( options.class == "station" ? `

${feature.properties.site_code}

Sample Interval: ${ feature.properties.sample_interval } second

Coordinates: ${feature.geometry.coordinates .slice(0, 2) .join(", ")}

Elevation: ${d3.format(",")( feature.geometry.coordinates[2] )} meters

` : `

${d3.timeParse("%Y-%m-%dT%H:%M:%SZ")( feature.properties.time )}

` // TODO ) ) .addTo(map); } for (let i = markers.length - 1; i >= 0; i--) { markers[i].remove(); markers.pop(); } stations.features.forEach((feature) => { markers.push( addStation2Map(feature, { color: stationColor, class: "station" }) ); }); d3.merge([groundTrack], [groundTrack[0]]).forEach((d) => { markers.push( addStation2Map( { type: "Feature", geometry: { type: "Point", coordinates: d }, properties: { time: d.time } }, { color: satelliteColorScale(d.sat), class: "track" } ) ); }); return markers.length; }