diff --git a/src/components/map/hurricane-track.js b/src/components/map/hurricane-track.js index b8d4b4d..33bf6f4 100644 --- a/src/components/map/hurricane-track.js +++ b/src/components/map/hurricane-track.js @@ -8,6 +8,8 @@ import { } from "@utils/hurricane/track"; import { useLayers } from '@context'; import { getNamespacedEnvParam } from "@utils"; +import { useSettings } from '@context'; +import { mphToMps, mphToKnots } from '@utils/map-utils'; export const HurricaneTrackGeoJson = ({index}) => { @@ -17,6 +19,11 @@ export const HurricaneTrackGeoJson = ({index}) => { } = useLayers(); const [hurricaneData, setHurricaneData] = useState(); + const { + unitsType, + speedType, +} = useSettings(); + function coneStyle() { return { fillColor: '#858585', @@ -84,9 +91,21 @@ export const HurricaneTrackGeoJson = ({index}) => { const onEachHurrFeature = (feature, layer) => { if (feature.properties && feature.properties.time_utc) { + + // set wind speed to default units setting values + let windSpeed = mphToMps(feature.properties.max_wind_speed_mph); + let unitStr = "mps"; + // now check to see the imperial setting has been selected instead + if(unitsType.current === "imperial") { + windSpeed = (speedType.current === "mph") ? feature.properties.max_wind_speed_mph + : + mphToKnots(feature.properties.max_wind_speed_mph); + unitStr = speedType.current; + } + const popupContent = feature.properties.storm_name + ": " + feature.properties.time_utc + ", " + - feature.properties.max_wind_speed_mph + "mph"; + windSpeed.toFixed(1) + unitStr; layer.on("mouseover", function (e) { this.bindPopup(popupContent).openPopup(e.latlng); diff --git a/src/components/trays/settings/colormaps/colormap-slider.js b/src/components/trays/settings/colormaps/colormap-slider.js index 4532000..ba1df8c 100644 --- a/src/components/trays/settings/colormaps/colormap-slider.js +++ b/src/components/trays/settings/colormaps/colormap-slider.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import SldStyleParser from 'geostyler-sld-parser'; import { Slider, Box } from '@mui/joy'; import { useSettings } from '@context'; -import { restoreColorMapType } from '@utils/map-utils'; -import { maxSliderValues } from './utils'; +import { restoreColorMapType, feetToMeters, knotsToMps, mphToMps } from '@utils/map-utils'; +import { getFloatNumberFromLabel, maxSliderValues, sliderSteps, sliderMarkSteps } from './utils'; const MAXELE = 'maxele'; const MAXWVEL = 'maxwvel'; @@ -20,36 +20,37 @@ export const ColormapSlider = ({style}) => { const { mapStyle, + unitsType, + speedType, } = useSettings(); const sldParser = new SldStyleParser(); - // set the correct slider values for the appropriate style + // set the correct slider values for the appropriate style and unit type const setSliderParams = (style) => { - let max_slider_value = 0; let slider_step = 0; const marks = []; - if (style.name.includes("maxwvel")) { - max_slider_value = maxSliderValues[MAXWVEL]; - slider_step = 1; - for (let i = 0; i <= max_slider_value; i+=10) { + if (style.name.includes(MAXWVEL)) { + max_slider_value = maxSliderValues[MAXWVEL][unitsType.current]; + slider_step = sliderSteps[MAXWVEL][unitsType.current]; + for (let i = 0; i <= max_slider_value; i+=sliderMarkSteps[MAXWVEL][unitsType.current]) { marks.push({ label: i, value: i }); } } else - if (style.name.includes("swan")) { - max_slider_value = maxSliderValues[SWAN]; - slider_step = 0.5; - for (let i = 0; i <= max_slider_value; i+=5) { + if (style.name.includes(SWAN)) { + max_slider_value = maxSliderValues[SWAN][unitsType.current]; + slider_step = sliderSteps[SWAN][unitsType.current]; + for (let i = 0; i <= max_slider_value; i+=sliderMarkSteps[SWAN][unitsType.current]) { marks.push({ label: i, value: i }); } } else { // maxele - max_slider_value = maxSliderValues[MAXELE]; - slider_step = 0.25; - for (let i = 0; i <= max_slider_value; i++) { + max_slider_value = maxSliderValues[MAXELE][unitsType.current]; + slider_step = sliderSteps[MAXELE][unitsType.current]; + for (let i = 0; i <= max_slider_value; i+=sliderMarkSteps[MAXELE][unitsType.current]) { marks.push({ label: i, value: i }); } } @@ -60,7 +61,8 @@ export const ColormapSlider = ({style}) => { setMinSliderValue(0); const colormapEntries = style.rules[0].symbolizers[0].colorMap.colorMapEntries; - setValue([parseFloat(colormapEntries[colormapEntries.length-1].quantity), parseFloat(colormapEntries[0].quantity)]); + setValue([parseFloat(colormapEntries[colormapEntries.length-1].label.match(/[+-]?\d+(\.\d+)?/g)), + parseFloat(colormapEntries[0].quantity)]); }; useEffect(() => { @@ -75,7 +77,8 @@ export const ColormapSlider = ({style}) => { const colorMapEntries = geostylerStyle.output.rules[0].symbolizers[0].colorMap.colorMapEntries; // now temporarily set that max range for the style colorMapEntries[colorMapEntries.length-1].quantity = - parseFloat(colorMapEntries[colorMapEntries.length-1].label.match(/[+-]?\d+(\.\d+)?/g)).toFixed(2); + getFloatNumberFromLabel(colorMapEntries[colorMapEntries.length-1].label, 2); + //parseFloat(colorMapEntries[colorMapEntries.length-1].label.match(/[+-]?\d+(\.\d+)?/g)).toFixed(2); } setCurrentStyle(geostylerStyle.output); @@ -86,7 +89,7 @@ export const ColormapSlider = ({style}) => { }; getDefaultStyle(); - }, []); + }, [unitsType]); const storeStyle = useCallback((style) => { // save colormap type for later restoration when it is lost @@ -109,12 +112,7 @@ export const ColormapSlider = ({style}) => { const dataRange = []; const colormapEntries = style.rules[0].symbolizers[0].colorMap.colorMapEntries; for(let i = colormapEntries.length-1; i >= 0; i--) { - dataRange.push(colormapEntries[i].quantity); - } - // if this is an intervals type of colormap, correct last entry in range - if (style.rules[0].symbolizers[0].colorMap.type === "intervals") { - const colorMapEntries = style.rules[0].symbolizers[0].colorMap.colorMapEntries; - dataRange[0] = parseFloat(colorMapEntries[colorMapEntries.length-1].label.match(/[+-]?\d+(\.\d+)?/g)).toFixed(2); + dataRange.push(getFloatNumberFromLabel(colormapEntries[i].label, 2)); } return(dataRange.reverse()); @@ -149,22 +147,47 @@ export const ColormapSlider = ({style}) => { const colormapEntries = [...style.rules[0].symbolizers[0].colorMap.colorMapEntries]; colormapEntries.forEach((entry, idx) => { if (idx <= range.length) { - entry.quantity = range[idx]; + // need to convert actual quantity in style if unit is set to imperial + // must always refer to GeoServer adcirc layers using metric units + if (unitsType.current === "imperial") { + if (style.name.includes("maxwvel")) + entry.quantity = ((speedType.current === "mph")? + mphToMps(range[idx]) + : + knotsToMps(range[idx])); + else entry.quantity = feetToMeters(range[idx]); + } + else entry.quantity = range[idx]; + + // now set labels if (style.name.includes("maxwvel")) { - entry.label = range[idx] + " m/s"; + // 2 different speed types for imperial + if (unitsType.current === "imperial") { + entry.label = range[idx] + ((speedType.current === "knots")? " kn" : " mph"); + } + else { + entry.label = range[idx] + " " + speedType.current; + } } else { - entry.label = range[idx] + " m"; + entry.label = range[idx] + ((unitsType.current === "metric")? " m" : " ft"); } // if the colormap type is set to intervals, the last entry is a special case, // so must change the last entry values if (style.rules[0].symbolizers[0].colorMap.type === "intervals") { if ( idx === range.length-1) { if (style.name.includes("maxwvel")) { - entry.label = ">= " + entry.quantity + " m/s"; + // 2 different speed types for imperial + if (unitsType.current === "imperial") { + entry.label = ">= " + range[idx] + ((speedType.current === "knots")? " kn" : " mph"); + } + else { + entry.label = ">= " + range[idx] + " " + speedType.current; + } } else { - entry.label = ">= " + entry.quantity + " m"; + //entry.label = ">= " + entry.quantity + ((unitsType.current === "metric")? " m" : " ft"); + entry.label = ">= " + range[idx] + ((unitsType.current === "metric")? " m" : " ft"); } entry.quantity = maxSliderValue; } @@ -216,7 +239,7 @@ export const ColormapSlider = ({style}) => { }; return ( - + 'Y-Axis'} value={ value } diff --git a/src/components/trays/settings/colormaps/data-range.js b/src/components/trays/settings/colormaps/data-range.js index f32304f..af3db47 100644 --- a/src/components/trays/settings/colormaps/data-range.js +++ b/src/components/trays/settings/colormaps/data-range.js @@ -15,6 +15,8 @@ export const DataRangeEdit = () => { const { mapStyle, + unitsType, + speedType, } = useSettings(); return ( @@ -36,21 +38,35 @@ export const DataRangeEdit = () => { style={mapStyle.maxele.current} /> - } mb={2} level="title-md">Maximum Water Level + } + mb={2} + level="title-md"> + Maximum Water Level {unitsType.current==="metric"? "(meters)" : "(feet)"} + - } mb={2} level="title-md">Maximum Wind Speed + } + mb={2} + level="title-md"> + Maximum Wind Speed ({speedType.current}) + - } level="title-md">Maximum Significant Wave Height + } + level="title-md"> + Maximum Significant Wave Height {unitsType.current==="metric"? "(meters)" : "(feet)"} + diff --git a/src/components/trays/settings/colormaps/style-edit.js b/src/components/trays/settings/colormaps/style-edit.js index aa066d7..62c30d2 100644 --- a/src/components/trays/settings/colormaps/style-edit.js +++ b/src/components/trays/settings/colormaps/style-edit.js @@ -15,7 +15,7 @@ import SldStyleParser from 'geostyler-sld-parser'; import { ColorMapEditor } from '@renci/apsviz-geostyler'; import { restoreColorMapType } from '@utils/map-utils'; import _cloneDeep from 'lodash/cloneDeep'; -import { maxSliderValues } from './utils'; +import { getFloatNumberFromLabel, maxSliderValues } from './utils'; const MAXELE = 'maxele'; const MAXWVEL = 'maxwvel'; @@ -30,6 +30,8 @@ export const StyleEditor = () => { const { mapStyle, layerOpacity, + unitsType, + speedType, } = useSettings(); const [colormap, setColormap] = useState(); @@ -99,7 +101,7 @@ export const StyleEditor = () => { // save the label units for later restoration let labelUnit = colormap.colorMapEntries[0].label.split("").reverse().join("").split(" ")[0]; - // reverse again if this was a m/s unit - whew! + // reverse again if this was anything other than meters unit - whew! if (labelUnit.length > 1) labelUnit = labelUnit.split("").reverse().join(""); //update type of colorMap @@ -113,7 +115,7 @@ export const StyleEditor = () => { // check to see if this an intervals type of colormap // must handle weird last entry case, if so const topRange = (colormap.type === "intervals") ? - Number(colormap.colorMapEntries[colormap.colorMapEntries.length-1].label.match(/[+-]?\d+(\.\d+)?/g)) + getFloatNumberFromLabel(colormap.colorMapEntries[colormap.colorMapEntries.length-1].label, 0) : Number(colormap.colorMapEntries[colormap.colorMapEntries.length-1].quantity); @@ -135,7 +137,7 @@ export const StyleEditor = () => { else { if (value.colorMapEntries[value.colorMapEntries.length-1].label.includes(">=")) { const last = value.colorMapEntries.length-1; - value.colorMapEntries[last].quantity = parseFloat(value.colorMapEntries[last].label.match(/[+-]?\d+(\.\d+)?/g)).toFixed(2); + value.colorMapEntries[last].quantity = getFloatNumberFromLabel(value.colorMapEntries[last].label, 2); const labelParts = value.colorMapEntries[last].label.split(" "); if (labelParts.length >= 3) value.colorMapEntries[last].label = parseFloat(labelParts[1]).toFixed(2) + " " + labelParts[2]; @@ -158,13 +160,28 @@ export const StyleEditor = () => { const styleName = geoStylerStyle.output.name.split('_')[0]; if (colormap.type === "intervals") { const lastIndex = colormap.colorMapEntries.length-1; + let labelUnit = ""; + // need to get value for last value in the range from the label + // for imperial based values, because the value is always represented + // in it metric form. + const lastQuantity = getFloatNumberFromLabel(colormap.colorMapEntries[lastIndex].label, 1); + console.log(lastQuantity); if (styleName === MAXWVEL) { - geoStylerStyle.output.rules[0].symbolizers[0].colorMap.colorMapEntries[lastIndex].label = ">= " + colormap.colorMapEntries[lastIndex].quantity + " m/s"; + if (unitsType.current === "imperial") { + labelUnit = ((speedType.current === "knots")? " kn" : " mph"); + } + else { + labelUnit = "mps"; + } } else { - geoStylerStyle.output.rules[0].symbolizers[0].colorMap.colorMapEntries[lastIndex].label = ">= " + colormap.colorMapEntries[lastIndex].quantity + " m"; + if (unitsType.current === "imperial") + labelUnit = " ft"; } - geoStylerStyle.output.rules[0].symbolizers[0].colorMap.colorMapEntries[lastIndex].quantity = maxSliderValues[styleName]; + geoStylerStyle.output.rules[0].symbolizers[0].colorMap.colorMapEntries[lastIndex].label = ">= " + lastQuantity + labelUnit; + // when the colormap type is intervals, have to set last colormap entry to be an estimated mav value for that layer + // to account for the way interval colormaps work. + geoStylerStyle.output.rules[0].symbolizers[0].colorMap.colorMapEntries[lastIndex].quantity = maxSliderValues[styleName][unitsType.current]; } // save colormap type - it seems to get wiped out when the parser diff --git a/src/components/trays/settings/colormaps/utils.js b/src/components/trays/settings/colormaps/utils.js index a83f3d4..2dd9292 100644 --- a/src/components/trays/settings/colormaps/utils.js +++ b/src/components/trays/settings/colormaps/utils.js @@ -1,5 +1,28 @@ export const maxSliderValues = { - "maxele": 10, - "maxwvel": 100, - "swan": 30 + "maxele": { "metric": 10, "imperial": 30 }, + "maxwvel": { "metric": 100, "imperial": 200 }, + "swan": { "metric": 30, "imperial": 100 } +}; + +export const sliderSteps = { + "maxele": { "metric": 0.25, "imperial": 1 }, + "maxwvel": { "metric": 1, "imperial": 5 }, + "swan": { "metric": 0.5, "imperial": 5 } +}; + +export const sliderMarkSteps = { + "maxele": { "metric": 1, "imperial": 5 }, + "maxwvel": { "metric": 10, "imperial": 20 }, + "swan": { "metric": 5, "imperial": 10 } +}; + +// find a float number in a colormap entry label and +// return with designated decimal places. +export const getFloatNumberFromLabel = (label, decimalPlaces) => { + let num = 0.0; + const labelMatch = label.match(/[+-]?\d+(\.\d+)?/g); + if (labelMatch) + num = parseFloat(labelMatch).toFixed(decimalPlaces); + + return num; }; \ No newline at end of file diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js index fdbd58a..2152117 100644 --- a/src/components/trays/settings/index.js +++ b/src/components/trays/settings/index.js @@ -5,6 +5,7 @@ import { Tune as SettingsIcon } from '@mui/icons-material'; import { DarkModeToggle } from './dark-mode'; import { BaseMaps } from './basemap'; import { DataRangeEdit } from './colormaps'; +import { Units } from './units'; export const icon = ; @@ -18,7 +19,11 @@ export const trayContents = () => ( Select a Basemap + Units of measurement + + Edit ADCIRC Layer Colormaps + ); \ No newline at end of file diff --git a/src/components/trays/settings/units.js b/src/components/trays/settings/units.js new file mode 100644 index 0000000..d8f7995 --- /dev/null +++ b/src/components/trays/settings/units.js @@ -0,0 +1,104 @@ +import React, { useState } from 'react'; +import { FormControl, RadioGroup, Radio, Sheet, Typography } from '@mui/joy'; +import { useSettings } from '@context'; +import { maxeleStyle, maxeleImperialStyle, + maxwvelStyle, maxwvelImperialMPHStyle, maxwvelImperialKnotsStyle, + swanStyle, swanImperialStyle } from '@utils'; + + +/** + * component that handles changing the units of measurement (distance/speed). + * Select Imperial units (Feet, MPH) + * Distance units (Statue or Nautical) + * + * Select Metric units (Meters, MPS) + * + * units + * @returns React.ReactElement + * @constructor + */ +export const Units = () => { + + const { + mapStyle, + unitsType, + speedType, + } = useSettings(); + + const [unit, setUnit] = useState(unitsType.current); + const [speed, setSpeed] = useState(speedType.current); + + const default_speed = { + metric: "mps", + imperial: "mph", + }; + + const setLayerStyles = (unitType) => { + if (unitType === "metric") { + mapStyle.maxele.set(maxeleStyle); + mapStyle.swan.set(swanStyle); + mapStyle.maxwvel.set(maxwvelStyle); + } + else { + mapStyle.maxele.set(maxeleImperialStyle); + mapStyle.swan.set(swanImperialStyle); + mapStyle.maxwvel.set(maxwvelImperialMPHStyle); + } + }; + + const handleUnitChange = (event) => { + const unitType = event.target.value; + setUnit(unitType); + unitsType.set(unitType); + // if units type is set to metric - reset speed type to meters/sec + if (unitType === "metric") { + setSpeed(default_speed.metric); + speedType.set(default_speed.metric); + } + else { + setSpeed(default_speed.imperial); + speedType.set(default_speed.imperial); + } + setLayerStyles(unitType); + }; + + const handleSpeedType = (event) => { + const stype = event.target.value; + setSpeed(stype); + speedType.set(stype); + if (stype === "mph") { + mapStyle.maxwvel.set(maxwvelImperialMPHStyle); + } + else { + mapStyle.maxwvel.set(maxwvelImperialKnotsStyle); + } + }; + + return ( + + + + + {unitsType.current && unitsType.current === "imperial" && + + + Speed units selection: + + + + + + } + + + ); +}; \ No newline at end of file diff --git a/src/context/settings.js b/src/context/settings.js index 898ee85..ce6a9fe 100644 --- a/src/context/settings.js +++ b/src/context/settings.js @@ -37,6 +37,13 @@ export const SettingsProvider = ({ children }) => { const [storedMaxwvelOpacity, setStoredMaxwvelOpacity] = useLocalStorage('maxwvel_opacity',1.0); const [storedSwanOpacity, setStoredSwanOpacity] = useLocalStorage('swan_opacity',1.0); + // save the units type specified by user - imperial or metric (default) + const [storedUnitsType, setStoredUnitsType] = useLocalStorage('unitsType','metric'); + // if units type is imperial, need to save wind speed unit - mph or knots + // default for metric is meters/second (mps) + const [storedSpeedType, setStoredSpeedType] = useLocalStorage('speedType','mps'); + + return ( { toggle: toggleDarkMode, }, + unitsType: { + current: storedUnitsType, + set: setStoredUnitsType, + }, + speedType: { + current: storedSpeedType, + set: setStoredSpeedType, + }, + mapStyle: { maxele: { current: storedMaxeleStyle, diff --git a/src/utils/default-styles.js b/src/utils/default-styles.js index 7fc3f0d..2d306cb 100644 --- a/src/utils/default-styles.js +++ b/src/utils/default-styles.js @@ -1,3 +1,4 @@ +// Metric based styles export const maxeleStyle = ' \ \ \ @@ -55,27 +56,27 @@ export const maxwvelStyle = ' \ \ \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ \ \ \ @@ -131,4 +132,188 @@ export const swanStyle = ' \ \ \ +'; + +// Imperial based styles +export const maxeleImperialStyle = ' \ + \ + \ + maxele_client_style \ + \ + maxele_client_style \ + \ + name \ + \ + \ + \ + \ + 1 \ + \ + 1.0 \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +'; + +export const maxwvelImperialMPHStyle = ' \ + \ + maxwvel_client_style \ + \ + maxwvel_client_style \ + \ + name \ + \ + \ + \ + \ + 1 \ + \ + 1.0 \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +'; + +export const maxwvelImperialKnotsStyle = ' \ + \ + maxwvel_client_style \ + \ + maxwvel_client_style \ + \ + name \ + \ + \ + \ + \ + 1 \ + \ + 1.0 \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +'; + +export const swanImperialStyle = ' \ + \ + swan_client_style \ + \ + swan_client_style \ + \ + name \ + \ + \ + \ + \ + 1 \ + \ + 1.0 \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ '; \ No newline at end of file diff --git a/src/utils/map-utils.js b/src/utils/map-utils.js index 262a682..4270ead 100644 --- a/src/utils/map-utils.js +++ b/src/utils/map-utils.js @@ -296,4 +296,106 @@ export const restoreColorMapType = (typeName, style) => { } return updatedStyle; -}; \ No newline at end of file +}; + +// helper functions for unit conversions +export const feetToMeters = (m) => { + return m * 0.3048; +}; +export const metersToFeet = (m) => { + return m * 3.28084; +}; + +export const mphToMps = (s) => { + return s * 0.44704; +}; +export const mpsToMph = (s) => { + return s * 2.2369; +}; + +export const knotsToMps = (s) => { + return s * 0.514444; +}; +export const mpsToKnots = (s) => { + return s * 1.943844; +}; +export const mphToKnots = (s) => { + return s / 1.15078; +}; + +// this functiom converts a style to imperial units +// styles will always be saved locally in metric units +// however if the user settings specify imperial units, +// the style must be converted just before it is used +// in a GetMap or GetLegend request. + +// Save this code for now, is case we decide to do it this way +// instead of switching to a new default style +/* +export const convertStyleUnitsToImperial = (layerType, style, speedType) => { + console.log(layerType); + console.log(style); + console.log(speedType); + // helper functions + const feetToMeters = (m) => { + return m * 0.3048; + }; + const mphToMps = (s) => { + return s * 0.44704; + }; + const knotsToMps = (s) => { + return s * 0.514444; + }; + const metersToFeet = (m) => { + return m * 3.28084; + }; + const mpsToMph = (s) => { + return s * 2.2369; + }; + const mpsToKnots = (s) => { + return s * 1.943844; + }; + + const colormap = style.rules[0].symbolizers[0].colorMap.colorMapEntries; + let newColormap = []; + const numClasses = colormap.length; + const colorMapType = style.rules[0].symbolizers[0].colorMap.type; + // this for getting max value when color map type is interval + const maxValue = parseFloat(colormap[numClasses-1].label.match(/[+-]?\d+(\.\d+)?/g)).toFixed(2); + let imperialMaxValue = 0.0; + let intervalValue = 0; + let speedFunc = mphToMps; + + // see if we are handling distance units or speed units + if (layerType === "maxwvel63") { + // convert speed units + if (speedType === "mph") { + imperialMaxValue = Math.round(mpsToMph(maxValue)); + } + else { + imperialMaxValue = Math.round(mpsToKnots(maxValue)); + speedFunc = knotsToMps; + } + intervalValue = Math.trunc(imperialMaxValue/numClasses); + let label = 0.0; + colormap.forEach((entry) => { + newColormap.push({'color': entry.color, 'quantity': speedFunc(label), 'label':label+ " " + speedType}); + label += intervalValue; + }); + } + else { + // convert distance units + imperialMaxValue = Math.round(metersToFeet(maxValue)); + intervalValue = Math.trunc(imperialMaxValue/numClasses); + let label = 0.0; + colormap.forEach((entry) => { + newColormap.push({'color': entry.color, 'quantity': feetToMeters(label), 'label':label+ " ft"}); + label += intervalValue; + }); + } + + style.rules[0].symbolizers[0].colorMap.colorMapEntries = newColormap; + //console.log(style); + return style; +}; +*/ \ No newline at end of file