${emoji} ${this.escapeHtml(name)}
`;
// Category badge
const categoryColors = {
'water': '#3b82f6',
'school': '#f59e0b',
'health': '#ef4444',
'market': '#8b5cf6',
'default': '#2d5016',
'other': '#6b7280'
};
const catColor = categoryColors[category] || '#6b7280';
html += `
${category}
`;
// Description if available
if (description) {
html += `
${this.escapeHtml(description)}
`;
}
// Coordinates
if (lon !== undefined && lat !== undefined) {
html += `
${Number(lon).toFixed(5)}, ${Number(lat).toFixed(5)}
`;
}
this.popupElement.innerHTML = html;
this.popup.setPosition(coordinate);
}
/**
* Hide the popup
*/
hidePopup() {
this.popup.setPosition(undefined);
}
/**
* Create the info popup overlay for double-click feature details
*/
createInfoPopup() {
this.infoPopupElement = document.createElement('div');
this.infoPopupElement.className = 'map-info-popup';
this.infoPopupElement.style.cssText = `
position: absolute;
background: var(--card, #fff);
color: var(--card-foreground, #1e1a4b);
border-radius: 10px;
padding: 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
font-family: var(--font-body, 'Exo', sans-serif);
font-size: 13px;
min-width: 220px;
max-width: 320px;
max-height: 70vh;
display: flex;
flex-direction: column;
z-index: 1001;
border: 1px solid var(--border, #1e1a4b1f);
overflow: hidden;
`;
this.infoPopup = new Overlay({
element: this.infoPopupElement,
positioning: 'bottom-center',
offset: [0, -10],
stopEvent: true,
autoPan: true,
autoPanAnimation: { duration: 250 },
});
this.map.addOverlay(this.infoPopup);
}
/**
* Show the info popup with feature attributes and area
* @param {Feature} feature - OpenLayers feature
* @param {Array} coordinate - Map coordinate [x, y]
* @param {Object} [options] - Display options
* @param {string} [options.title='Feature Info'] - Popup header title
* @param {string} [options.color='#e11d48'] - Header background colour
*/
showInfoPopup(feature, coordinate, options = {}) {
const { title = 'Feature Info', color = '#e11d48' } = options;
const properties = feature.getProperties();
const geometry = feature.getGeometry();
const geomType = geometry.getType();
// Build attributes table rows (skip geometry and internal keys)
const skipKeys = ['geometry', '_layerType'];
let rows = '';
for (const [key, value] of Object.entries(properties)) {
if (skipKeys.includes(key) || value === undefined || value === null) continue;
rows += `
${this.escapeHtml(title)}
${emoji} ${title}
✏️ Edit Parcel
`;
this.parcelEditElement.innerHTML = html;
this.parcelEditPopup.setPosition(coordinate);
// Close / Cancel handlers
this.parcelEditElement.querySelector('.parcel-edit-close').addEventListener('click', () => {
this.hideParcelEditPopup();
});
this.parcelEditElement.querySelector('.parcel-edit-cancel').addEventListener('click', () => {
this.hideParcelEditPopup();
});
// Form submit handler
const form = this.parcelEditElement.querySelector('.parcel-edit-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
// Collect all edited values
const formData = new FormData(form);
const updatedProps = {};
for (const [key, value] of formData.entries()) {
updatedProps[key] = value;
}
// Restore internal properties that were excluded from the form
updatedProps._layerType = 'parcel';
// Update the feature's properties in-place
for (const [key, value] of Object.entries(updatedProps)) {
this._parcelEditFeature.set(key, value);
}
// Notify external listeners
for (const cb of this._parcelEditCallbacks) {
cb(this._parcelEditFeature, updatedProps);
}
this.hideParcelEditPopup();
});
}
/**
* Hide the parcel edit popup.
*/
hideParcelEditPopup() {
this.parcelEditPopup.setPosition(undefined);
this._parcelEditFeature = null;
}
/**
* Register a callback for when a parcel edit is saved.
* Callback receives (feature, updatedProperties).
*
* @param {Function} callback
*/
onParcelEdit(callback) {
this._parcelEditCallbacks.push(callback);
}
// ============================================================================
// Merge Identifier (UPN) Chooser Popup
// ============================================================================
/**
* Create the merge identifier popup overlay.
* Shown after two parcels are merged so the user can choose which UPN to keep.
*/
createMergePopup() {
this.mergePopupElement = document.createElement('div');
this.mergePopupElement.className = 'map-merge-popup';
this.mergePopupElement.style.cssText = `
position: absolute;
background: var(--card, #fff);
color: var(--card-foreground, #1e1a4b);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
font-family: var(--font-body, 'Exo', sans-serif);
font-size: 13px;
min-width: 280px;
max-width: 360px;
z-index: 1002;
border: 2px solid #10b981;
overflow: hidden;
display: flex;
flex-direction: column;
`;
this.mergePopup = new Overlay({
element: this.mergePopupElement,
positioning: 'bottom-center',
offset: [0, -10],
stopEvent: true,
autoPan: true,
autoPanAnimation: { duration: 250 },
});
this.map.addOverlay(this.mergePopup);
}
/**
* Show the merge identifier popup so the user can pick which parcel's
* attributes (including UPN) the merged polygon should inherit.
*
* @param {Feature} mergedFeature The newly created merged feature
* @param {Object} propsA Properties from original parcel A
* @param {Object} propsB Properties from original parcel B
* @param {Array} coordinate Map coordinate [x, y] for popup placement
*/
showMergeIdentifierPopup(mergedFeature, propsA, propsB, coordinate) {
// Extract identifiers — try common parcel ID field names
const idFields = ['UPN', 'upn', 'id', 'parcelid', 'parcel_id', 'PARCELID', 'PARCEL_ID', 'ID'];
const getLabel = (props) => {
for (const field of idFields) {
if (props[field] !== undefined && props[field] !== null && String(props[field]).trim()) {
return { field, value: String(props[field]) };
}
}
return { field: 'id', value: 'Unknown' };
};
const labelA = getLabel(propsA);
const labelB = getLabel(propsB);
const html = `
🔗 Merged Parcel — Choose Identifier
Select which parcel's attributes the merged polygon should keep:
Divide Polygon
Enter the number of equal pieces:
📐 Polygon Attributes
Area: ${areaFormatted}
`;
this.drawnPolygonElement.innerHTML = html;
this.drawnPolygonPopup.setPosition(coordinate);
// Close / Cancel handlers
this.drawnPolygonElement.querySelector('.drawn-polygon-close').addEventListener('click', () => {
this.hideDrawnPolygonPopup();
});
this.drawnPolygonElement.querySelector('.drawn-polygon-cancel').addEventListener('click', () => {
this.hideDrawnPolygonPopup();
});
// Form submit handler
const form = this.drawnPolygonElement.querySelector('.drawn-polygon-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
const props = {};
for (const [key, value] of formData.entries()) {
props[key] = value;
}
// Set properties on the feature
for (const [key, value] of Object.entries(props)) {
this._drawnPolygonFeature.set(key, value);
}
// Tag as parcel so it integrates with existing parcel tools
this._drawnPolygonFeature.set('_layerType', 'parcel');
// Notify listeners
for (const cb of this._drawnPolygonCallbacks) {
cb(this._drawnPolygonFeature, props);
}
this.hideDrawnPolygonPopup();
});
}
/**
* Hide the drawn polygon attribute popup.
*/
hideDrawnPolygonPopup() {
this.drawnPolygonPopup.setPosition(undefined);
this._drawnPolygonFeature = null;
}
/**
* Register a callback for when drawn polygon attributes are saved.
* Callback receives (feature, properties).
*
* @param {Function} callback
*/
onDrawnPolygonSave(callback) {
this._drawnPolygonCallbacks.push(callback);
}
/**
* Register a double-click callback.
* Callback receives (lon, lat, feature, event).
* Feature is the first feature found at the click pixel across all overlay layers,
* or null if no feature was hit.
* When a feature is hit, the default double-click-zoom is suppressed.
*/
onDblClick(callback) {
this.dblClickCallbacks.push(callback);
// Set up the listener once
if (this.dblClickCallbacks.length === 1) {
this.map.on('dblclick', (evt) => {
const [lon, lat] = toLonLat(evt.coordinate);
// Find any feature at the clicked pixel (overlay layers, not just markers)
let clickedFeature = null;
this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
clickedFeature = feature;
return true; // stop at first hit
});
// If a feature was hit, prevent the default double-click zoom
if (clickedFeature) {
evt.preventDefault();
evt.stopPropagation();
}
// Call all registered callbacks
for (const cb of this.dblClickCallbacks) {
cb(lon, lat, clickedFeature, evt);
}
// Return false to suppress DoubleClickZoom interaction when on a feature
if (clickedFeature) return false;
});
}
return () => {
const idx = this.dblClickCallbacks.indexOf(callback);
if (idx > -1) this.dblClickCallbacks.splice(idx, 1);
};
}
/**
* Escape HTML to prevent XSS
*/
escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
/**
* Create the Add Location popup form overlay
*/
createAddLocationPopup() {
// Create popup container element
this.addLocationPopupElement = document.createElement('div');
this.addLocationPopupElement.className = 'map-add-location-popup';
this.addLocationPopupElement.innerHTML = `
➕ Add Location
`;
// Create the overlay
this.addLocationPopup = new Overlay({
element: this.addLocationPopupElement,
positioning: 'bottom-center',
offset: [0, -10],
stopEvent: true, // Prevent click from propagating
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
this.map.addOverlay(this.addLocationPopup);
// Store clicked coordinates
this.addLocationCoords = null;
// Set up close button handler
const closeBtn = this.addLocationPopupElement.querySelector('.add-location-popup-close');
closeBtn.addEventListener('click', () => {
this.hideAddLocationPopup();
});
// Store form submit callbacks
this.addLocationCallbacks = [];
}
/**
* Show the Add Location popup at the specified coordinate
*/
showAddLocationPopup(coordinate) {
const [lon, lat] = toLonLat(coordinate);
this.addLocationCoords = { lon, lat };
// Update coordinates display
const coordsEl = this.addLocationPopupElement.querySelector('#map-location-coords');
coordsEl.textContent = `${lon.toFixed(6)}, ${lat.toFixed(6)}`;
// Reset form
const form = this.addLocationPopupElement.querySelector('#map-add-location-form');
form.reset();
// Position and show popup
this.addLocationPopup.setPosition(coordinate);
}
/**
* Hide the Add Location popup
*/
hideAddLocationPopup() {
this.addLocationPopup.setPosition(undefined);
this.addLocationCoords = null;
}
/**
* Register a callback for when a location is submitted via the map popup
* Callback receives: { name, category, description, lon, lat }
*/
onAddLocation(callback) {
this.addLocationCallbacks.push(callback);
// Set up form submit handler (only once)
if (this.addLocationCallbacks.length === 1) {
const form = this.addLocationPopupElement.querySelector('#map-add-location-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (!this.addLocationCoords) return;
const formData = new FormData(form);
const data = {
name: formData.get('name'),
category: formData.get('category'),
description: formData.get('description'),
lon: this.addLocationCoords.lon,
lat: this.addLocationCoords.lat,
};
// Call all registered callbacks
this.addLocationCallbacks.forEach(cb => cb(data));
// Hide popup after submission
this.hideAddLocationPopup();
});
}
}
/**
* Create base layers group for LayerSwitcher
*/
createBaseLayers(defaultBasemap) {
const topoLayer = new TileLayer({
title: 'Topographic',
type: 'base',
zIndex: -100,
visible: defaultBasemap === 'topo',
source: new XYZ({
url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
attributions: 'Map data: © OpenTopoMap',
maxZoom: 17,
crossOrigin: 'anonymous',
}),
});
topoLayer.set('basemapKey', 'topo');
const cartoLightLayer = new TileLayer({
title: 'Carto Light',
type: 'base',
zIndex: -100,
visible: defaultBasemap === 'carto-light',
source: new XYZ({
url: 'https://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
attributions: '© CARTO',
maxZoom: 19,
crossOrigin: 'anonymous',
}),
});
cartoLightLayer.set('basemapKey', 'carto-light');
const cartoDarkLayer = new TileLayer({
title: 'Carto Dark',
type: 'base',
zIndex: -100,
visible: defaultBasemap === 'carto-dark',
source: new XYZ({
url: 'https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
attributions: '© CARTO',
maxZoom: 19,
crossOrigin: 'anonymous',
}),
});
cartoDarkLayer.set('basemapKey', 'carto-dark');
const osmCycleLayer = new TileLayer({
title: 'OSM Cycle map',
type: 'base',
zIndex: -100,
visible: false, //defaultBasemap === 'osm',
source: new OSM({
"url" : "https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=ae1339c46dd3446b9c491e7336d38760"
}),
});
osmCycleLayer.set('basemapKey', 'cycle');
const satelliteLayer = new TileLayer({
title: 'Satellite',
type: 'base',
zIndex: -100,
visible: defaultBasemap === 'satellite',
source: new XYZ({
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
attributions: 'Tiles © Esri',
maxZoom: 19,
crossOrigin: 'anonymous',
}),
});
satelliteLayer.set('basemapKey', 'satellite');
const googleLayer = new TileLayer({
title: 'Google Sat',
type: 'base',
zIndex: -100,
visible: defaultBasemap === 'googlesat',
source: new XYZ({
// url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga',
attributions: 'Tiles © Google',
maxZoom: 19,
crossOrigin: 'anonymous',
}),
});
googleLayer.set('basemapKey', 'googlesat');
const osmLayer = new TileLayer({
title: 'OpenStreetMap',
type: 'base',
zIndex: -100,
visible: defaultBasemap === 'osm',
source: new OSM(),
});
osmLayer.set('basemapKey', 'osm');
// Remember the base-map layers so setBaseMap() can toggle visibility later
this._baseMapLayers = [
cartoLightLayer, cartoDarkLayer, osmCycleLayer,
satelliteLayer, googleLayer, osmLayer, topoLayer,
];
// Return LayerGroup for LayerSwitcher
// Note: ol-ext LayerSwitcher iterates layers in reverse — the LAST item
// in this array appears at the TOP of the base-map list in the UI.
return new LayerGroup({
title: 'Base Maps',
layers: [
cartoLightLayer,
cartoDarkLayer,
satelliteLayer,
osmCycleLayer,
googleLayer,
osmLayer,
topoLayer, // ← displayed at the top of the base map stack
],
});
}
/**
* Switch the active base map by key.
* Sets exactly one base layer visible; hides all others.
*
* @param {string} key Basemap key: 'topo' | 'osm' | 'satellite' | 'googlesat' | 'carto-light' | 'carto-dark' | 'cycle'
* @returns {boolean} true if the key matched a known base layer
*/
setBaseMap(key) {
if (!this._baseMapLayers) return false;
let matched = false;
for (const layer of this._baseMapLayers) {
const on = layer.get('basemapKey') === key;
layer.setVisible(on);
if (on) matched = true;
}
if (matched) console.log('[MapView] Base map switched to:', key);
return matched;
}
/**
* Get style for a feature (handles selection state)
*/
getFeatureStyle(feature) {
const category = feature.get('category') || 'default';
const emoji = this.getEmoji(category);
if (feature === this.selectedFeature) {
// Return selected style with the correct emoji and highlight
return [
// Background highlight circle
new Style({
image: new Circle({
radius: 22,
fill: new Fill({ color: 'rgba(220, 38, 38, 0.25)' }),
stroke: new Stroke({ color: '#dc2626', width: 3 }),
}),
}),
// Emoji on top, larger
new Style({
text: new Text({
text: emoji,
font: '40px sans-serif',
textBaseline: 'bottom',
textAlign: 'center',
offsetY: -5,
}),
}),
];
}
// Check for custom style
const customStyle = feature.get('style');
if (customStyle) {
return customStyle;
}
// Return category-based emoji style
if (this.categoryStyles[category]) {
return this.categoryStyles[category];
}
return this.defaultStyle;
}
/**
* Set category-based styles with emojis
* @param {Object} styles - Map of category to config { emoji, label, fontSize }
*/
setCategoryStyles(styles) {
for (const [category, config] of Object.entries(styles)) {
// Update category mapping if provided
if (config.emoji) {
if (!this.categoryEmojis[category]) {
this.categoryEmojis[category] = { emoji: config.emoji, label: config.label || category };
} else {
this.categoryEmojis[category].emoji = config.emoji;
if (config.label) {
this.categoryEmojis[category].label = config.label;
}
}
}
// Create/update style
const emoji = this.getEmoji(category);
const fontSize = config.fontSize || 28;
this.categoryStyles[category] = this.createEmojiStyle(emoji, fontSize);
}
// Refresh markers
this.markerSource.changed();
}
/**
* Add a single marker
*/
addMarker(lon, lat, properties = {}) {
console.log('[MapView] Adding marker at', lon, lat, 'with properties:', properties);
const feature = new Feature({
geometry: new Point(fromLonLat([lon, lat])),
...properties,
});
// Store original coordinates for easy access
feature.set('lon', lon);
feature.set('lat', lat);
this.markerSource.addFeature(feature);
console.log('[MapView] Marker added, total features:', this.markerSource.getFeatures().length);
return feature;
}
/**
* Add multiple markers from an array of location objects
*/
addMarkers(locations) {
console.log('[MapView] Adding', locations.length, 'markers');
const features = locations.map((loc) => {
const feature = new Feature({
geometry: new Point(fromLonLat([loc.longitude, loc.latitude])),
id: loc.id,
name: loc.name,
description: loc.description,
category: loc.category,
lon: loc.longitude,
lat: loc.latitude,
});
return feature;
});
this.markerSource.addFeatures(features);
console.log('[MapView] Markers added, total features:', this.markerSource.getFeatures().length);
return features;
}
/**
* Clear all markers
*/
clearMarkers() {
this.markerSource.clear();
this.selectedFeature = null;
}
/**
* Remove a specific marker by feature or ID
*/
removeMarker(featureOrId) {
if (typeof featureOrId === 'object') {
this.markerSource.removeFeature(featureOrId);
} else {
const feature = this.markerSource.getFeatures().find(
f => f.get('id') === featureOrId
);
if (feature) {
this.markerSource.removeFeature(feature);
}
}
}
/**
* Get all markers
*/
getMarkers() {
return this.markerSource.getFeatures();
}
/**
* Find marker by ID
*/
findMarker(id) {
return this.markerSource.getFeatures().find(f => f.get('id') === id);
}
/**
* Select a marker (highlights it)
*/
selectMarker(featureOrId) {
if (typeof featureOrId === 'object') {
this.selectedFeature = featureOrId;
} else {
this.selectedFeature = this.findMarker(featureOrId);
}
this.markerSource.changed();
return this.selectedFeature;
}
/**
* Clear selection
*/
clearSelection() {
this.selectedFeature = null;
this.markerSource.changed();
}
/**
* Zoom to a specific location
*/
zoomTo(lon, lat, zoom = 15) {
this.map.getView().animate({
center: fromLonLat([lon, lat]),
zoom: zoom,
duration: 500,
});
}
/**
* Fit view to show all markers
*/
fitToMarkers(padding = 50) {
const extent = this.markerSource.getExtent();
if (extent && extent[0] !== Infinity) {
this.map.getView().fit(extent, {
padding: [padding, padding, padding, padding],
duration: 500,
maxZoom: 16,
});
}
}
/**
* Get current map center in lon/lat
*/
getCenter() {
const center = this.map.getView().getCenter();
return toLonLat(center);
}
/**
* Get current zoom level
*/
getZoom() {
return this.map.getView().getZoom();
}
/**
* Set map center
*/
setCenter(lon, lat) {
this.map.getView().setCenter(fromLonLat([lon, lat]));
}
/**
* Set zoom level
*/
setZoom(zoom) {
this.map.getView().setZoom(zoom);
}
/**
* Register click callback
* Callback receives (lon, lat, feature, event)
*
* Single-click is delayed by 300 ms so that a double-click can cancel it.
* If the click lands on an overlay feature (e.g. district boundary) the
* single-click is suppressed entirely — only double-click will fire.
*/
onClick(callback) {
this.clickCallbacks.push(callback);
// Set up click handler if this is the first callback
if (this.clickCallbacks.length === 1) {
this._clickTimer = null;
// Double-click cancels any pending single-click
this.map.on('dblclick', () => {
if (this._clickTimer) {
clearTimeout(this._clickTimer);
this._clickTimer = null;
}
});
this.map.on('click', (evt) => {
// Cancel any previous pending click
if (this._clickTimer) {
clearTimeout(this._clickTimer);
this._clickTimer = null;
}
// When NOT in edit / draw mode, immediately clear any feature
// the Select interaction may have grabbed on this click so the
// user never sees a selection flash.
if (!this._editBarActive && this._selectInteraction) {
this._selectInteraction.getFeatures().clear();
}
// Check what features sit under the click pixel
let hasOverlayFeature = false;
let hasParcelFeature = false;
let markerFeature = null;
this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
if (feature.get('_layerType') === 'parcel') {
hasParcelFeature = true;
}
if (feature.get('name')) {
markerFeature = feature;
}
hasOverlayFeature = true;
});
// If an overlay feature was hit, suppress single-click
// UNLESS it's a parcel or a location marker
if (hasOverlayFeature && !hasParcelFeature && !markerFeature) {
return;
}
// Delay the single-click to allow double-click to cancel it
const [lon, lat] = toLonLat(evt.coordinate);
this._clickTimer = setTimeout(() => {
this._clickTimer = null;
// Find location marker at pixel
let clickedFeature = null;
this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
if (feature.get('name')) {
clickedFeature = feature;
return true;
}
});
for (const cb of this.clickCallbacks) {
cb(lon, lat, clickedFeature, evt);
}
}, 300);
});
}
// Return unsubscribe function
return () => {
const index = this.clickCallbacks.indexOf(callback);
if (index > -1) {
this.clickCallbacks.splice(index, 1);
}
};
}
/**
* Register pointer move callback (for hover effects)
*/
onPointerMove(callback) {
this.map.on('pointermove', (evt) => {
if (evt.dragging) return;
const [lon, lat] = toLonLat(evt.coordinate);
// Only find location markers (features with 'name' property)
let hoveredFeature = null;
this.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
if (feature.get('name')) {
hoveredFeature = feature;
return true;
}
});
// Change cursor
this.map.getTargetElement().style.cursor = hoveredFeature ? 'pointer' : '';
callback(lon, lat, hoveredFeature, evt);
});
}
/**
* Enable cursor change on marker hover
* Note: This is now handled automatically by the popup system
*/
enableHoverCursor() {
// Cursor changes are now handled by setupHoverPopup()
// This method is kept for backwards compatibility
}
/**
* Add a GeoJSON layer (visible in LayerSwitcher).
* By default the layer is added to the root overlay group.
* Pass a targetGroup (LayerGroup) to nest it inside a specific group.
*
* @param {Object} geojson - GeoJSON FeatureCollection or Feature
* @param {string} title - Layer title for the LayerSwitcher
* @param {Object} [styleOptions] - Optional style configuration
* @param {string} [styleOptions.strokeColor='#3b82f6'] - Stroke color
* @param {number} [styleOptions.strokeWidth=2] - Stroke width
* @param {string} [styleOptions.fillColor='rgba(59,130,246,0.1)'] - Fill color
* @param {LayerGroup} [targetGroup] - Optional group to add the layer to
* @returns {VectorLayer} The created layer
*/
addGeoJSONLayer(geojson, title, styleOptions = {}, targetGroup = null) {
const {
strokeColor = '#3b82f6',
strokeWidth = 2,
fillColor = 'rgba(59,130,246,0.1)',
// Optional line "casing": a thicker darker stroke drawn UNDERNEATH the
// main stroke. Used for road-like layers to make light-colored lines
// visible on any base map. Set lineCasingColor to enable; the casing
// width defaults to strokeWidth + 2.
lineCasingColor = null,
lineCasingWidth = null,
pointRadius = 5,
pointFillColor = null, // defaults to strokeColor
pointStrokeColor = '#ffffff',
pointStrokeWidth = 1.5,
} = styleOptions;
const source = new VectorSource({
features: new GeoJSON().readFeatures(geojson, {
featureProjection: 'EPSG:3857',
}),
});
// Build per-geometry styles. OpenLayers picks `image` for Point /
// MultiPoint, `stroke`+`fill` for Polygon / MultiPolygon, and `stroke`
// alone for LineString / MultiLineString. Putting all three on a single
// Style is enough — but a Style with only stroke+fill leaves Points
// invisible, which is what was happening on shapefile import.
const fillStyle = new Fill({ color: fillColor });
const pointStyle = new Circle({
radius: pointRadius,
fill: new Fill({ color: pointFillColor || strokeColor }),
stroke: new Stroke({ color: pointStrokeColor, width: pointStrokeWidth }),
});
// If a line casing is requested, return an array of two Styles per
// feature: the casing renders first (underneath), then the inner stroke.
// For polygons the casing also outlines them; for points the casing has
// no effect (Point geometries only render `image`).
let layerStyle;
if (lineCasingColor) {
const casingW = lineCasingWidth != null ? lineCasingWidth : strokeWidth + 2;
layerStyle = [
new Style({
stroke: new Stroke({ color: lineCasingColor, width: casingW }),
}),
new Style({
stroke: new Stroke({ color: strokeColor, width: strokeWidth }),
fill: fillStyle,
image: pointStyle,
}),
];
} else {
layerStyle = new Style({
stroke: new Stroke({ color: strokeColor, width: strokeWidth }),
fill: fillStyle,
image: pointStyle,
});
}
const layer = new VectorLayer({
title: title,
source: source,
style: layerStyle,
});
const group = targetGroup || this.overlayGroup;
group.getLayers().push(layer);
console.log('[MapView] GeoJSON layer added:', title, '→', source.getFeatures().length, 'features',
targetGroup ? `(in group "${targetGroup.get('title')}")` : '');
return layer;
}
/**
* Add a LayerGroup to the overlay group.
* Used to create layer categories from the remote catalogue;
* individual vector layers will be added into these groups later.
*
* @param {number|string} id - Unique layer group id (from the API)
* @param {string} title - Group title for the LayerSwitcher
* @param {string} [description=''] - Group description (stored as property)
* @returns {LayerGroup} The created (empty) layer group
*/
addLayerGroup(id, title, description = '') {
const group = new LayerGroup({
title: title.trim(),
});
// Store metadata for later use
group.set('layerId', id);
group.set('description', description);
this.overlayGroup.getLayers().push(group);
console.log('[MapView] Layer group added:', title.trim(), '(id:', id + ')');
return group;
}
/**
* Add a WMS layer to a layer group.
*
* @param {string} groupTitle Title of the target LayerGroup (e.g. 'Biophysical Environment')
* @param {string} title Display title for the layer
* @param {string} url WMS server URL
* @param {string} layers WMS LAYERS parameter
* @param {Object} [options] Extra options
* @param {string} [options.serverType='geoserver'] Server type hint ('geoserver'|'mapserver'|'qgis'|null)
* @param {string} [options.style] WMS STYLES parameter (e.g. 'colours' for DEAfrica DEM)
* @param {boolean} [options.visible=true] Initial visibility
* @param {string} [options.attributions] Attribution HTML
* @param {number} [options.opacity=1] Layer opacity (0–1). Use ~0.5 for background-style layers.
* @param {number} [options.zIndex] Render z-index. Use negative values (e.g. -10) to force the
* layer behind all default-z-index layers regardless of group order.
* @param {string} [options.legendUrl] URL of a legend image to display while the layer is visible.
* @param {boolean} [options.onlineOnly=false] If true, show a toast when the user toggles the layer on
* while offline, explaining that the layer requires connectivity.
* @returns {TileLayer|null} The created layer, or null if group not found
*/
addWMSLayer(groupTitle, title, url, layers, options = {}) {
const group = this.getLayerGroupByTitle(groupTitle);
if (!group) {
console.warn(`[MapView] Layer group "${groupTitle}" not found — cannot add WMS layer "${title}"`);
return null;
}
const params = { LAYERS: layers, TILED: true, WIDTH: 256, HEIGHT: 256 };
if (options.style !== undefined) params.STYLES = options.style;
const wmsSource = new TileWMS({
url,
params,
serverType: options.serverType !== undefined ? options.serverType : 'geoserver',
crossOrigin: 'anonymous',
hidpi: false,
attributions: options.attributions,
});
const wmsLayer = new TileLayer({
title,
visible: options.visible !== undefined ? options.visible : true,
source: wmsSource,
opacity: options.opacity !== undefined ? options.opacity : 1,
zIndex: options.zIndex,
});
// Show toast on tile load errors (e.g. server rejects request)
wmsSource.on('tileloaderror', () => {
showToast(`WMS layer "${title}" — tile load error. Check the URL and layer name.`, 'warning', 5000);
});
group.getLayers().push(wmsLayer);
// Register legend AFTER push so that a failure here doesn't block the LayerSwitcher
if (options.legendUrl) {
try {
this._registerLegend(wmsLayer, title, options.legendUrl);
} catch (err) {
console.warn(`[MapView] Could not register legend for "${title}":`, err);
}
}
// Online-only warning: when the user toggles the layer on while offline,
// surface a toast explaining why nothing will render.
if (options.onlineOnly) {
this._attachOnlineOnlyHandler(wmsLayer, title);
}
console.log(`[MapView] WMS layer added: "${title}" → group "${groupTitle}"`);
return wmsLayer;
}
/**
* Add an XYZ tile layer to a layer group.
*
* @param {string} groupTitle Title of the target LayerGroup
* @param {string} title Display title for the layer
* @param {string} url XYZ tile URL template (with {z}/{x}/{y} placeholders)
* @param {Object} [options] Extra options
* @param {boolean} [options.visible=true] Initial visibility
* @param {string} [options.attributions] Attribution HTML
* @param {number} [options.maxZoom=19] Maximum zoom level
* @param {number} [options.opacity=1] Layer opacity (0–1). Use ~0.5 for background-style layers.
* @param {number} [options.zIndex] Render z-index. Use negative values to force behind other layers.
* @param {string} [options.legendUrl] URL of a legend image to display while the layer is visible.
* @param {boolean} [options.onlineOnly=false] If true, show a toast when the user toggles the layer on
* while offline, explaining that the layer requires connectivity.
* @returns {TileLayer|null} The created layer, or null if group not found
*/
addXYZLayer(groupTitle, title, url, options = {}) {
const group = this.getLayerGroupByTitle(groupTitle);
if (!group) {
console.warn(`[MapView] Layer group "${groupTitle}" not found — cannot add XYZ layer "${title}"`);
return null;
}
const xyzSource = new XYZ({
url,
crossOrigin: 'anonymous',
maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19,
attributions: options.attributions,
});
const xyzLayer = new TileLayer({
title,
visible: options.visible !== undefined ? options.visible : true,
source: xyzSource,
opacity: options.opacity !== undefined ? options.opacity : 1,
zIndex: options.zIndex,
});
// Show toast on tile load errors
xyzSource.on('tileloaderror', () => {
showToast(`XYZ layer "${title}" — tile load error. Check the URL.`, 'warning', 5000);
});
group.getLayers().push(xyzLayer);
// Register legend AFTER push so that a failure here doesn't block the LayerSwitcher
if (options.legendUrl) {
try {
this._registerLegend(xyzLayer, title, options.legendUrl);
} catch (err) {
console.warn(`[MapView] Could not register legend for "${title}":`, err);
}
}
// Online-only warning: when the user toggles the layer on while offline,
// surface a toast explaining why nothing will render.
if (options.onlineOnly) {
this._attachOnlineOnlyHandler(xyzLayer, title);
}
console.log(`[MapView] XYZ layer added: "${title}" → group "${groupTitle}"`);
return xyzLayer;
}
// ============================================================================
// Add External Layer Dialog
// ============================================================================
/**
* Create the add-layer dialog overlay (hidden by default).
* Appended to the map target element so it stays within the map viewport.
*/
_createAddLayerDialog() {
this._addLayerDialog = document.createElement('div');
this._addLayerDialog.className = 'map-add-layer-dialog';
this._addLayerDialog.style.cssText = `
display:none;position:absolute;top:0;left:0;right:0;bottom:0;
z-index:1100;background:rgba(0,0,0,0.4);
align-items:center;justify-content:center;
`;
const card = document.createElement('div');
card.style.cssText = `
background:var(--card, #fff);color:var(--card-foreground, #1e1a4b);
border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.35);
font-family:var(--font-body, 'Exo', sans-serif);font-size:13px;
width:340px;max-width:90vw;border:2px solid #10b981;overflow:hidden;
`;
card.innerHTML = `
Add External Layer
WMS LAYERS parameter (e.g. workspace:layer)
${this._escapeHtml(title)}