Map card map change

GeorgeV · February 12, 2019, 11:10am

Good afternoon.

Is there a way to change the actual map of Hassio from the grey thing that we have now to lets stay openstreet maps, is it doable ? It would be great if we had that choice.

Thank you.

cjsimmons · February 12, 2019, 11:45am

It already uses OpenStreetMap. It’s the grey style that you’d like to change.

Personally I’d like to be able the make a few changes to the style of the map, but I have no idea.

GeorgeV · February 12, 2019, 1:22pm

Correct. I would like to have a few more choices of the map.
A map entity offering more choices on info/colors, city/terrain/satellite views would be highly appreciated from the developers. This way anyone can choose to his needs/preferences.

columbusgeek · March 29, 2019, 7:32pm

I came here looking for this info as well.
I see it’s using Leaflet to do the display work. Leaflet has options, but this seems like we’d be editing the HA code and not just messing with configs? I’m pretty new to HA so I might be way off.
I’m kinda surprised nobody has figured out how to at least do a light and dark version for day/night switching.

haakonstorm · May 30, 2019, 5:05pm

Did you get any information on this?

Can’t find any info anywhere.

I have a 10000x12000px Leaflet tile map generated via DroneDeploy. (awesome service!!!)

But I’m stuck with OpenStreetMap, which shows absolutely no (zero) detail where I live:

Shouldn’t be too difficult to integrate Leaflet with some config options into HA, but what do I know

Gubtug · December 3, 2021, 5:03am

I was surprised to see the only posts relating to changing the lovelace map card map are 2+ years old… it seems unusably low contrast to me. Basically how it appears in this post from 3 years ago… Map card with colour / contrast

Is that what it’s supposed to look like? If so, I’m surprised it’s not a more widely noted issue. Is there a way to change the base map that I haven’t found or an alternative map card solution? Thank you!

comatose_tortoise · December 7, 2021, 5:54pm

Also wondering… I guess no one is using the map?

mikesellt · December 14, 2021, 4:26pm

I use the map card, but I would definitely like to be able to tweak it. Sometimes the areas are difficult to see (“dark mode” makes it almost impossible to see properly), and it would be nice to have satellite view or at least some color. Having said that, I’m at least glad it’s there. I keep track of 6 family members on it quite easily. I’d just like some options for usability/viewability and aesthetics.

Narimm · April 23, 2022, 5:18am

So HA doesnt use OpenStreetMaps as the source it actually uses CartoCDN

Leaflet the JS library it uses can use any Map Source so this is totally doable just needs a kind soul to code it

stevenhorner · May 4, 2022, 9:31am

I use the map card every day and was wondering why buildings I added to OpenStreetMap months or years ago weren’t shown on the map. I’m presuming that the Carto tiles that Home Assistant is using are not being updated.

The files within Home Assistant that specifies the tiles to use are here on line 67:

github.com

home-assistant/frontend/blob/0ae676d9baa2bd75d9b173dcaeeebb8c543bd8e8/src/panels/map/ha-panel-map.js

import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import Leaflet from 'leaflet';

import '../../components/ha-menu-button.js';

import './ha-entity-marker.js';

import computeStateDomain from '../../common/entity/compute_state_domain.js';
import computeStateName from '../../common/entity/compute_state_name.js';
import LocalizeMixin from '../../mixins/localize-mixin.js';

Leaflet.Icon.Default.imagePath = '/static/images/leaflet';

/*
 * @appliesMixin LocalizeMixin
 */
