@longline/aqua-ui 1.0.71 → 1.0.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/map/layers/ClusterLayer/ClusterLayer.d.ts +1 -1
  2. package/map/layers/ClusterLayer/ClusterLayer.js +1 -1
  3. package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.d.ts +1 -1
  4. package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js +3 -1
  5. package/map/markers/RiskMarker/RiskMarker.js +2 -2
  6. package/package.json +1 -1
package/map/layers/ClusterLayer/ClusterLayer.d.ts CHANGED
@@ -63,7 +63,7 @@ interface IProps {
63
63
  maxZoom?: number;
64
64
  }
65
65
  /**
66
- * A `ClusterLayer` manages its own `Source`. It does not takes GeoJSON, but a list of objects which must at least have
66
+ * A `ClusterLayer` manages its own `Source`. It does not take GeoJSON, but a list of objects which must at least have
67
67
  * `latitude` and `longitude` keys. Other object keys may be used for the aggregate values of clusters; if no field is
68
68
  * supplied, then the cluster will display the number of features inside them (the `point_count`).
69
69
  *
package/map/layers/ClusterLayer/ClusterLayer.js CHANGED
@@ -83,7 +83,7 @@ var ClusterLayerBase = function (_a) {
83
83
  })));
84
84
  };
85
85
  /**
86
- * A `ClusterLayer` manages its own `Source`. It does not takes GeoJSON, but a list of objects which must at least have
86
+ * A `ClusterLayer` manages its own `Source`. It does not take GeoJSON, but a list of objects which must at least have
87
87
  * `latitude` and `longitude` keys. Other object keys may be used for the aggregate values of clusters; if no field is
88
88
  * supplied, then the cluster will display the number of features inside them (the `point_count`).
89
89
  *
package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.d.ts CHANGED
@@ -14,7 +14,7 @@ interface IProps {
14
14
  * Every feature must have a unique ID in its properties. This is used to
15
15
  * tell features apart. If the `source` should ever change, then it is
16
16
  * important that new items have new IDs, so that old markers get removed
17
- * correctly.
17
+ * correctly. Features that do not have an ID field are not displayed.
18
18
  */
19
19
  idField: string;
