Map card map change

Installation Home Assistant OS
6

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. :man_shrugging: Is there a way to change the base map that I haven’t found or an alternative map card solution? Thank you!

7

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

8

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.

1 Like
9

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

10

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:

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.

11

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.

1 Like
12

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.

1 Like
13

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!

2 Likes
14

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!

15

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 :slight_smile:

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
16

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

17

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.

1 Like
18

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

3 Likes
19

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

1 Like
20

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.

1 Like
21

@BrianEH would you mind creating a PR on Github? Seems like a nice addition!

22

@BrianEH @PeterHant77 @matt0020190 based on @BrianEH’s code (with some adjustments) I create v0.2.0 with the focus_entity feature. See Releases · nathan-gs/ha-map-card · GitHub

–
update: created a version v0.3.1 with picture support and taking the position from the first entity.

23

Okay then. I’m excited someone looked at my addition. I oscillate between projects and now I’m back on HASS (after going hardcore into a new 3D printer for awhile). I’ll have to try out the new version.

And this seems like a good excuse to set myself on guthub.

24

@BrianEH I’d like to switch from MIT to Apache 2.0 licensing. OK for you?

25

@nathan.gs Very nice addition, the original map is just cr@p… (See what I did there?) :grin: I’m having a little problem adding my map source to it. I need a sea chart, because this instance of Hass is in my boat. For that I use GaladrielMap, a map server running on the Pi’s Apache2 that caches the tiles, so I don’t need internet access when I’m out with the boat. I tried adding this:

tile_layer_url: 'http://192.168.3.1:8080/tileproxy/tiles.php?z={z}&x={x}&y={y}&r=NAIS

But that is of course not working, since this is not a tile layer, it’s a map server. Can you please help me getting this working?

Sorry, it started working after a restart. My bad. Thank you for a nice card! :+1:

1 Like