Calling a table item from custom HTML

Anvil Q&A
#1

What I’m trying to do:
I can create a KML file from received data streams stored in a data table in anvil and I want to link to it from a custom HTML template. It’s either that or re-write my custom HTML to work in Anvil - either solution works for me, though I suspect that the former is easier than the latter.
What I’ve tried and what’s not working:
See the below code snippet of custom HTML - this currently adds a map layer that links out to a file “insert link here.kml” - I essentially want to create that map layer from an internally generated anvil method.

Code Sample:

# this is a formatted code snippet.
# paste your code between ``` 
<center style="font-style:italic; color:#888; margin: 3em;">
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OS Maps API | Basic Map WMTS (EPSG:27700) | OpenLayers</title>
    <link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.3.0/os-api-branding.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id="map"></div>

<script src="https://labs.os.uk/public/os-api-branding/v0.3.0/os-api-branding.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.0/proj4.js"></script>
<script>

    var apiKey = 'apikeyhere';

    var serviceUrl = 'https://api.os.uk/maps/raster/v1/wmts';

    var parser = new ol.format.WMTSCapabilities();
    var map;

    // Setup the EPSG:27700 (British National Grid) projection.
    proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");
    ol.proj.proj4.register(proj4);

    fetch(serviceUrl + '?key=' + apiKey + '&service=WMTS&request=GetCapabilities&version=2.0.0')
        .then(response => response.text())
        .then(text => {
            var result = parser.read(text);
            var options = ol.source.WMTS.optionsFromCapabilities(result, {
                layer: 'Leisure_27700',
                matrixSet: 'EPSG:27700'
            });

            var source = new ol.source.WMTS(options);
            var layer = new ol.layer.Tile({ source: source });

            // Initialize the map object.
            map = new ol.Map({
                layers: [ layer , new ol.layer.Vector({
                                    source: new ol.source.Vector({
                                    url: "insert link here.kml",
                                    format: new ol.format.KML()
                                    })
                                  })
                        ],
                target: 'map',
                view: new ol.View({
                    projection: 'EPSG:27700',
                    extent: [ -238375.0, 0.0, 900000.0, 1376256.0 ],
                    resolutions: options.tileGrid.getResolutions(),
                    minZoom: 0,
                    maxZoom: 9,
                    center: [ 258318, 85367 ],
                    zoom: 6
                })
            });
        
    });

</script>

</body>
</html>
</center>

Clone link:
share a copy of your app

#2

If that HTML is in a Custom HTML form, you do not need the entire HTML structure. The Anvil app is already inside a web page, so the html, head, and body tags are already present. You just need the the specific parts for this part of the form.

Beyond that, the custom HTML form has an html property that you can use to set the HTML for the form. You can build the HTML as a string in a form function and then set self.html to change the HTML for the page. Since you’re building the HTML as a string, you can combine any sort of text you want with it from any source.

1 Like
#3

Jay,

Thanks - neat idea to use custom string. However, I don’t think that quite solves the problem, as what I need to do is provide a link to a local source (I.e. build a KML string, then store it locally in a table as an object or similar). I can’t do that static right now, though being able to do the same thing with dynamic updates would of course be local.

#4

Try creating a media object from the string and storing it into a table. That’ll allow you to get a url from the media object. No idea if it’ll work for your particular case, but that’s what I’d try next.

#5

Where do you find the URL for the media object? I’m having a slow evening!

#6

I usually visit Anvil Docs | Overview and type “media url” in the Search box at the top of the page. That narrows things down quite a bit.

#7

Got the link to the KML file in the table working, @p.colbert thanks, the user guide contains a good example.

@jshaffstall - using HTML string as a variable - this works, but for future reference, using JS with {} you need to escape the { and } required for the text string with another { and }. Working another issue with getting the HTML to function as a component - see separate thread.