Zavolat na 226 222 222 Můj výběr
Klientská zóna (otevře se v novém okně)
Zavolat na 226 222 222 Klientská zóna (otevře se v novém okně)

← Knihovna bloků

Mapa lokalit map-hero · full

Tmavý úvodní blok stránky Přehled lokalit — skleněná karta s H1, mapa Prahy s piny lokalit a vyhledávací panel. Hlavička webu leží přes sekci — body.has-hero si base.njk odvodí sám, když je blok první sekcí stránky. Souřadnice pinů jsou v procentech plochy mapy (x = střed pinu, y = jeho hrot).

Pro integrátora: Stejně jako hero: stránka má na <body> třídu has-hero. Piny mapy řeší map-hero.ts. Panel filtru lokalit je ukázkový (search-panel.ts) — odeslání jen odscrolluje k seznamu projektů, napojení na data doplní IT tým klienta.

Zdroj: src/_includes/blocks/map-hero/

Varianta „default“

Přehled bytových
projektů v Praze

Vyberte si nový byt v některé z atraktivních pražských lokalit. Prohlédněte si aktuální nabídku bytů i termíny dokončení.

Vzorová data (JSON) 
{
  "settings": {
    "anchor": "mapa-lokalit",
    "background": "dark",
    "spacing_top": "none",
    "spacing_bottom": "none"
  },
  "media": {
    "parallax": true,
    "image": {
      "src": "/assets/images/photos/map-hero-bg-1643.jpg",
      "webp": "/assets/images/photos/map-hero-bg-768.webp 768w, /assets/images/photos/map-hero-bg-1280.webp 1280w, /assets/images/photos/map-hero-bg-1643.webp 1643w",
      "srcset": "/assets/images/photos/map-hero-bg-768.jpg 768w, /assets/images/photos/map-hero-bg-1280.jpg 1280w, /assets/images/photos/map-hero-bg-1643.jpg 1643w",
      "alt": "",
      "width": 1643,
      "height": 957
    }
  },
  "title": "Přehled bytových\n<em>projektů v Praze</em>",
  "text": "<p>Vyberte si nový byt v některé z atraktivních pražských lokalit. Prohlédněte si aktuální nabídku bytů i termíny dokončení.</p>",
  "map": {
    "src": "/assets/images/illustrations/praha-map.svg",
    "alt": "",
    "width": 678,
    "height": 521,
    "pins": [
      {
        "label": "Střížkov",
        "x": 53.9,
        "y": 19.3,
        "labelPosition": "right-top",
        "offsetY": 0.6,
        "url": "#"
      },
      {
        "label": "Vysočany",
        "x": 58.2,
        "y": 35.9,
        "labelPosition": "left-top",
        "url": "#"
      },
      {
        "label": "Hloubětín",
        "x": 62.6,
        "y": 36.6,
        "labelPosition": "right-top",
        "url": "#"
      },
      {
        "label": "Dolní Počernice",
        "x": 71.6,
        "y": 41.4,
        "labelPosition": "right-top",
        "offsetX": 0.5,
        "offsetY": 1,
        "url": "#"
      },
      {
        "label": "Žižkov",
        "x": 51.8,
        "y": 40.7,
        "labelPosition": "left-bottom",
        "offsetY": -0.6,
        "url": "#"
      },
      {
        "label": "Michle",
        "x": 52.6,
        "y": 53.3,
        "labelPosition": "left-bottom",
        "offsetY": -0.6,
        "url": "#"
      },
      {
        "label": "Háje",
        "x": 63.1,
        "y": 62.3,
        "labelPosition": "right-top",
        "url": "#"
      },
      {
        "label": "Pitkovice",
        "x": 79.6,
        "y": 71.7,
        "labelPosition": "left-top",
        "offsetX": 7,
        "offsetY": -0.6,
        "url": "#"
      }
    ]
  },
  "search": {
    "scrollTarget": "#projekty",
    "submit": {
      "title": "Vyhledat byt"
    },
    "fields": [
      {
        "name": "lokalita",
        "label": "Lokalita",
        "multiple": true,
        "options": [
          {
            "value": "praha-3",
            "label": "Praha 3"
          },
          {
            "value": "praha-4",
            "label": "Praha 4"
          },
          {
            "value": "praha-9",
            "label": "Praha 9"
          },
          {
            "value": "praha-10",
            "label": "Praha 10"
          },
          {
            "value": "praha-22",
            "label": "Praha 22"
          }
        ]
      },
      {
        "name": "cena",
        "label": "Cena",
        "icon": "price-tag",
        "multiple": true,
        "options": [
          {
            "value": "do-5",
            "label": "do 5 mil. Kč"
          },
          {
            "value": "5-8",
            "label": "5–8 mil. Kč"
          },
          {
            "value": "8-12",
            "label": "8–12 mil. Kč"
          },
          {
            "value": "nad-12",
            "label": "nad 12 mil. Kč"
          }
        ]
      },
      {
        "name": "dispozice",
        "label": "Dispozice",
        "icon": "floor-plan-solid",
        "multiple": true,
        "options": [
          {
            "value": "1kk",
            "label": "1+kk"
          },
          {
            "value": "2kk",
            "label": "2+kk"
          },
          {
            "value": "3kk",
            "label": "3+kk"
          },
          {
            "value": "4kk",
            "label": "4+kk a větší"
          }
        ]
      },
      {
        "name": "termin",
        "label": "Termín dokončení",
        "icon": "calendar-check-solid",
        "multiple": true,
        "options": [
          {
            "value": "2026",
            "label": "2026"
          },
          {
            "value": "2027",
            "label": "2027"
          },
          {
            "value": "2028",
            "label": "2028 a později"
          }
        ]
      }
    ]
  }
}

