To finish drawing a line or shape you can double-click or click the "Done" button. Once added you can give each feature a name in the table below.'
+}
+
+const lineFeatureProperties = {
+ stroke: 'rgba(0, 11, 112, 1)',
+ fill: 'rgba(0, 11, 112, 0.2)',
+ strokeWidth: 2
+}
+
+const polygonFeatureProperties = {
+ stroke: 'rgba(0,112,60,1)',
+ fill: 'rgba(0,112,60,0.2)',
+ strokeWidth: 2
+}
+
+/**
+ * Generate a random id
+ */
+function generateID() {
+ return window.crypto.randomUUID()
+}
+
+/**
+ * Render features into the list and hidden textarea
+ * @param {GeoJSON} geojson - the geojson of features
+ * @param {HTMLDivElement} listContainer - where to render the feature list
+ * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
+ */
+function renderFeatures(geojson, listContainer, geospatialInput) {
+ const html = createFeaturesHTML(geojson.features)
+
+ listContainer.innerHTML = html
+ geospatialInput.value = JSON.stringify(geojson.features, null, 2)
+
+ renderFeaturesValue(geojson, geospatialInput)
+}
+
+/**
+ * Returns HTML summary list for the features
+ * @param {FeatureCollection} features - the features
+ */
+function createFeaturesHTML(features) {
+ return `
+ ${features.map(createFeatureHTML).join('\n')}
+
`
+}
+
+/**
+ * Returns HTML summary row for an single feature
+ * @param {Feature} feature - the geo feature
+ */
+function createFeatureHTML(feature) {
+ const changeAction = () => `