class HaPanelMap extends LocalizeMixin(PolymerElement) {

This file has been truncated. show original

That is extremely easy to change but obviously once Home Assistant updates it would likely overwrite that. It would be nice to be able to set custom tiles from either the map card or somewhere within settings to use on all cards.

Joeviocoe · May 25, 2022, 9:04pm

How do you “easily change” the source? Won’t you have to recompile the entire frontend?

I know patching using this Alternative map provider for Home Assistant | Anyuta's personal blog makes changes to the source file
a/src/common/dom/setup-leaflet-map.ts b/src/common/dom/setup-leaflet-map.ts but it can take up to 40 minutes to compile and update the HA frontend.
And any HA updates would break it again.

Joeviocoe · May 25, 2022, 9:12pm

I decided to fix this with a reverse proxy so that calls to Carto CDN are redirected to OpenStreetMap.
This requires setting up a MiTM proxy which I can do with pfsense.

This only works while on the home network, but that’s fine for me since I don’t use Home Assistant remotely.

The real solution would be for the Home Assistant devs to rethink using Carto in the first place. Yes, each Carto tile is about half the file size as the same OSM tile. But it’s not a huge strain on their hosting provider. It’s the same as just going to the openstreetmap.org website. The Home Assistant frontend doesn’t really use that much more than any other application. After all, it’s the individual clients (browsers and Companion apps) that are doing the request for these resources, it’s not like HA is just polling in the background.

nathan.gs · January 6, 2024, 12:03pm

Sorry to revive a very old thread. I created a small open source map-card for which you can configure the tile_layer url.

nathan-gs/ha-map-card
a blog post highlighting the usage of a custom map for Home Assistant

Hope it’s useful after all these years!

matt0020190 · January 8, 2024, 7:21pm

This I think is exactly what I was after so thanks.

I will have to read your site to see how to simply add the satellite street map view. This is all I am basically after in addition to the current maps card.

If you can point me in the right direction, would be great!

nathan.gs · January 9, 2024, 8:28pm

something like this:

You will need to have a tile layer url (like the one mentioned here: Leaflet Map API with Google Satellite Layer - Stack Overflow). Do check the usage rights of the map

type: custom:map-card
'x': 51.2
'y': 3.6
tile_layer_url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
tile_layer_attribution: '<a href="http://www.esri.com/">Esri</a> i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
entities:
  - zone.home

matt0020190 · January 10, 2024, 9:22pm

Hi Nathan

Great thanks works really well.

Few questions after reading the readme if you can help?

I can display zones & people on the maps in the entities array, however none of the person entity icons appear, just a white circle with initial. Can this be changed?
I would also like to remove the white circle around the markers for zones again like the native HA card

Is there anyway like the default HA maps card to have an auto-fit instead of a longitude / latitude? At the moment I have set this as my home location but would be good for when the family are moving for the map to auto zoom / center

Once again, thanks for your work on this card.

Matt

nathan.gs · January 11, 2024, 7:53am

for now these 2 features are unsupported. If I have some time I will look at a bit of a refactor reusing more from the native map card.

PeterHant77 · January 28, 2024, 10:55pm

Hi Nathan,
I’m in The Netherlands and I just installed it. Thanks for your effort! Auto x and y based on device tracker would be awesome. But for now I just added another dashboard and now have a full OpenStreetMap view inside my app which is great.
Regards, Peter

nathan.gs · January 31, 2024, 4:35pm

Feel free to create an issue/PR; will see when I can improve things a bit

BrianEH · February 6, 2024, 7:26pm

Apologies in advance, I am far from a developer; however, I modified the js in two places to allow for what @PeterHant77 wanted (since I wanted it too).

Added the below around line 150

 this._setConfigWithDefault(inputConfig, "focus_entity", "none");

  setConfig(inputConfig) {
    this.config = {};
    this._setConfigWithDefault(inputConfig, "x");
    this._setConfigWithDefault(inputConfig, "y");
    this._setConfigWithDefault(inputConfig, "focus_entity", "none");
    this._setConfigWithDefault(inputConfig, "zoom", 12);
    this.config["title"] = inputConfig["title"];
    this._setConfigWithDefault(inputConfig, "card_size", 5);
    this._setConfigWithDefault(inputConfig, "entities", []);
    //this._setConfigWithDefault(inputConfig, "css_id", "map-card-" + (new Date()).getTime());
    this._setConfigWithDefault(inputConfig, "wms", []);
    this._setConfigWithDefault(inputConfig, "tile_layer_url", "https://tile.openstreetmap.org/{z}/{x}/{y}.png");
    this._setConfigWithDefault(inputConfig, "tile_layer_attribution", '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>');

  }

Then added an if statement when setting the latitude/longitude for the first map render at around line 192

/** @returns {[Double, Double]} */
_getLatLong() {
  if (this.config.focus_entity === 'none') {
    return [this.config.x, this.config.y];
  } else {
    // Assuming this.hass.states contains the states of all entities
    const entity = this.hass.states[this.config.focus_entity];
    if (entity) {
      return [entity.attributes.latitude, entity.attributes.longitude];
    } else {
      throw new Error(`Entity ${this.config.focus_entity} not found`);
    }
  }
}

I’m saying I’m not a developer because I have no intention of forking this and maintaining anything. It was really a challenge to see if I could do it. I would love to have any feedback.

In the card yaml, if you want to have a focus entity just add a line:

focus_entity: device_tracker.entity_id

Replace entity_id with your device (e.g. device_tracker.peter_s_phone). If you leave the x and y values in your yaml, they will be ignored.

Note, it does seem to take a couple of seconds (literally a one, two count) longer to render the map.