@mwater/visualization 5.3.2 → 5.4.0

package/src/maps/MapLayerViewDesignerComponent.ts

@@ -71,7 +71,7 @@ export default class MapLayerViewDesignerComponent extends React.Component<
 
   handleRename = () => {
     if (this.props.allowEditingLayer) {
-      const name = prompt("Enter new name", this.props.layerView.name)
+      const name = prompt(T`Enter new name`, this.props.layerView.name)
       if (name) {
         return this.update({ name })
       }
@@ -104,15 +104,15 @@ export default class MapLayerViewDesignerComponent extends React.Component<
       R(
         ui.Checkbox,
         { value: this.props.layerView.hideLegend, onChange: this.handleHideLegend, inline: true },
-        "Hide Legend"
+        T`Hide Legend`
       ),
-      R("label", { className: "text-muted", key: "label" }, "Group:"),
+      R("label", { className: "text-muted", key: "label" }, T`Group:`),
       R(ui.TextInput, {
         key: "input",
         value: this.props.layerView.group,
         onChange: this.handleGroupChange,
         style: { width: "5em" },
-        placeholder: "None"
+        placeholder: T`None`
       }),
       R(
         "div",
@@ -120,7 +120,7 @@ export default class MapLayerViewDesignerComponent extends React.Component<
         R(
           PopoverHelpComponent,
           { placement: "top", key: "help" },
-          "Layers in the same group can only be selected one at a time"
+          T`Layers in the same group can only be selected one at a time`
         )
       )
     )
@@ -161,8 +161,8 @@ export default class MapLayerViewDesignerComponent extends React.Component<
         "a",
         { className: "link-plain", onClick: this.handleToggleEditing, style: { fontSize: 12 } },
         this.state.editing
-          ? [R("i", { className: "fa fa-caret-up" }), " Close"]
-          : [R("i", { className: "fa fa-cog" }), " Customize..."]
+          ? [R("i", { className: "fa fa-caret-up" }), T` Close`]
+          : [R("i", { className: "fa fa-cog" }), T` Customize...`]
       )
     )
   }