20
20
  /**
package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js CHANGED
@@ -138,8 +138,10 @@ var HtmlMarkerLayerBase = function (props) {
138
138
  var feature = features_1[_i];
139
139
  var coords = feature.geometry.coordinates;
140
140
  var fprops = feature.properties;
141
- // if (!props.cluster) continue;
142
141
  var id = fprops[props.idField];
142
+ // Do not render makers without an ID field:
143
+ if (!id)
144
+ continue;
143
145
  // Is there a marker for this feature?
144
146
  var marker = markers.current[id];
145
147
  // If not, create one:
package/map/markers/RiskMarker/RiskMarker.js CHANGED
@@ -21,7 +21,7 @@ var RiskMarkerBase = function (props) {
21
21
  props.onClick();
22
22
  }
23
23
  };
24
- var size = (props.value ? Math.log10(props.value) : 1) * 10 + 70;
24
+ var size = 80;
25
25
  return (React.createElement("div", { className: "".concat(props.className, " ").concat(props.value > 0 ? 'audited ' : 'unaudited ', " ").concat(props.actioned ? 'actioned ' : ''), style: { width: "".concat(size, "px"), height: "".concat(size, "px") }, onClick: handleClick },
26
26
  React.createElement("span", null, props.value),
27
27
  React.createElement("svg", { viewBox: "0 0 60 60" },
@@ -36,7 +36,7 @@ var RiskMarkerBase = function (props) {
36
36
  React.createElement("path", { className: "no-action", fill: props.color, d: "M42.3623 11.1596C42.366 11.1624 42.3702 11.1646 42.374 11.1673C42.0952 10.9667 41.8147 10.7682 41.5257 10.5811C41.526 10.5812 41.5255 10.5811 41.5257 10.5811C41.524 10.5874 41.5205 10.5932 41.5185 10.5995C38.2075 8.45041 34.2622 7.17529 30.0006 7.17529C25.7501 7.17529 21.815 8.44472 18.5087 10.5835L18.5072 10.5811C12.7877 14.2844 8.97314 20.6539 8.97314 27.9018C8.97314 33.595 11.3058 38.7493 15.0775 42.4946L19.0258 38.6037C16.2649 35.8544 14.557 32.0755 14.557 27.9018C14.557 22.7029 17.2828 18.0472 21.3201 15.3016C23.7952 13.6421 26.7811 12.6672 30.0005 12.6672C33.2389 12.6672 36.2422 13.6518 38.7257 15.3292C38.722 15.3333 38.719 15.338 38.715 15.342C42.7762 18.0838 45.443 22.6843 45.443 27.9018C45.443 32.1043 43.7145 35.9088 40.9199 38.6627L44.8682 42.5537C48.6733 38.8039 51.027 33.6237 51.027 27.9017C51.0272 21.0153 47.6086 14.9265 42.3623 11.1596Z" }),
37
37
  React.createElement("path", { className: "action", fill: "#fff", d: "M30 13.9319C33.017 13.9319 35.4628 11.5697 35.4628 8.65588C35.4628 5.74203 33.017 3.37988 30 3.37988C26.983 3.37988 24.5374 5.74203 24.5374 8.65588C24.5374 11.5697 26.983 13.9319 30 13.9319Z" }))));
38
38
  };
39
- var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n .mapboxgl-marker.active {\n span {\n color: #fff;\n }\n .farm { fill: #273C44; }\n .farm-stroke { visibility: visible; fill: #fff; }\n .background { fill: #808080; }\n &:hover {\n .background { fill: #808080; }\n }\n } \n"], ["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n .mapboxgl-marker.active {\n span {\n color: #fff;\n }\n .farm { fill: #273C44; }\n .farm-stroke { visibility: visible; fill: #fff; }\n .background { fill: #808080; }\n &:hover {\n .background { fill: #808080; }\n }\n } \n"
39
+ var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n // Translate icon so that pin is exactly at center of lat/lng.\n transform: translateX(0.5px) translateY(-34px);\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n .mapboxgl-marker.active {\n span {\n color: #fff;\n }\n .farm { fill: #273C44; }\n .farm-stroke { visibility: visible; fill: #fff; }\n .background { fill: #808080; }\n &:hover {\n .background { fill: #808080; }\n }\n } \n"], ["\n // Position and size:\n position: relative;\n box-sizing: border-box;\n width: 60px;\n height: 60px;\n // Translate icon so that pin is exactly at center of lat/lng.\n transform: translateX(0.5px) translateY(-34px);\n\n & > svg {\n width: 100%;\n height: 100%;\n } \n\n & > span {\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n color: #476988;\n pointer-events: none; // Don't capture SVG's mouse events\n margin-bottom: 5px;\n }\n\n & > svg {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: pointer;\n filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n }\n\n // By default, all first-level paths/g in marker are hidden.\n & > svg > * { visibility: hidden; }\n \n // Unhide and color parts based on marker class.\n &.unaudited {\n .farm { visibility: visible; }\n .arrow { visibility: visible; }\n &:hover {\n .farm-stroke { visibility: visible; fill: #888; }\n }\n }\n\n &.audited {\n .farm { visibility: visible; fill: #fff; }\n .arrow { visibility: visible; fill: #fff; }\n .no-action { visibility: visible; }\n .background { visibility: visible; }\n &:hover {\n .background { fill: #fff; }\n }\n }\n\n &.actioned {\n .no-action { visibility: hidden; }\n .audit { visibility: visible; }\n .action { visibility: visible; }\n .action-shadow { visibility: visible; }\n }\n\n .mapboxgl-marker.active {\n span {\n color: #fff;\n }\n .farm { fill: #273C44; }\n .farm-stroke { visibility: visible; fill: #fff; }\n .background { fill: #808080; }\n &:hover {\n .background { fill: #808080; }\n }\n } \n"
40
40
  /**
41
41
  * A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as
42
42
  * component on its own.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.71",
3
+ "version": "1.0.73",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",