| @@ -99,136 +99,136 @@ |
| * Displays the Leaflet map canvas containing flow analysis areas |
| */ |
| class CatenaMap extends React.Component<Props, State> { |
| - constructor(props) { |
| - super(props) |
| + constructor(props) { |
| + super(props) |
| |
| - this.state = {} |
| - this.mapRef = React.createRef() |
| + this.state = {} |
| + this.mapRef = React.createRef() |
| + } |
| + |
| + |
| + componentDidMount() { |
| + this.vectorSource = new OlVectorSource({ |
| + projection: 'EPSG:4326', |
| + }) |
| + this.vectorLayer = new OlVectorLayer({ |
| + // declutter: true, |
| + name: 'fields', |
| + source: this.vectorSource, |
| + style: (feat, res) => this.getStyle(feat, res), |
| + zIndex: 1, |
| + declutter: true, |
| + }) |
| + |
| + this.mapApp = this.mapRef.current |
| + const { olmap } = this.mapApp.map |
| + olmap.addLayer(this.vectorLayer) |
| + olmap.addInteraction(this.select) |
| + this.select.on('select', (e) => { |
| + if (e.selected.length > 0) { |
| + const key = e.selected[0].key |
| + const monID = key.substring(0, key.length - '-monitor'.length) |
| + let eqipNum = -1 |
| + this.props.manageProjects.projects.forEach((p) => { |
| + p.monitoringStations.forEach((m) => { |
| + if (m.id === monID) { |
| + eqipNum = p.eqipNum |
| + } |
| + }) |
| + }) |
| + this.props.setSelectedMonitoringStation(monID, eqipNum) |
| + this.props.setTabbedPanelKey('Monitoring Stations') |
| + } else { |
| + this.props.setSelectedMonitoringStation(-1, -1) |
| + } |
| + }) |
| + } |
| + |
| + componentDidUpdate(prevProps: Props, prevState: any, snapshot: any): void { |
| + const { areMonitoringStationsDirty, areProjectsDirty, zoomToSelectedProject } = this.props.manageProjects |
| + let selectedFeature |
| + let selectedMonitoringStationFeature |
| + let feature = null |
| + if (areProjectsDirty || areMonitoringStationsDirty) { // If projects changed, lets remap them on catenaMap |
| + this.vectorSource.clear() // Clear away the old projects |
| + this.props.manageProjects.projects.forEach((project) => { |
| + // skip if project doesn't have geometry data yet. |
| + // Can't map what we don't have geometry for. |
| + if (project.geometry) { |
| + // Read in new feature geometry from well known text |
| + const format = new WKT() |
| + feature = format.readFeature(project.geometry, { |
| + dataProjection: 'EPSG:4326', |
| + featureProjection: 'EPSG:3857', |
| + }) |
| + |
| + if (project.selected) { |
| + selectedFeature = feature |
| + feature.key = project.eqipNum |
| + |
| + // Add feature to map. |
| + this.vectorSource.addFeature(feature) |
| + if (feature.getGeometry().getType() === 'Polygon') { |
| + this.drawFlowArrow(feature.getGeometry(), project.averageAspect, project.eqipNum) |
| + } |
| + if (feature.getGeometry().getType() === 'MultiPolygon') { |
| + feature.getGeometry().getPolygons().forEach((p) => { |
| + this.drawFlowArrow(p, project.averageAspect, project.eqipNum) |
| + }) |
| + } |
| + |
| + |
| + |
| + project.monitoringStations.forEach((station) => { |
| + // add point feature. |
| + const pointFeature = this.getFeatureFromLatLong(station.lat, station.long) |
| + pointFeature.key = `${station.id}-monitor` |
| + pointFeature.text = station.id |
| + this.vectorSource.addFeature(pointFeature) |
| + if (station.selected) { |
| + this.select.getFeatures().push(pointFeature) |
| + selectedMonitoringStationFeature = pointFeature |
| + |
| + } |
| + |
| + if (station.drainageGeometry) { |
| + const format = new GeoJSON() |
| + feature = format.readFeature(station.drainageGeometry, { |
| + dataProjection: 'EPSG:4326', |
| + featureProjection: 'EPSG:3857', |
| + }) |
| + feature.key = `${station.id}-drainage` |
| + |
| + this.vectorSource.addFeature(feature) |
| + } |
| + }) |
| + } |
| + } |
| + }) |
| + if (selectedFeature && zoomToSelectedProject) { |
| + const extent = selectedFeature.getGeometry().getExtent() |
| + const bufferedExtent = olExtent.buffer(extent, 150) |
| + this.mapApp.map.olmap.getView().fit(bufferedExtent, this.mapApp.map.olmap.getSize()) |
| + this.props.setZoomToSelectedProject(false) |
| + } |
| + if (selectedMonitoringStationFeature && setZoomToSelectedMonitoringStation) { |
| + const extent = selectedMonitoringStationFeature.getGeometry().getExtent() |
| + const bufferedExtent = olExtent.buffer(extent, 200) |
| + this.mapApp.map.olmap.getView().fit(bufferedExtent, this.mapApp.map.olmap.getSize()) |
| + this.props.setZoomToSelectedMonitoringStation(false) |
| + } |
| + |
| + this.props.setMonitoringStationsClean() |
| + this.props.setProjectsClean() |
| } |
| - |
| - |
| - componentDidMount() { |
| - this.vectorSource = new OlVectorSource({ |
| - projection: 'EPSG:4326', |
| - }) |
| - this.vectorLayer = new OlVectorLayer({ |
| - // declutter: true, |
| - name: 'fields', |
| - source: this.vectorSource, |
| - style: (feat, res) => this.getStyle(feat, res), |
| - zIndex: 1, |
| - declutter: true, |
| - }) |
| - |
| - this.mapApp = this.mapRef.current |
| - const { olmap } = this.mapApp.map |
| - olmap.addLayer(this.vectorLayer) |
| - olmap.addInteraction(this.select) |
| - this.select.on('select', (e) => { |
| - if (e.selected.length > 0) { |
| - const key = e.selected[0].key |
| - const monID = key.substring(0, key.length - '-monitor'.length) |
| - let eqipNum = -1 |
| - this.props.manageProjects.projects.forEach((p) => { |
| - p.monitoringStations.forEach((m) => { |
| - if (m.id === monID) { |
| - eqipNum = p.eqipNum |
| - } |
| - }) |
| - }) |
| - this.props.setSelectedMonitoringStation(monID, eqipNum) |
| - this.props.setTabbedPanelKey('Monitoring Stations') |
| - } else { |
| - this.props.setSelectedMonitoringStation(-1, -1) |
| - } |
| - }) |
| - } |
| - |
| - componentDidUpdate(prevProps: Props, prevState: any, snapshot: any): void { |
| - const { areMonitoringStationsDirty, areProjectsDirty, zoomToSelectedProject } = this.props.manageProjects |
| - let selectedFeature |
| - let selectedMonitoringStationFeature |
| - let feature = null |
| - if (areProjectsDirty || areMonitoringStationsDirty) { // If projects changed, lets remap them on catenaMap |
| - this.vectorSource.clear() // Clear away the old projects |
| - this.props.manageProjects.projects.forEach((project) => { |
| - // skip if project doesn't have geometry data yet. |
| - // Can't map what we don't have geometry for. |
| - if (project.geometry) { |
| - // Read in new feature geometry from well known text |
| - const format = new WKT() |
| - feature = format.readFeature(project.geometry, { |
| - dataProjection: 'EPSG:4326', |
| - featureProjection: 'EPSG:3857', |
| - }) |
| - |
| - if (project.selected) { |
| - selectedFeature = feature |
| - } |
| - |
| - feature.key = project.eqipNum |
| - |
| - // Add feature to map. |
| - this.vectorSource.addFeature(feature) |
| - if (feature.getGeometry().getType() === 'Polygon') { |
| - this.drawFlowArrow(feature.getGeometry(), project.averageAspect, project.eqipNum) |
| - } |
| - if (feature.getGeometry().getType() === 'MultiPolygon') { |
| - feature.getGeometry().getPolygons().forEach((p) => { |
| - this.drawFlowArrow(p, project.averageAspect, project.eqipNum) |
| - }) |
| - } |
| - } |
| - |
| - |
| - project.monitoringStations.forEach((station) => { |
| - // add point feature. |
| - const pointFeature = this.getFeatureFromLatLong(station.lat, station.long) |
| - pointFeature.key = `${station.id}-monitor` |
| - pointFeature.text = station.id |
| - this.vectorSource.addFeature(pointFeature) |
| - |
| - if (station.selected) { |
| - this.select.getFeatures().push(pointFeature) |
| - selectedMonitoringStationFeature = pointFeature |
| - } |
| - |
| - if (station.drainageGeometry) { |
| - const format = new GeoJSON() |
| - feature = format.readFeature(station.drainageGeometry, { |
| - dataProjection: 'EPSG:4326', |
| - featureProjection: 'EPSG:3857', |
| - }) |
| - feature.key = `${station.id}-drainage` |
| - |
| - this.vectorSource.addFeature(feature) |
| - } |
| - }) |
| - }) |
| - if (selectedFeature && zoomToSelectedProject) { |
| - const extent = selectedFeature.getGeometry().getExtent() |
| - const bufferedExtent = olExtent.buffer(extent, 150) |
| - this.mapApp.map.olmap.getView().fit(bufferedExtent, this.mapApp.map.olmap.getSize()) |
| - this.props.setZoomToSelectedProject(false) |
| - } |
| - if (selectedMonitoringStationFeature && setZoomToSelectedMonitoringStation) { |
| - const extent = selectedMonitoringStationFeature.getGeometry().getExtent() |
| - const bufferedExtent = olExtent.buffer(extent, 200) |
| - this.mapApp.map.olmap.getView().fit(bufferedExtent, this.mapApp.map.olmap.getSize()) |
| - this.props.setZoomToSelectedMonitoringStation(false) |
| - } |
| - |
| - this.props.setMonitoringStationsClean() |
| - this.props.setProjectsClean() |
| - } |
| - } |
| + } |
| |
| select = new Select({ |
| - condition: click, |
| - style: (feat, res) => this.getSelectedStyle(feat, res), |
| - filter(feature, layer) { |
| - return feature.key.toString().includes('-monitor') |
| - }, |
| + condition: click, |
| + style: (feat, res) => this.getSelectedStyle(feat, res), |
| + filter(feature, layer) { |
| + return feature.key.toString().includes('-monitor') |
| + }, |
| }) |
| |
| mapRef = null |
| @@ -237,247 +237,247 @@ |
| vectorLayer = null |
| |
| drawFlowArrow(geometry, averageAspect, eqipNum) { |
| - const angle = Math.round(averageAspect) |
| - const spread = 30 |
| - const lengthRatio = 0.15 |
| - const length = this.getRoughLengthAcrossFeature(geometry) |
| + const angle = Math.round(averageAspect) |
| + const spread = 30 |
| + const lengthRatio = 0.15 |
| + const length = this.getRoughLengthAcrossFeature(geometry) |
| |
| - const startPoint = geometry.getInteriorPoint() |
| + const startPoint = geometry.getInteriorPoint() |
| |
| |
| - const startCoords = startPoint.getCoordinates() // just for convenience |
| - const sourcePoint = startPoint.clone() |
| - sourcePoint.transform('EPSG:3857', 'EPSG:4326') |
| - const destPoint = destination(sourcePoint.getCoordinates(), length / 2, angle, { units: 'kilometers' }) // front half of arrow |
| - const destCoords = destPoint.geometry.coordinates |
| - const destPoint2 = destination(destCoords, (length * lengthRatio), (angle + (180 + spread)) % 360) // arrowhead 1 |
| - const destPoint3 = destination(destCoords, (length * lengthRatio), (angle + (180 - spread)) % 360) // arrowhead 2 |
| - const destPoint4 = destination(sourcePoint.getCoordinates(), length / 2, (angle + 180) % 360, { units: 'kilometers' }) // back half of arrow |
| + const startCoords = startPoint.getCoordinates() // just for convenience |
| + const sourcePoint = startPoint.clone() |
| + sourcePoint.transform('EPSG:3857', 'EPSG:4326') |
| + const destPoint = destination(sourcePoint.getCoordinates(), length / 2, angle, { units: 'kilometers' }) // front half of arrow |
| + const destCoords = destPoint.geometry.coordinates |
| + const destPoint2 = destination(destCoords, (length * lengthRatio), (angle + (180 + spread)) % 360) // arrowhead 1 |
| + const destPoint3 = destination(destCoords, (length * lengthRatio), (angle + (180 - spread)) % 360) // arrowhead 2 |
| + const destPoint4 = destination(sourcePoint.getCoordinates(), length / 2, (angle + 180) % 360, { units: 'kilometers' }) // back half of arrow |
| |
| - const endCoords = new Point(destCoords).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| - const endCoords2 = new Point(destPoint2.geometry.coordinates).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| - const endCoords3 = new Point(destPoint3.geometry.coordinates).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| - const endCoords4 = new Point(destPoint4.geometry.coordinates).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| + const endCoords = new Point(destCoords).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| + const endCoords2 = new Point(destPoint2.geometry.coordinates).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| + const endCoords3 = new Point(destPoint3.geometry.coordinates).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| + const endCoords4 = new Point(destPoint4.geometry.coordinates).transform('EPSG:4326', 'EPSG:3857').getCoordinates() |
| |
| - const lineFeat = new Feature({ |
| - geometry: new LineString([startCoords, endCoords]), |
| - }) |
| - const arrowHeadFeat1 = new Feature({ |
| - geometry: new LineString([endCoords, endCoords2]), |
| - }) |
| - const arrowHeadFeat2 = new Feature({ |
| - geometry: new LineString([endCoords, endCoords3]), |
| - }) |
| - const lineFeat2 = new Feature({ |
| - geometry: new LineString([startCoords, endCoords4]), |
| - }) |
| + const lineFeat = new Feature({ |
| + geometry: new LineString([startCoords, endCoords]), |
| + }) |
| + const arrowHeadFeat1 = new Feature({ |
| + geometry: new LineString([endCoords, endCoords2]), |
| + }) |
| + const arrowHeadFeat2 = new Feature({ |
| + geometry: new LineString([endCoords, endCoords3]), |
| + }) |
| + const lineFeat2 = new Feature({ |
| + geometry: new LineString([startCoords, endCoords4]), |
| + }) |
| |
| - lineFeat.text = 'direction' |
| - lineFeat.rotation = angle |
| - lineFeat.key = `${eqipNum}-ArrowLine1` |
| - lineFeat2.text = 'flow' |
| - lineFeat2.rotation = angle |
| - lineFeat2.key = `${eqipNum}-ArrowLine2` |
| - arrowHeadFeat1.key = `${eqipNum}-ArrowHead1` |
| - arrowHeadFeat2.key = `${eqipNum}-ArrowHead2` |
| + lineFeat.text = 'direction' |
| + lineFeat.rotation = angle |
| + lineFeat.key = `${eqipNum}-ArrowLine1` |
| + lineFeat2.text = 'flow' |
| + lineFeat2.rotation = angle |
| + lineFeat2.key = `${eqipNum}-ArrowLine2` |
| + arrowHeadFeat1.key = `${eqipNum}-ArrowHead1` |
| + arrowHeadFeat2.key = `${eqipNum}-ArrowHead2` |
| |
| |
| - this.vectorSource.addFeature(lineFeat) |
| - this.vectorSource.addFeature(lineFeat2) |
| - this.vectorSource.addFeature(arrowHeadFeat1) |
| - this.vectorSource.addFeature(arrowHeadFeat2) |
| + this.vectorSource.addFeature(lineFeat) |
| + this.vectorSource.addFeature(lineFeat2) |
| + this.vectorSource.addFeature(arrowHeadFeat1) |
| + this.vectorSource.addFeature(arrowHeadFeat2) |
| } |
| |
| getRoughLengthAcrossFeature(geometry) { |
| - const extent = geometry.getExtent() |
| - const deltaX = extent[2] - extent[0] |
| - const deltaY = extent[3] - extent[1] |
| - const minExtent = Math.min(deltaX, deltaY) |
| + const extent = geometry.getExtent() |
| + const deltaX = extent[2] - extent[0] |
| + const deltaY = extent[3] - extent[1] |
| + const minExtent = Math.min(deltaX, deltaY) |
| |
| - return (minExtent * 0.5) / 1000 // unit conversion meters to km |
| + return (minExtent * 0.5) / 1000 // unit conversion meters to km |
| } |
| |
| getFeatureFromLatLong(latitude, longitude) { |
| - const geometry = new Point([longitude, latitude]).transform('EPSG:4326', 'EPSG:3857') |
| - const feature = new Feature({ geometry }) |
| + const geometry = new Point([longitude, latitude]).transform('EPSG:4326', 'EPSG:3857') |
| + const feature = new Feature({ geometry }) |
| |
| - return feature |
| + return feature |
| } |
| |
| getStyle = (feat, res) => { |
| - const curProject = getProjectByEQIPNum(this.props.manageProjects, feat.key) |
| - const label = curProject.title |
| - const stroke = new Stroke({ color: '#6F7364', width: 2 }) |
| - const { colors, opacity, borderWidth } = this.props.settings |
| - // Monitoring Station style |
| - if (feat.getGeometry().getType() === 'Point') { |
| - return new Style({ |
| - image: new RegularShape({ |
| - fill: new Fill({ color: 'red' }), |
| - stroke, |
| - points: 30, |
| - radius: 5, |
| - angle: Math.PI / 4, |
| - }), |
| - text: new Text({ |
| - fill: new Fill({ |
| - color: 'black', |
| - }), |
| - stroke: new Stroke({ |
| - color: 'white', |
| - width: 0.5, |
| - }), |
| - font: '18px "Roboto Condensed", sans-serif', |
| - offsetY: -10, |
| - overflow: true, |
| - padding: [2, 2, 2, 2], |
| - text: feat.key, |
| - }), |
| - }) |
| - } |
| - |
| - if (feat.text === 'flow' || feat.text === 'direction' || feat.getGeometry().getType() === 'LineString') { |
| - let rotation = ((feat.rotation + 270) % 360) // subtract 90 degrees so that the words sit parallel with the lines. Mod is so that we stay between 0 and 360. |
| - rotation *= (Math.PI / 180) // Convert to radians |
| - return new Style({ |
| - text: new Text({ |
| - fill: new Fill({ |
| - color: 'black', |
| - }), |
| - stroke: new Stroke({ |
| - color: 'white', |
| - width: 0.5, |
| - }), |
| - font: '15px "Roboto Condensed", sans-serif', |
| - offsetY: 0, |
| - overflow: true, |
| - padding: [2, 2, 2, 2], |
| - text: feat.text, |
| - rotation, |
| - }), |
| - fill: new Fill({ |
| - color: '#12a4b6', |
| - }), |
| - stroke: new Stroke({ |
| - color: '#12a4b6', |
| - width: 4, |
| - }), |
| - }) |
| - } |
| - |
| - let fill = colors.drainage.fill |
| - let border = colors.drainage.border |
| - |
| - if (feat.key && feat.key.toString().includes('drain')) { |
| - return olUtils.getOlStyles({ |
| - fill: new Fill({ |
| - color: `rgba(${fill[0]}, ${fill[1]}, ${fill[2]}, ${opacity.drainage.fill})`, |
| - }), |
| - stroke: new Stroke({ |
| - color: `rgba(${border[0]}, ${border[1]}, ${border[2]}, ${opacity.drainage.border})`, |
| - width: borderWidth.drainage, |
| - }), |
| - text: new Text({ |
| - fill: new Fill({ |
| - color: 'white', |
| - }), |
| - stroke: new Stroke({ |
| - color: 'black', |
| - width: 0.5, |
| - }), |
| - font: '24px "Roboto Condensed", sans-serif', |
| - offsetY: 0, |
| - overflow: true, |
| - padding: [2, 2, 2, 2], |
| - text: 'Drainage Geometry', |
| - }), |
| - }) |
| - } |
| - |
| - |
| - fill = colors.field.fill |
| - border = colors.field.border |
| - // Geometry...aka Field Style |
| - return olUtils.getOlStyles({ |
| + const curProject = getProjectByEQIPNum(this.props.manageProjects, feat.key) |
| + const label = curProject.title |
| + const stroke = new Stroke({ color: '#6F7364', width: 2 }) |
| + const { colors, opacity, borderWidth } = this.props.settings |
| + // Monitoring Station style |
| + if (feat.getGeometry().getType() === 'Point') { |
| + return new Style({ |
| + image: new RegularShape({ |
| + fill: new Fill({ color: 'red' }), |
| + stroke, |
| + points: 30, |
| + radius: 5, |
| + angle: Math.PI / 4, |
| + }), |
| + text: new Text({ |
| fill: new Fill({ |
| - color: `rgba(${fill[0]}, ${fill[1]}, ${fill[2]}, ${opacity.field.fill})`, |
| + color: 'black', |
| }), |
| stroke: new Stroke({ |
| - color: `rgba(${border[0]}, ${border[1]}, ${border[2]}, ${opacity.field.border})`, |
| - width: borderWidth.field, |
| + color: 'white', |
| + width: 0.5, |
| }), |
| - text: new Text({ |
| - fill: new Fill({ |
| - color: 'white', |
| - }), |
| - stroke: new Stroke({ |
| - color: 'black', |
| - width: 0.5, |
| - }), |
| - font: '24px "Roboto Condensed", sans-serif', |
| - offsetY: 0, |
| - overflow: true, |
| - padding: [2, 2, 2, 2], |
| - text: label, |
| + font: '18px "Roboto Condensed", sans-serif', |
| + offsetY: -10, |
| + overflow: true, |
| + padding: [2, 2, 2, 2], |
| + text: feat.key, |
| + }), |
| + }) |
| + } |
| + |
| + if (feat.text === 'flow' || feat.text === 'direction' || feat.getGeometry().getType() === 'LineString') { |
| + let rotation = ((feat.rotation + 270) % 360) // subtract 90 degrees so that the words sit parallel with the lines. Mod is so that we stay between 0 and 360. |
| + rotation *= (Math.PI / 180) // Convert to radians |
| + return new Style({ |
| + text: new Text({ |
| + fill: new Fill({ |
| + color: 'black', |
| }), |
| + stroke: new Stroke({ |
| + color: 'white', |
| + width: 0.5, |
| + }), |
| + font: '15px "Roboto Condensed", sans-serif', |
| + offsetY: 0, |
| + overflow: true, |
| + padding: [2, 2, 2, 2], |
| + text: feat.text, |
| + rotation, |
| + }), |
| + fill: new Fill({ |
| + color: '#12a4b6', |
| + }), |
| + stroke: new Stroke({ |
| + color: '#12a4b6', |
| + width: 4, |
| + }), |
| }) |
| + } |
| + |
| + let fill = colors.drainage.fill |
| + let border = colors.drainage.border |
| + |
| + if (feat.key && feat.key.toString().includes('drain')) { |
| + return olUtils.getOlStyles({ |
| + fill: new Fill({ |
| + color: `rgba(${fill[0]}, ${fill[1]}, ${fill[2]}, ${opacity.drainage.fill})`, |
| + }), |
| + stroke: new Stroke({ |
| + color: `rgba(${border[0]}, ${border[1]}, ${border[2]}, ${opacity.drainage.border})`, |
| + width: borderWidth.drainage, |
| + }), |
| + text: new Text({ |
| + fill: new Fill({ |
| + color: 'white', |
| + }), |
| + stroke: new Stroke({ |
| + color: 'black', |
| + width: 0.5, |
| + }), |
| + font: '24px "Roboto Condensed", sans-serif', |
| + offsetY: 0, |
| + overflow: true, |
| + padding: [2, 2, 2, 2], |
| + text: 'Drainage Geometry', |
| + }), |
| + }) |
| + } |
| + |
| + |
| + fill = colors.field.fill |
| + border = colors.field.border |
| + // Geometry...aka Field Style |
| + return olUtils.getOlStyles({ |
| + fill: new Fill({ |
| + color: `rgba(${fill[0]}, ${fill[1]}, ${fill[2]}, ${opacity.field.fill})`, |
| + }), |
| + stroke: new Stroke({ |
| + color: `rgba(${border[0]}, ${border[1]}, ${border[2]}, ${opacity.field.border})`, |
| + width: borderWidth.field, |
| + }), |
| + text: new Text({ |
| + fill: new Fill({ |
| + color: 'white', |
| + }), |
| + stroke: new Stroke({ |
| + color: 'black', |
| + width: 0.5, |
| + }), |
| + font: '24px "Roboto Condensed", sans-serif', |
| + offsetY: 0, |
| + overflow: true, |
| + padding: [2, 2, 2, 2], |
| + text: label, |
| + }), |
| + }) |
| } |
| |
| getSelectedStyle = (feat, res) => { |
| - const stroke = new Stroke({ color: 'red', width: 2 }) |
| - // Monitoring Station style |
| - if (feat.getGeometry().getType() === 'Point') { |
| - return new Style({ |
| - image: new RegularShape({ |
| - fill: new Fill({ color: 'white' }), |
| - stroke, |
| - points: 8, |
| - radius: 8, |
| - angle: Math.PI / 4, |
| - }), |
| - text: new Text({ |
| - fill: new Fill({ |
| - color: 'black', |
| - }), |
| - stroke: new Stroke({ |
| - color: 'white', |
| - width: 0.5, |
| - }), |
| - font: '18px "Roboto Condensed", sans-serif', |
| - offsetY: -10, |
| - overflow: true, |
| - padding: [2, 2, 2, 2], |
| - text: feat.key, |
| - }), |
| - }) |
| - } |
| + const stroke = new Stroke({ color: 'red', width: 2 }) |
| + // Monitoring Station style |
| + if (feat.getGeometry().getType() === 'Point') { |
| + return new Style({ |
| + image: new RegularShape({ |
| + fill: new Fill({ color: 'white' }), |
| + stroke, |
| + points: 8, |
| + radius: 8, |
| + angle: Math.PI / 4, |
| + }), |
| + text: new Text({ |
| + fill: new Fill({ |
| + color: 'black', |
| + }), |
| + stroke: new Stroke({ |
| + color: 'white', |
| + width: 0.5, |
| + }), |
| + font: '18px "Roboto Condensed", sans-serif', |
| + offsetY: -10, |
| + overflow: true, |
| + padding: [2, 2, 2, 2], |
| + text: feat.key, |
| + }), |
| + }) |
| + } |
| } |
| |
| render() { |
| - const classes = [this.props.theme.mapCtr] |
| - classes.push(this.props.theme.headerPanelOpen) |
| - classes.push(this.props.analysisPanelClosed |
| - ? this.props.theme.analysisPanelClosed : this.props.theme.analysisPanelOpen) |
| - classes.push(this.props.contextBarClosed |
| - ? this.props.theme.contextBarClosed : this.props.theme.contextBarOpen) |
| - classes.push(this.props.mapToolbarClosed |
| - ? this.props.theme.mapToolbarPanelClosed : this.props.theme.mapToolbarPanelOpen) |
| - return ( |
| - <div |
| - className={classes.join(' ')} |
| - > |
| - <Map |
| - baseLayer={this.props.baseLayer} |
| - map={this.props.map} |
| - mapExtentUpdateHandled={this.props.mapExtentUpdateHandled} |
| - mapScale={this.props.mapScale} |
| - mapViewUpdateHandled={this.props.mapViewUpdateHandled} |
| - onChangeView={ex => this.props.onUpdateMapView(ex)} |
| - ref={this.mapRef} |
| - theme={this.props.theme} |
| - /> |
| - </div> |
| - ) |
| + const classes = [this.props.theme.mapCtr] |
| + classes.push(this.props.theme.headerPanelOpen) |
| + classes.push(this.props.analysisPanelClosed |
| + ? this.props.theme.analysisPanelClosed : this.props.theme.analysisPanelOpen) |
| + classes.push(this.props.contextBarClosed |
| + ? this.props.theme.contextBarClosed : this.props.theme.contextBarOpen) |
| + classes.push(this.props.mapToolbarClosed |
| + ? this.props.theme.mapToolbarPanelClosed : this.props.theme.mapToolbarPanelOpen) |
| + return ( |
| + <div |
| + className={classes.join(' ')} |
| + > |
| + <Map |
| + baseLayer={this.props.baseLayer} |
| + map={this.props.map} |
| + mapExtentUpdateHandled={this.props.mapExtentUpdateHandled} |
| + mapScale={this.props.mapScale} |
| + mapViewUpdateHandled={this.props.mapViewUpdateHandled} |
| + onChangeView={ex => this.props.onUpdateMapView(ex)} |
| + ref={this.mapRef} |
| + theme={this.props.theme} |
| + /> |
| + </div> |
| + ) |
| } |
| } |
| |