Custom HTML in Content of PopupTemplate

[djrpascu]

I'm trying to include some custom HTML (Bootstrap Carousel) into the Content of PopupTemplate. I'm currently using TextPopupContent, but I noticed that ArcGIS JS API is sanitizing the HTML (stripping id, data attributes, buttons, etc.)

I found the following post: Using HTML with Popups in the ArcGIS API for JavaScript

Seems the workaround is to return an HTMLElement and replace the innerHTML. I see it's possible to return HTMLElement with: CustomContent

I see that Geoblazor has TextPopupContent, but does CustomContent need to be exposed to be able to return HTMLElement? Or can I do it with TextPopupContent somehow? I think I have to do some JSInterop to replace the innerHTML, but if anyone has any insight into getting buttons to work in PopupTemplate, please share.

Thanks much!

[TimPurdum]

@djrpascu you are correct, we don't have CustomContent implemented as a wrapper yet. I will leave this open as a feature request.

In the meantime, you can write your own JS extension to get to this feature with the instructions here: https://docs.geoblazor.com/pages/jsExtensions.html

[djrpascu]

@TimPurdum thanks for pointing me to the extensions page. I tried starting with the sample at: https://docs.geoblazor.com/pages/jsExtensions.html

But mapView.JsRuntime would always return arcGisObjectRefs = undefined. After looking in the DisplayProjection example, it uses mapView.JsModule instead, so not sure if that's a typo.

Also, once I got Core object populated using JsModule, I got stuck trying to figure out how to define a Point. I see that Graphic is exposed and I am able to pass a Symbol from Blazor over, but I'm stumped on how to create the geometry or Point on the JS side. I thought Core would expose all the ArcGIS JS API classes, but I only see certain things, like Graphic.

Trying to do the following:

let stationPoint = new Core.Point({ longitude: stations[x].Longitude, latitude: stations[x].Latitude });

but getting this error:

TypeError: Core.Point is not a constructor

[TimPurdum]

@djrpascu yes, I do think that's a typo in the docs, thanks for pointing that out!

Did you try just new Point instead of new Core.Point? It is possible that we aren't re-exporting point from our typescript bundle. However, a lot of the ArcGIS JS will just accept untyped objects as well. See the examples here, the geometries are all defined without JS types.

[djrpascu]

@TimPurdum yes, i did try like following:

let stationPoint = new Point({ longitude: stations[x].Longitude, latitude: stations[x].Latitude });

ReferenceError: Point is not defined

if i try untyped:

let stationPoint = { longitude: stations[x].Longitude, latitude: stations[x].Latitude };

i get the following:

[esri.core.accessorSupport.ensureTypes] Accessor#set Invalid property value, value needs to be one of 'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline', 'esri.geometry.Polygon', or a plain object that can autocast (having .type = 'extent', 'multipoint', 'point', 'polyline', 'polygon')

this is how i'm setting Graphic:

            let stationGraphic = new Core.Graphic({
                geometry: stationPoint,
                symbol: stationInServiceSymbol
            });

[djrpascu]

ah kk, this works

let stationPoint = { type: "point", longitude: stations[x].Longitude, latitude: stations[x].Latitude };