diff --git a/packages/web/src/celldata/MapCellView.svelte b/packages/web/src/celldata/MapCellView.svelte
index 71fa90474..6f119dbe7 100644
--- a/packages/web/src/celldata/MapCellView.svelte
+++ b/packages/web/src/celldata/MapCellView.svelte
@@ -19,6 +19,10 @@
let selectionLayers = [];
+ function createColumnsTable(cells) {
+ return `
${cells.map(cell => `| ${cell.column} | ${cell.value} |
`).join('\n')}
`;
+ }
+
function addSelectionToMap() {
if (!map) return;
if (!selection) return;
@@ -28,36 +32,51 @@
}
selectionLayers = [];
- const geoValues = selection.map(x => x.value).filter(isWktGeometry);
-
- const geometries = [];
-
- if (geoValues.length > 0) {
- // parse WKT to geoJSON array
- geometries.push(...geoValues.map(wellknown));
- }
-
const selectedRows = _.groupBy(selection || [], 'row');
+
+ const features = [];
+
for (const rowKey of _.keys(selectedRows)) {
const cells = selectedRows[rowKey];
const lat = cells.find(x => x.column.toLowerCase().includes('lat'));
const lon = cells.find(x => x.column.toLowerCase().includes('lon') || x.column.toLowerCase().includes('lng'));
+ const geoValues = cells.map(x => x.value).filter(isWktGeometry);
+
if (lat && lon) {
- geometries.push({
- type: 'Point',
- coordinates: [lon.value, lat.value],
+ features.push({
+ type: 'Feature',
+ properties: {
+ popupContent: createColumnsTable(cells),
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [lon.value, lat.value],
+ },
});
}
+
+ if (geoValues.length > 0) {
+ // parse WKT to geoJSON array
+ features.push(
+ ...geoValues.map(wellknown).map(geometry => ({
+ type: 'Feature',
+ properties: {
+ popupContent: createColumnsTable(cells.filter(x => !isWktGeometry(x.value))),
+ },
+ geometry,
+ }))
+ );
+ }
}
- if (geometries.length == 0) {
+ if (features.length == 0) {
return;
}
const geoJson = {
- type: 'GeometryCollection',
- geometries,
+ type: 'FeatureCollection',
+ features,
};
const geoJsonObj = leaflet
@@ -71,7 +90,7 @@
fillOpacity: 0.4,
};
},
- pointToLayer: function (feature, latlng) {
+ pointToLayer: (feature, latlng) => {
return leaflet.circleMarker(latlng, {
radius: 7,
weight: 2,
@@ -81,29 +100,21 @@
fillOpacity: 0.4,
});
},
+ onEachFeature: (feature, layer) => {
+ // does this feature have a property named popupContent?
+ if (feature.properties && feature.properties.popupContent) {
+ layer.bindPopup(feature.properties.popupContent);
+ }
+ },
})
.addTo(map);
+ // geoJsonObj.bindPopup('This is the Transamerica Pyramid'); //.openPopup();
map.fitBounds(geoJsonObj.getBounds());
selectionLayers.push(geoJsonObj);
}
onMount(() => {
- // new Map({
- // target: refContainer,
- // layers: [
- // new TileLayer({
- // source: new XYZ({
- // url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
- // }),
- // }),
- // ],
- // view: new View({
- // center: [0, 0],
- // zoom: 2,
- // }),
- // });
-
- map = leaflet.map(refContainer); // .setView([51.505, -0.09], 13);
+ map = leaflet.map(refContainer).setView([50, 15], 13);
leaflet
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
diff --git a/packages/web/src/widgets/CellDataWidget.svelte b/packages/web/src/widgets/CellDataWidget.svelte
index 0829726ea..78bc1550b 100644
--- a/packages/web/src/widgets/CellDataWidget.svelte
+++ b/packages/web/src/widgets/CellDataWidget.svelte
@@ -51,7 +51,7 @@ import { isWktGeometry } from 'dbgate-tools';
return 'jsonRow';
}
- if (selection.length > 0 && _.every(selection, x => isWktGeometry(x.value))) {
+ if (selection.length > 0 && _.find(selection, x => isWktGeometry(x.value))) {
return 'map';
}