Varianta „no-map“

Přehled bytových
projektů v Praze

Bez mapy zůstane v sekci jen karta a vyhledávací panel.

Vzorová data (JSON) 
{
  "settings": {
    "background": "dark",
    "spacing_top": "none",
    "spacing_bottom": "none"
  },
  "media": {
    "parallax": true,
    "image": {
      "src": "/assets/images/photos/map-hero-bg-1643.jpg",
      "webp": "/assets/images/photos/map-hero-bg-768.webp 768w, /assets/images/photos/map-hero-bg-1280.webp 1280w, /assets/images/photos/map-hero-bg-1643.webp 1643w",
      "srcset": "/assets/images/photos/map-hero-bg-768.jpg 768w, /assets/images/photos/map-hero-bg-1280.jpg 1280w, /assets/images/photos/map-hero-bg-1643.jpg 1643w",
      "alt": "",
      "width": 1643,
      "height": 957
    }
  },
  "title": "Přehled bytových\n<em>projektů v Praze</em>",
  "text": "<p>Bez mapy zůstane v sekci jen karta a vyhledávací panel.</p>",
  "search": {
    "scrollTarget": "#projekty",
    "submit": {
      "title": "Vyhledat byt"
    },
    "fields": [
      {
        "name": "lokalita",
        "label": "Lokalita",
        "multiple": true,
        "options": [
          {
            "value": "praha-3",
            "label": "Praha 3"
          },
          {
            "value": "praha-9",
            "label": "Praha 9"
          }
        ]
      },
      {
        "name": "dispozice",
        "label": "Dispozice",
        "icon": "floor-plan-solid",
        "multiple": true,
        "options": [
          {
            "value": "2kk",
            "label": "2+kk"
          },
          {
            "value": "3kk",
            "label": "3+kk"
          }
        ]
      }
    ]
  }
}

Varianta „long-labels“

Přehled nových bytových projektů
v Praze a blízkém okolí

Dlouhý titulek, dlouhé názvy lokalit a pět polí ve vyhledávacím panelu — kontrola zalamování a přetečení štítků přes okraj mapy.

Dolní Počernice — Východní Město

Zobrazit lokalitu Dolní Počernice — Východní Město
Vzorová data (JSON) 
{
  "settings": {
    "background": "dark",
    "spacing_top": "none",
    "spacing_bottom": "none"
  },
  "media": {
    "parallax": true,
    "image": {
      "src": "/assets/images/photos/map-hero-bg-1643.jpg",
      "webp": "/assets/images/photos/map-hero-bg-768.webp 768w, /assets/images/photos/map-hero-bg-1280.webp 1280w, /assets/images/photos/map-hero-bg-1643.webp 1643w",
      "srcset": "/assets/images/photos/map-hero-bg-768.jpg 768w, /assets/images/photos/map-hero-bg-1280.jpg 1280w, /assets/images/photos/map-hero-bg-1643.jpg 1643w",
      "alt": "",
      "width": 1643,
      "height": 957
    }
  },
  "title": "Přehled nových bytových projektů\n<em>v Praze a blízkém okolí</em>",
  "text": "<p>Dlouhý titulek, dlouhé názvy lokalit a pět polí ve vyhledávacím panelu — kontrola zalamování a přetečení štítků přes okraj mapy.</p>",
  "map": {
    "src": "/assets/images/illustrations/praha-map.svg",
    "alt": "",
    "width": 678,
    "height": 521,
    "pins": [
      {
        "label": "Dolní Počernice — Východní Město",
        "x": 71.6,
        "y": 41.4,
        "labelPosition": "left-top",
        "url": "/prehled-lokalit/"
      },
      {
        "label": "Střížkov u Ládví",
        "x": 53.9,
        "y": 19.3,
        "labelPosition": "right-top",
        "url": "/prehled-lokalit/"
      },
      {
        "label": "Michle",
        "x": 52.6,
        "y": 53.3,
        "labelPosition": "left-bottom"
      },
      {
        "label": "Bez štítku",
        "x": 63.1,
        "y": 62.3
      }
    ]
  },
  "search": {
    "scrollTarget": "#projekty",
    "submit": {
      "title": "Vyhledat byt"
    },
    "fields": [
      {
        "name": "lokalita",
        "label": "Lokalita nebo městská část",
        "multiple": true,
        "options": [
          {
            "value": "praha-3",
            "label": "Praha 3 — Žižkov"
          },
          {
            "value": "praha-22",
            "label": "Praha 22 — Pitkovice"
          }
        ]
      },
      {
        "name": "cena",
        "label": "Cena",
        "icon": "price-tag",
        "multiple": true,
        "options": [
          {
            "value": "do-5",
            "label": "do 5 mil. Kč"
          }
        ]
      },
      {
        "name": "dispozice",
        "label": "Dispozice",
        "icon": "floor-plan-solid",
        "multiple": true,
        "options": [
          {
            "value": "2kk",
            "label": "2+kk"
          }
        ]
      },
      {
        "name": "termin",
        "label": "Termín dokončení",
        "icon": "calendar-check-solid",
        "multiple": true,
        "options": [
          {
            "value": "2027",
            "label": "2027"
          }
        ]
      },
      {
        "name": "stav",
        "label": "Stav projektu",
        "multiple": false,
        "options": [
          {
            "value": "ve-vystavbe",
            "label": "Ve výstavbě"
          }
        ]
      }
    ]
  }
}

Varianta „empty“

Vzorová data (JSON) 
{}