Map-card: a slightly improved map-card

DaveP317 · July 5, 2024, 11:09am

The history feature of this card makes it incredibly useful, thanks for the work on this!

I live on a boat, and I have zones for where home (the boat) and the anchor location are. I’m updating the zones via various automations.

When I drop the anchor and let out chain, I set the radius of the anchor zone. Then I also set a larger radius for the anchor alarm (if the boat goes outside of the outer radius, HA shouts at me over all of my devices).

Having the visualization of the inner and outer circles is useful, as is the visualization of the boat location over time.

Is there a way to draw the inner and outer circles on your map card so that I can just have a single card on my dashboard?

Thanks!

type: custom:map-card
history_start: 24 hours ago
entities:
  - entity: zone.home
    history_start: 48 hours ago
    display: icon
    size: 25
    history_show_lines: true
    history_show_dots: false
    color: blue
  - entity: zone.anchor_location
    history_start: 5 seconds ago
    display: icon
    size: 25
    history_show_lines: false
    history_show_dots: false

Ildar_Gabdullin · July 5, 2024, 9:04pm

I would say this is a good FR:
add a Boolean flag to show circle for a zone; may be defined per entity; meaningful only for zone entities.

Also, similarly a circle may be shown for ANY entity:

For zones - radius is equal to a zone’s radius.
For other entities - radius is equal to a GPS accuracy (if present).

Registered an issue.

i00 · July 8, 2024, 10:48am

Does anyone know the tile_layer_url that I can use that is the same as the default HA card?

Thanks

nathan.gs · July 19, 2024, 5:05pm

github.com

home-assistant/frontend/blob/345000a0e9ec56d9c94ab15401fe61f7943b06c1/src/common/dom/setup-leaflet-map.ts#L42


      
            tileLayer: TileLayer
          ): TileLayer => {
            map.removeLayer(tileLayer);
            tileLayer = createTileLayer(leaflet);
            tileLayer.addTo(map);
            return tileLayer;
          };
          
          const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
            leaflet.tileLayer(
              `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
                leaflet.Browser.retina ? "@2x.png" : ".png"
              }`,
              {
                attribution:
                  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
                subdomains: "abcd",
                minZoom: 0,
                maxZoom: 20,
              }
            );

GoodyGizmos · September 2, 2024, 12:21pm

What is the right configuration for OpenWeather Weather Maps 2.0?

Here is an example config I’m using (API keys redacted):

type: custom:map-card
focus_entity: zone.home
zoom: 6
card_size: 10
entities:
  - entity: zone.home
    display: icon
    size: 40
tile_layers:
  - url: >-
      https://maps.openweathermap.org/maps/2.0/weather/1h/PR0/{z}/{x}/{y}?appid=<I have replaced this with my actual API key>
    options:
      attribution: <a href="https://openweathermap.org/">OpenWeatherMap</a>
      apikey: <I have replaced this with my actual API key>

It’s not displaying anything and I’ve tried a few different values. Does the attribution key need to be altered in some way?

RickFurtado · September 2, 2024, 2:03pm

Assuming the rest of the url is correct replace ?appid=<I have replaced this with my actual API key> with ?appid={apikey}. As per https://nathan.gs/2024/02/25/ha-map-card-displaying-weather-and-other-tilelayers/#creating-the-map

GoodyGizmos · September 2, 2024, 4:56pm

To be sure we’re working toward the same goal…I’m trying to get Map 2.0 (not 1.0) working.

The 1.0 config seems to work with the {apikey} placeholder (as you mentioned) or explicitly replacing it with the actual api key (as I had it) since apikey: is specified on the third line.

For 2.0 (see link I posted above) I tried the same config as what you posted (that’s where I got it from initially) but replaced the 1.0 URL with the 2.0 URL. So, I’m asking if something else (e.g. attribution) also needs adjustment to get 2.0 to work. If so, what are those adjustments?

MelleD · September 9, 2024, 10:16pm

It would be cool to have an option to simply put an icon instead of a picture, when the sensor do not include it

For example on the map I see the label:

Bildschirmfoto 2024-09-10 um 00.13.44

If I click on it. I have an icon, but into the attributes there is no icon attribute.
Bildschirmfoto 2024-09-10 um 00.13.54

Would be nice, just to use the same logic like the detail dialog and/or give an option on the entity section to override the icon

EDIT: FR is open

jaswalters · September 9, 2024, 11:46pm

Any option like the default map card to refresh so it moves as the entity moves?

jaswalters · September 9, 2024, 11:50pm

There is, like this.

entities:
  - entity: <your_entity>
    display: icon
    size: 40
    picture: /local/icons/icon.png

MelleD · September 10, 2024, 6:08am

Picture != icon. See open FR

Icon is just a mdi or phu string like
icon: „mdi:gas-station“

taylormade · September 17, 2024, 5:21am

How does this work with integrations like GeoJSON, where locatable entities are dynamically created and destroyed? Is there a way to have the entities list be populated with filter or some other dynamic thing?
Nevermind… wrapping the whole card in an auto-entities card works. I should have tried it /before/ I asked.

jmfargas · October 9, 2024, 9:46am

Dear all, I have tried the map-card with the ESRI ArcGIS satellite image layer, but unfortunately the zoom is too low to display a garden. I actually captured a Google Maps image with its coordinates and I was wondering if there is a way to display this georeferenced image with map-card? Many thanks.

Ildar_Gabdullin · October 9, 2024, 9:54am

Check docs, there is a dedicated option to set a maximum zoom. But this zoom must be supported by a map provider.

jmfargas · October 9, 2024, 4:21pm

Yes, I saw it, many thanks, but unfortunately the ESRI images do not go beyong 18, so I cannot see the image…

tile_layer_options:
  maxZoom: 20

Do you know if there is a way to show an image with its upper-left and lower-right coordinates ? The idea is to get a Google image and georeference it in map-card ? Thanks a lot!

lackmake · October 20, 2024, 8:05pm

Super usefull card, thanks for the work. Did you ever try to get some of these features into the native HA map card (with pull requests to their project)? I was just looking into maybe adding a feature to set custom entity colors on the map, but then found your card. Would be nice to have your features integrated into the standard card

potat0 · November 4, 2024, 2:07am

possible to use integration like blitzortung lightning?
it creates geo_location entities with random names for every lightning like:

geo_location.lightning_strike_e342ad8af3ab46759880544123c876b3

EDIT: possible with auto-entities card

EDIT2: after using card with auto-entities I see they are not working very good, geo_location entities appear for 10 minutes and dissapear and with auto-entities, card is not refreshed

would be great if this card could use geo_location natively like default card, then it could replace it completely

hcraveiro · November 18, 2024, 10:13pm

Hi, I’m experimenting this card with my HA and a thing I lack is being able to connect paths through the actual roads. My device tracker sends the location every minute or so and I can’t change the frequency and when all coordinates are connected it just goes directly without following roads.
Does anyone knows how to work around this?

nathan.gs · November 22, 2024, 4:41pm

@hcraveiro that does not sound easy to implement inside HA map card. The easiest workaround is to have higher frequency of positions.

marksev1 · December 2, 2024, 9:56am

I can’t install it via HACS custom repositories, it says that it doesn’t have a standarized folder structure.

Would be very cool to try it…