@@ -172,7 +172,7 @@ export default class MapLayerViewDesignerComponent extends React.Component<
   }
 
   handleRemove = () => {
-    if (confirm("Delete layer?")) {
+    if (confirm(T`Delete layer?`)) {
       return this.props.onRemove()
     }
   }
@@ -184,7 +184,7 @@ export default class MapLayerViewDesignerComponent extends React.Component<
       R(
         "label",
         { className: "text-muted" },
-        R("span", null, `Opacity: ${Math.round(this.props.layerView.opacity * 100)}%`)
+        R("span", null, T`Opacity: ${Math.round(this.props.layerView.opacity * 100)}%`)
       ),
       R(
         "div",

package/src/maps/MarkerSymbolSelectComponent.ts

@@ -1,9 +1,8 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
 import { default as ReactSelect } from "react-select"
-import { mapSymbols } from "./mapSymbols"
+import { getMapSymbols } from "./mapSymbols"
 
 export interface MarkerSymbolSelectComponentProps {
   symbol?: string
@@ -14,7 +13,7 @@ export interface MarkerSymbolSelectComponentProps {
 export default class MarkerSymbolSelectComponent extends React.Component<MarkerSymbolSelectComponentProps> {
   render() {
     // Create options
-    const options = mapSymbols
+    const options = getMapSymbols()
 
     const optionRenderer = (option: any) =>
       R(
@@ -27,9 +26,9 @@ export default class MarkerSymbolSelectComponent extends React.Component<MarkerS
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fa fa-star" }), " ", "Symbol"),
+      R("label", { className: "text-muted" }, R("span", { className: "fa fa-star" }), " ", T`Symbol`),
       R(ReactSelect, {
-        placeholder: "Circle",
+        placeholder: T`Circle`,
         value: _.findWhere(options, { value: this.props.symbol }) || null,
         options,
         formatOptionLabel: optionRenderer,

package/src/maps/MarkersLayerDesignerComponent.ts

@@ -78,7 +78,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"),
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
       R(
         "div",
         { style: { marginLeft: 10 } },
@@ -98,7 +98,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
       return
     }
 
-    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " Location")
+    const title = R("span", null, R("span", { className: "fas fa-map-marker-alt" }), " ", T`Location`)
 
     const filters = _.clone(this.props.filters) || []
 
@@ -153,7 +153,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
         ? R(
             "div",
             { className: "mb-3" },
-            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color"),
+            R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color`),
 
             R(
               "div",
@@ -169,7 +169,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Color By Data"),
+        R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T`Color By Data`),
 
         R(AxisComponent, {
           schema: this.props.schema,
@@ -204,15 +204,15 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Marker Size"),
+      R("label", { className: "text-muted" }, T`Marker Size`),
       R(ui.Select, {
         value: this.props.design.markerSize || 10,
         options: [
-          { value: 5, label: "Extra small" },
-          { value: 8, label: "Small" },
-          { value: 10, label: "Normal" },
-          { value: 13, label: "Large" },
-          { value: 16, label: "Extra large" }
+          { value: 5, label: T`Extra small` },
+          { value: 8, label: T`Small` },
+          { value: 10, label: T`Normal` },
+          { value: 13, label: T`Large` },
+          { value: 16, label: T`Extra large` }
         ],
         onChange: this.handleMarkerSizeChange
       })
@@ -227,17 +227,17 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Line Width (for shapes)"),
+      R("label", { className: "text-muted" }, T`Line Width (for shapes)`),
       R(ui.Select, {
         value: this.props.design.lineWidth != null ? this.props.design.lineWidth : 3,
         options: [
-          { value: 0, label: "None" },
-          { value: 1, label: "1 pixel" },
-          { value: 2, label: "2 pixels" },
-          { value: 3, label: "3 pixels" },
-          { value: 4, label: "4 pixels" },
-          { value: 5, label: "5 pixels" },
-          { value: 6, label: "6 pixels" }
+          { value: 0, label: T`None` },
+          { value: 1, label: T`1 pixel` },
+          { value: 2, label: T`2 pixels` },
+          { value: 3, label: T`3 pixels` },
+          { value: 4, label: T`4 pixels` },
+          { value: 5, label: T`5 pixels` },
+          { value: 6, label: T`6 pixels` }
         ],
         onChange: this.handleLineWidthChange
       })
@@ -252,7 +252,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Polygon border color (blank for same as fill color)"),
+      R("label", { className: "text-muted" }, T`Polygon border color (blank for same as fill color)`),
       R(
         "div",
         null,
@@ -274,7 +274,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     return R(
       "div",
       { className: "mb-3"},
-      R("label", { className: "text-muted" }, R("span", null, `Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)),
+      R("label", { className: "text-muted" }, R("span", null, T`Polygon Fill Opacity: ${Math.round(opacity * 100)}%`)),
       R(
         "div",
         { style: { padding: "10px" } },
@@ -299,7 +299,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },
@@ -356,7 +356,7 @@ export default class MarkersLayerDesignerComponent extends React.Component<Marke
       this.renderSymbol(),
       this.renderMarkerSize(),
       R(ui.CollapsibleSection, {
-        label: "Shape Options",
+        label: T`Shape Options`,
         labelMuted: true
       }, [
         this.renderLineWidth(),

package/src/maps/PopupFilterJoinsEditComponent.ts

@@ -56,7 +56,7 @@ export default class PopupFilterJoinsEditComponent extends React.Component<
       return R(
         "a",
         { className: "btn btn-link", onClick: () => this.setState({ expanded: true }) },
-        "Advanced Popup Options"
+        T`Advanced Popup Options`
       )
     }
 
@@ -73,11 +73,11 @@ export default class PopupFilterJoinsEditComponent extends React.Component<
     return R(
       "div",
       null,
-      R("div", { className: "text-muted" }, "Optional connections for other tables to filtering the popup"),
+      R("div", { className: "text-muted" }, T`Optional connections for other tables to filtering the popup`),
       R(
         "table",
         { className: "table table-sm table-bordered" },
-        R("thead", null, R("tr", null, R("th", null, "Data Source"), R("th", null, "Connection"))),
+        R("thead", null, R("tr", null, R("th", null, T`Data Source`), R("th", null, T`Connection`))),
         R(
           "tbody",
           null,
@@ -102,7 +102,7 @@ export default class PopupFilterJoinsEditComponent extends React.Component<
                   types: this.props.table === this.props.idTable ? ["id", "id[]"] : ["id"], // TODO support id[] some day for admin choropleth maps too
                   idTable: this.props.idTable,
                   preferLiteral: false,
-                  placeholder: "None"
+                  placeholder: T`None`
                 })
               )
             )

package/src/maps/RasterMapViewComponent.ts

@@ -12,7 +12,7 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import { MapDesign } from "./MapDesign"
 import { MapDataSource } from "./MapDataSource"
 import { MapScope } from "./MapUtils"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 
 export interface RasterMapViewComponentProps {
   schema: Schema
@@ -239,7 +239,7 @@ export default class RasterMapViewComponent extends React.Component<
       R(
         "div",
         { style: { textAlign: "right", marginTop: 10 } },
-        R("button", { className: "btn btn-secondary", onClick: () => this.setState({ popupContents: null }) }, "Close")
+        R("button", { className: "btn btn-secondary", onClick: () => this.setState({ popupContents: null }) }, T`Close`)
       )
     )
   }

package/src/maps/RegionSelectComponent.ts

@@ -23,7 +23,6 @@ export interface RegionSelectComponentProps {
 // Allows selecting of a single region
 export default class RegionSelectComponent extends React.Component<RegionSelectComponentProps> {
   static defaultProps = {
-    placeholder: "All Countries",
     regionsTable: "admin_regions"
   }
 
@@ -72,7 +71,7 @@ export default class RegionSelectComponent extends React.Component<RegionSelectC
       idTable: this.props.regionsTable!,
       schema: this.props.schema,
       dataSource: this.props.dataSource,
-      placeholder: this.props.placeholder,
+      placeholder: this.props.placeholder || T`All Countries`,
       orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }],
       filter
     })

package/src/maps/ScopeAndDetailLevelComponent.ts

@@ -56,7 +56,7 @@ export default class ScopeAndDetailLevelComponent extends React.Component<ScopeA
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, "Region to Map"),
+        R("label", { className: "text-muted" }, T`Region to Map`),
         R(RegionSelectComponent, {
           region: this.props.scope,
           onChange: this.handleScopeChange,
@@ -64,13 +64,13 @@ export default class ScopeAndDetailLevelComponent extends React.Component<ScopeA
           dataSource: this.props.dataSource,
           regionsTable: this.props.regionsTable,
           maxLevel: maxLevel - 1,
-          placeholder: "All Regions"
+          placeholder: T`All Regions`
         })
       ),
       R(
         "div",
         { className: "mb-3" },
-        R("label", { className: "text-muted" }, "Detail Level"),
+        R("label", { className: "text-muted" }, T`Detail Level`),
         R(ui.Select, {
           value: this.props.detailLevel,
           options: detailLevelOptions,

package/src/maps/TileUrlLayer.tsx

@@ -99,7 +99,7 @@ export default class TileUrlLayer extends Layer<TileUrlLayerDesign> {
   // Validates design. Null if ok, message otherwise
   validateDesign(design: any, schema: Schema) {
     if (!design.tileUrl) {
-      return "Missing Url"
+      return T`Missing Url`
     }
     return null
   }
@@ -127,12 +127,12 @@ class TileUrlLayerDesignerComponent extends React.Component<TileUrlLayerDesigner
     }
 
     return <div className="mb-3">
-      <FormGroup label="Url (containing {z}, {x} and {y})" labelMuted>
+      <FormGroup label={T`Url (containing {z}, {x} and {y})`} labelMuted>
         <TextInput
           value={this.props.design.tileUrl}
           onChange={this.handleTileUrlChange} />
       </FormGroup>
-      <FormGroup label="Optional URL of Legend" labelMuted>
+      <FormGroup label={T`Optional URL of Legend`} labelMuted>
         <TextInput
           value={this.props.design.legendUrl || ""}
           onChange={this.handleLegendUrlChange} />

package/src/maps/VectorMapViewComponent.tsx

@@ -396,12 +396,12 @@ export function VectorMapViewComponent(props: {
   useEffect(() => {
     updateUserStyle()
   }, [
-    props.design.layerViews,
-    props.scope,
+    JSON.stringify(props.design.layerViews),
+    JSON.stringify(props.scope),
     layersCreatedAfter,
     JSON.stringify(props.extraFilters),
-    props.design.filters,
-    props.design.globalFilters,
+    JSON.stringify(props.design.filters),
+    JSON.stringify(props.design.globalFilters),
     props.refreshTrigger
   ])
 
@@ -564,7 +564,7 @@ export function VectorMapViewComponent(props: {
         <div style={{ height: "80vh" }}>{popupContents}</div>
         <div style={{ textAlign: "right", marginTop: 10 }}>
           <button className="btn btn-secondary" onClick={() => setPopupContents(null)}>
-            Close
+            {T`Close`}
           </button>
         </div>
       </ModalPopupComponent>

package/src/maps/ZoomLevelsComponent.ts

@@ -31,7 +31,7 @@ export default class ZoomLevelsComponent extends React.Component<ZoomLevelsCompo
         R(
           "a",
           { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) },
-          "Zoom level options..."
+          T`Zoom level options...`
         )
       )
     }
@@ -39,16 +39,16 @@ export default class ZoomLevelsComponent extends React.Component<ZoomLevelsCompo
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, "Zoom level options"),
+      R("label", { className: "text-muted" }, T`Zoom level options`),
       R(
         "div",
         { key: "min" },
-        R("span", { className: "text-muted" }, "Minimum Zoom Level:"),
+        R("span", { className: "text-muted" }, T`Minimum Zoom Level:`),
         " ",
         R(NumberInputComponent, {
           small: true,
           style: { display: "inline-block" },
-          placeholder: "None",
+          placeholder: T`None`,
           value: this.props.design.minZoom,
           onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { minZoom: v }))
         })
@@ -57,12 +57,12 @@ export default class ZoomLevelsComponent extends React.Component<ZoomLevelsCompo
       R(
         "div",
         { key: "max" },
-        R("span", { className: "text-muted" }, "Maximum Zoom Level: "),
+        R("span", { className: "text-muted" }, T`Maximum Zoom Level: `),
         " ",
         R(NumberInputComponent, {
           small: true,
           style: { display: "inline-block" },
-          placeholder: "None",
+          placeholder: T`None`,
           value: this.props.design.maxZoom,
           onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { maxZoom: v }))
         })

package/src/maps/mapSymbols.ts

@@ -48,117 +48,117 @@ import beer from "./symbols/font-awesome/beer.png"
 import cloud_rain from "./symbols/font-awesome/cloud-rain.png"
 
 /** Symbols used on the map */
-export const mapSymbols: { value: string; label: string; url: string }[] = [
+export const getMapSymbols = (): { value: string; label: string; url: string }[] => [
   {
     url: dot_circle_o,
     value: "font-awesome/dot-circle-o",
-    label: "Dot circle"
+    label: T`Dot circle`
   },
-  { url: bullseye, value: "font-awesome/bullseye", label: "Bullseye" },
-  { url: star, value: "font-awesome/star", label: "Star" },
-  { url: square, value: "font-awesome/square", label: "Square" },
-  { url: home, value: "font-awesome/home", label: "Home" },
-  { url: plus, value: "font-awesome/plus", label: "Plus" },
+  { url: bullseye, value: "font-awesome/bullseye", label: T`Bullseye` },
+  { url: star, value: "font-awesome/star", label: T`Star` },
+  { url: square, value: "font-awesome/square", label: T`Square` },
+  { url: home, value: "font-awesome/home", label: T`Home` },
+  { url: plus, value: "font-awesome/plus", label: T`Plus` },
   {
     url: plus_circle,
     value: "font-awesome/plus-circle",
-    label: "Plus Circle"
+    label: T`Plus Circle`
   },
   {
     url: plus_square,
     value: "font-awesome/plus-square",
-    label: "Plus Square"
+    label: T`Plus Square`
   },
-  { url: asterisk, value: "font-awesome/asterisk", label: "Asterisk" },
-  { url: mobile, value: "font-awesome/mobile", label: "Mobile" },
-  { url: check, value: "font-awesome/check", label: "Check" },
+  { url: asterisk, value: "font-awesome/asterisk", label: T`Asterisk` },
+  { url: mobile, value: "font-awesome/mobile", label: T`Mobile` },
+  { url: check, value: "font-awesome/check", label: T`Check` },
   {
     url: university,
     value: "font-awesome/university",
-    label: "Institution"
+    label: T`Institution`
   },
   {
     url: check_circle,
     value: "font-awesome/check-circle",
-    label: "Check Circle"
+    label: T`Check Circle`
   },
-  { url: times, value: "font-awesome/times", label: "Removed" },
-  { url: ban, value: "font-awesome/ban", label: "Ban" },
+  { url: times, value: "font-awesome/times", label: T`Removed` },
+  { url: ban, value: "font-awesome/ban", label: T`Ban` },
   {
     url: crosshairs,
     value: "font-awesome/crosshairs",
-    label: "Crosshairs"
+    label: T`Crosshairs`
   },
-  { url: flask, value: "font-awesome/flask", label: "Flask" },
-  { url: flag, value: "font-awesome/flag", label: "Flag" },
+  { url: flask, value: "font-awesome/flask", label: T`Flask` },
+  { url: flag, value: "font-awesome/flag", label: T`Flag` },
   {
     url: info_circle,
     value: "font-awesome/info-circle",
-    label: "Info Circle"
+    label: T`Info Circle`
   },
   {
     url: exclamation_circle,
     value: "font-awesome/exclamation-circle",
-    label: "Exclamation Circle"
+    label: T`Exclamation Circle`
   },
   {
     url: exclamation_triangle,
     value: "font-awesome/exclamation-triangle",
-    label: "Exclamation Triangle"
+    label: T`Exclamation Triangle`
   },
-  { url: bell, value: "font-awesome/bell", label: "Bell" },
-  { url: bolt, value: "font-awesome/bolt", label: "Bolt" },
-  { url: building, value: "font-awesome/building", label: "Building" },
-  { url: bus, value: "font-awesome/bus", label: "Bus" },
+  { url: bell, value: "font-awesome/bell", label: T`Bell` },
+  { url: bolt, value: "font-awesome/bolt", label: T`Bolt` },
+  { url: building, value: "font-awesome/building", label: T`Building` },
+  { url: bus, value: "font-awesome/bus", label: T`Bus` },
   {
     url: certificate,
     value: "font-awesome/certificate",
-    label: "Certificate"
+    label: T`Certificate`
   },
-  { url: comment, value: "font-awesome/comment", label: "Comment" },
-  { url: male, value: "font-awesome/male", label: "Male" },
-  { url: female, value: "font-awesome/female", label: "Female" },
-  { url: user, value: "font-awesome/user", label: "Person" },
-  { url: users, value: "font-awesome/users", label: "Group" },
+  { url: comment, value: "font-awesome/comment", label: T`Comment` },
+  { url: male, value: "font-awesome/male", label: T`Male` },
+  { url: female, value: "font-awesome/female", label: T`Female` },
+  { url: user, value: "font-awesome/user", label: T`Person` },
+  { url: users, value: "font-awesome/users", label: T`Group` },
   {
     url: wheelchair,
     value: "font-awesome/wheelchair",
-    label: "Wheelchair"
+    label: T`Wheelchair`
   },
   {
     url: h_square,
     value: "font-awesome/h-square",
-    label: "Hospital Symbol"
+    label: T`Hospital Symbol`
   },
-  { url: thumbs_up, value: "font-awesome/thumbs-up", label: "Thumbs Up" },
+  { url: thumbs_up, value: "font-awesome/thumbs-up", label: T`Thumbs Up` },
   {
     url: thumbs_down,
     value: "font-awesome/thumbs-down",
-    label: "Thumbs Down"
+    label: T`Thumbs Down`
   },
-  { url: ticket, value: "font-awesome/ticket", label: "Ticket" },
-  { url: tint, value: "font-awesome/tint", label: "Tint" },
+  { url: ticket, value: "font-awesome/ticket", label: T`Ticket` },
+  { url: tint, value: "font-awesome/tint", label: T`Tint` },
   {
     url: times_circle,
     value: "font-awesome/times-circle",
-    label: "Times Circle"
+    label: T`Times Circle`
   },
-  { url: tree, value: "font-awesome/tree", label: "Tree" },
-  { url: file, value: "font-awesome/file", label: "File" },
-  { url: usd, value: "font-awesome/usd", label: "USD" },
-  { url: caret_up, value: "font-awesome/caret-up", label: "Caret Up" },
+  { url: tree, value: "font-awesome/tree", label: T`Tree` },
+  { url: file, value: "font-awesome/file", label: T`File` },
+  { url: usd, value: "font-awesome/usd", label: T`USD` },
+  { url: caret_up, value: "font-awesome/caret-up", label: T`Caret Up` },
   {
     url: chevron_circle_up,
     value: "font-awesome/chevron-circle-up",
-    label: "Chevron Up"
+    label: T`Chevron Up`
   },
   {
     url: chevron_circle_down,
     value: "font-awesome/chevron-circle-down",
-    label: "Chevron Down"
+    label: T`Chevron Down`
   },
-  { url: medkit, value: "font-awesome/medkit", label: "Medkit" },
-  { url: cloud, value: "font-awesome/cloud", label: "Cloud" },
-  { url: cloud_rain, value: "font-awesome/cloud-rain", label: "Cloud Rain" },
-  { url: beer, value: "font-awesome/beer", label: "Cup" }
+  { url: medkit, value: "font-awesome/medkit", label: T`Medkit` },
+  { url: cloud, value: "font-awesome/cloud", label: T`Cloud` },
+  { url: cloud_rain, value: "font-awesome/cloud-rain", label: T`Cloud Rain` },
+  { url: beer, value: "font-awesome/beer", label: T`Cup` }
 ]

package/src/maps/vectorMaps.tsx

@@ -1,7 +1,7 @@
 import _ from "lodash"
 import maplibregl, { Map, LayerSpecification, LngLatBoundsLike, MapLayerMouseEvent } from "maplibre-gl"
 import { useEffect, useMemo, useState } from "react"
-import { mapSymbols } from "./mapSymbols"
+import { getMapSymbols } from "./mapSymbols"
 
 import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
@@ -133,7 +133,7 @@ export function useVectorMap(options: {
       // Dynamically load symbols
       m.on("styleimagemissing" as any, function (ev: { id: string }) {
         // Check if known
-        const mapSymbol = mapSymbols.find((s) => s.value == ev.id)
+        const mapSymbol = getMapSymbols().find((s) => s.value == ev.id)
         if (mapSymbol) {
           m.loadImage(mapSymbol.url, (err: any, image: any) => {
             if (image && !m.hasImage(mapSymbol.value)) {