Map loads in certain browsers about fgpv-vpgf

[james-rae]

Doubt we will have that prioritization/resources for this older codebase.
RAMP4 spits out a "package" build, I will add a discussion item for us to look into putting it on npm

[prosperva]

It seems like the map is is being drawn while calculation for visibility is still happening (removing the function, the map loads in all browsers with no issues). The function that calculates layer visibility looks as follows:

function isLayerVisible(layerId: string) {
  if (localStorage.getItem("selectedLayers") != null) {
    let savedLayers = localStorage.getItem("selectedLayers")!.split(",");
    return savedLayers.includes(layerId);
  }
}

The config is as follows using isLayerVisible function

Line: "visibility": ` + isLayerVisible("fire_m3_hotspots") + `:

    {
      "layerChoice": "file",
      "layerType": "esriFeature",
      "fileType": "geojson",
      "colour": "#E633FF",
      "tolerance": 5,
      "outfields": "*",
      "controls": [
        "opacity",
        "visibility",
        "boundingBox",
        "query",
        "snapshot",
        "metadata",
        "boundaryZoom",
        "refresh",
        "reload",
        "remove",
        "settings",
        "data",
        "styles"
      ],
      "disabledControls": [],
      "enableStructuredDelete": false,
      "state": {
        "opacity": 0.5,
        "visibility": ` +
  isLayerVisible("fire_m3_hotspots") +
  `,
        "boundingBox": false,
        "query": true,
        "snapshot": false,
        "hovertips": true
      },
      "table": {
        "title": "",
        "maximize": false,
        "lazyFilter": false,
        "applyMap": false,
        "showFilter": true,
        "filterByExtent": false,
        "searchStrictMatch": false,
        "printEnabled": false,
        "columns": []
      },
      "name": "Fire M3 Hotspots",
      "id": "fire_m3_hotspots",
      "customRenderer": { 
        "type": "classBreaks",
        "field" : "age",
        "minValue": 0,
        "classBreakInfos": [
          {
            "minValue": 0,
            "classMaxValue": 6,
            "label": "0 - 6 hours",
            "symbol": {
              "type": "esriSMS",
              "style": "esriSMSCircle",
                "color": [255, 0, 0],
                "size": 8,
                "angle": 0,
                "xoffset": 0,
                "yoffset": 0,
                "outline": {
                  "color": [255, 0, 0],
                  "width": 1
                }
            }
          },
          {
            "minValue": 6,
            "classMaxValue": 12,
            "label": "6 - 12 hours",
            "symbol": {
              "type": "esriSMS",
              "style": "esriSMSCircle",
                "color": [255, 175, 0],
                "size": 8,
                "angle": 0,
                "xoffset": 0,
                "yoffset": 0,
                "outline": {
                  "color": [255, 175, 0],
                  "width": 1
                }
            }
          },
          {
            "minValue": 12,
            "classMaxValue": 24,
            "label": "12 - 24 hours",
            "symbol": {
              "type": "esriSMS",
              "style": "esriSMSCircle",
                "color": [255, 255, 0],
                "size": 8,
                "angle": 0,
                "xoffset": 0,
                "yoffset": 0,
                "outline": {
                  "color": [255, 255, 0],
                  "width": 1
                }
            }
          }
        ]
      },
      "url": "https://cwfis.cfs.nrcan.gc.ca/geoserver/public/ows?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&typeName=public%3Ahotspots_last24hrs&outputFormat=application%2Fjson"
    }

Above JSON is then passed to data-rv-config as data-rv-config={configValue}

[james-rae]

Instead of using a div that takes data-rv-config, perhaps you could try this approach

https://fgpv-vpgf.github.io/fgpv-vpgf/develop/docs/#/mapauthor/intro?id=_2-api

Run your custom code that generates your desired config file, then use the RAMP.Map(<mydiv>, <myconfig>) to create the map when you are ready.

I rarely use this so hoping it still works / does what you need.

[prosperva]

I noticed that this takes a file as an argument though. This means that the file is static whereas in my case I am modifying a variable before it is passed to the map id

[james-rae]

The source suggests it will accept a JSON object as well.
This line indicates the object needs to have the "version" property set, but thats all the check is really validating.

So try if you feel like it. Hope it works. Actually maybe try with and without the version. That IF statement is funnylookin' and I didn't write it, so maybe one path will do what you're trying to do.

[prosperva]

Has the RAMP team discussed making RAMP an npm package for people using React or Angular.