OpenStreetMap (No API Key Required)
Google Maps
OpenStreetMap is free and requires no authentication
Required only for Google Maps - Get your API key from Google Cloud Console
Hybrid
Satellite
Roadmap
Terrain
Map type (Google Maps only)
1 = World view, 21 = Maximum zoom
How often to refresh location data
${entitiesHtml}
${personDatalist}
${sensorDatalist}
Add Entity
`;
// Use requestAnimationFrame to ensure DOM is ready before attaching listeners
requestAnimationFrame(() => {
this._attachListeners();
this._setEntityPickerHass();
});
}
_setEntityPickerHass() {
// Not needed anymore since we removed icon pickers
}
_attachListeners() {
// Map provider selector
this.querySelector('#map_provider')?.addEventListener('selected', (e) => {
this._config.map_provider = e.target.value;
// Show/hide Google Maps fields based on selection
const googleApiKeyRow = this.querySelector('#google-api-key-row');
const mapTypeRow = this.querySelector('#map-type-row');
if (googleApiKeyRow) {
googleApiKeyRow.style.display = e.target.value === 'google' ? 'block' : 'none';
}
if (mapTypeRow) {
mapTypeRow.style.display = e.target.value === 'google' ? 'block' : 'none';
}
this._fireChanged();
});
// Basic config - using 'change' event for ha-textfield components
this.querySelector('#google_api_key')?.addEventListener('change', (e) => {
this._config.google_api_key = e.target.value;
this._fireChanged();
});
this.querySelector('#map_type')?.addEventListener('selected', (e) => {
this._config.map_type = e.target.value;
this._fireChanged();
});
this.querySelector('#default_zoom')?.addEventListener('change', (e) => {
this._config.default_zoom = parseInt(e.target.value);
this._fireChanged();
});
this.querySelector('#update_interval')?.addEventListener('change', (e) => {
this._config.update_interval = parseInt(e.target.value);
this._fireChanged();
});
// Marker border radius slider
const markerSlider = this.querySelector('#marker_border_radius');
const markerValueDisplay = this.querySelector('#marker-radius-value');
markerSlider?.addEventListener('input', (e) => {
const value = e.target.value + '%';
markerValueDisplay.textContent = value;
this._config.marker_border_radius = value;
this._fireChanged();
});
// Badge border radius slider
const badgeSlider = this.querySelector('#badge_border_radius');
const badgeValueDisplay = this.querySelector('#badge-radius-value');
badgeSlider?.addEventListener('input', (e) => {
const value = e.target.value + '%';
badgeValueDisplay.textContent = value;
this._config.badge_border_radius = value;
this._fireChanged();
});
// Entities - using 'change' event for input elements
this.querySelectorAll('input.entity-input[data-entity-idx]').forEach(el => {
el.addEventListener('change', (e) => {
const idx = parseInt(e.target.dataset.entityIdx);
const field = e.target.dataset.entityField;
if (idx < this._config.entities.length) {
this._config.entities[idx][field] = e.target.value || '';
this._fireChanged();
}
});
});
this.querySelectorAll('[data-entity-delete]').forEach(el => {
el.addEventListener('click', (e) => {
const button = e.target.closest('ha-icon-button');
if (button) {
const idx = parseInt(button.dataset.entityDelete);
this._config.entities.splice(idx, 1);
this._render();
this._fireChanged();
}
});
});
this.querySelector('#add-entity')?.addEventListener('click', () => {
this._config.entities.push({ person: '', activity: '' });
this._render();
this._fireChanged();
});
// Zones - using 'change' event for input elements
this.querySelectorAll('input[data-zone-idx][data-zone-field="state"]').forEach(el => {
el.addEventListener('change', (e) => {
const idx = parseInt(e.target.dataset.zoneIdx);
const zones = Object.entries(this._config.zones);
if (idx >= zones.length) return;
const [oldState, oldConfig] = zones[idx];
const newValue = e.target.value;
if (newValue && oldState !== newValue) {
delete this._config.zones[oldState];
this._config.zones[newValue] = oldConfig;
}
this._fireChanged();
});
});
this.querySelectorAll('input[data-zone-idx][data-zone-field="color"]').forEach(el => {
el.addEventListener('change', (e) => {
const idx = parseInt(e.target.dataset.zoneIdx);
const zones = Object.entries(this._config.zones);
if (idx >= zones.length) return;
const [state, config] = zones[idx];
config.color = e.target.value;
this._fireChanged();
});
});
this.querySelectorAll('[data-zone-delete]').forEach(el => {
el.addEventListener('click', (e) => {
const button = e.target.closest('ha-icon-button');
if (button) {
const idx = parseInt(button.dataset.zoneDelete);
const zones = Object.entries(this._config.zones);
const [state] = zones[idx];
delete this._config.zones[state];
this._render();
this._fireChanged();
}
});
});
this.querySelector('#add-zone')?.addEventListener('click', () => {
this._config.zones[''] = { color: '#757575' };
this._render();
this._fireChanged();
});
// Activities - only handle color changes (icons are hardcoded)
// Note: data-activity-states contains comma-separated list of states
this.querySelectorAll('input[data-activity-states]').forEach(el => {
el.addEventListener('change', (e) => {
const states = e.target.dataset.activityStates.split(',');
const newColor = e.target.value;
// Update color for all states in this group
states.forEach(state => {
if (this._config.activities[state]) {
this._config.activities[state].color = newColor;
}
});
this._fireChanged();
});
});
}
_fireChanged() {
console.log('[Editor] Firing config-changed event with config:', JSON.stringify(this._config, null, 2));
const event = new CustomEvent('config-changed', {
detail: { config: this._config },
bubbles: true,
composed: true
});
this.dispatchEvent(event);
}
}
customElements.define('map-badge-card', MapBadgeCard);
customElements.define('map-badge-card-editor', MapBadgeCardEditor);
window.customCards = window.customCards || [];
window.customCards.push({
type: 'map-badge-card',
name: 'Map Badge Card',
description: 'Map with person markers, zone borders, and activity badges',
preview: false
});