[html]<div class="fon">

<div class="bac">
  <div class="namet">
     <div class="bacname">
<center>EUREKA SPRINGS map</center></div></div></div><br/>
<div class="otsttext"><center>карта создана исключительно в ознакомительных и развлекательных целях <br>локации будут отличаться от реального города <br>если  вы хотите внести свой дом\работу и тп на карту — обратитесь в тему вопросов к амс<br><br>
p.s.  карта на скриптах и рисуется в браузере, возможно потребуется пару раз перезагрузить страницу для корректного отображения <br></center>
</div></div></div>[/html]
[html]

<style>
/* HAZE · карта города. Все цвета карты меняются здесь. */
.hzmap{
  --hzmap-styles:1; /* метка: стили подключены со страницы, не удалять */
  --hzmap-outside:#cfd4c9;
  --hzmap-land:#e6e9df;
  --hzmap-wood:#cbd8c1;
  --hzmap-park:#d2e2c2;
  --hzmap-cemetery:#c9d6c4;
  --hzmap-pitch:#bfdcb6;
  --hzmap-sand:#ece3c6;
  --hzmap-residential:#e9e7e0;
  --hzmap-commercial:#eee4dc;
  --hzmap-grounds:#ebe8d3;
  --hzmap-parking:#eeeee8;
  --hzmap-water:#a9c7d8;
  --hzmap-water-edge:#86aec4;
  --hzmap-bld:#d3c9bc;
  --hzmap-bld-edge:#aa9f90;
  --hzmap-road:#ffffff;
  --hzmap-road-edge:#a3a297;
  --hzmap-road-far:#9fa297;
  --hzmap-trunk:#f2cf8e;
  --hzmap-trunk-edge:#c29a52;
  --hzmap-primary:#f5dfa3;
  --hzmap-primary-edge:#c7a862;
  --hzmap-secondary:#f8ecc0;
  --hzmap-secondary-edge:#c2b47c;
  --hzmap-path:#a2705a;
  --hzmap-track:#a08c5c;
  --hzmap-rail:#7b7b86;
  --hzmap-border:#9a6fa8;
  --hzmap-text:#3a3e39;
  --hzmap-halo:#f6f7f1;
  --hzmap-text-water:#3d6c88;
  --hzmap-text-park:#4a6a3c;
  --hzmap-text-poi:#7b4a68;
  --hzmap-text-place:#2c302b;
  --hzmap-font:"PT Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hzmap-font-water:Georgia,"Times New Roman",serif;
  --hzmap-ui:#ffffff;
  --hzmap-ui-text:#3a3e39;
  --hzmap-ui-edge:rgba(58,62,57,.28);
  --hzmap-ui-accent:#5d7f96;

  position:relative; width:100%; height:640px; max-height:86vh; min-height:320px;
  overflow:hidden; background:var(--hzmap-outside); border-radius:6px;
  font:13px/1.3 var(--hzmap-font); color:var(--hzmap-ui-text);
  -webkit-user-select:none; user-select:none; text-align:left;
}
.hzmap:fullscreen{height:100%; max-height:none; border-radius:0}
#hzmap-demo button[type="button"] {padding: 5px !important;}
.hzmap.hzmap-full{position:fixed; inset:0; z-index:99999; height:auto; max-height:none; border-radius:0}
.hzmap-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; outline:none}
.hzmap-canvas.hzmap-drag{cursor:grabbing}
.hzmap-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--hzmap-ui-accent)}
.hzmap-tools{position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:8px}
.hzmap-group{display:flex; flex-direction:column; background:var(--hzmap-ui); border:1px solid var(--hzmap-ui-edge); border-radius:6px; overflow:hidden; box-shadow:0 1px 4px rgba(40,45,40,.18)}
.hzmap-btn{all:unset; box-sizing:border-box; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color:var(--hzmap-ui-text)}
.hzmap-btn + .hzmap-btn{border-top:1px solid var(--hzmap-ui-edge)}
.hzmap-btn:hover{background:rgba(93,127,150,.14)}
.hzmap-btn:focus-visible{box-shadow:inset 0 0 0 2px var(--hzmap-ui-accent)}
.hzmap-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hzmap-foot{position:absolute; left:10px; right:10px; bottom:8px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; pointer-events:none}
.hzmap-scale{font-size:11px; padding:0 4px 1px; border:1.5px solid var(--hzmap-ui-text); border-top:0; color:var(--hzmap-ui-text); text-shadow:0 0 3px var(--hzmap-halo),0 0 3px var(--hzmap-halo); white-space:nowrap; box-sizing:border-box}
.hzmap-attr{pointer-events:auto; font-size:11px; padding:1px 6px; border-radius:3px; background:rgba(255,255,255,.78); color:var(--hzmap-ui-text)}
.hzmap-attr a{color:inherit}
/* объекты: панель слева, поиск, список категорий, карточка */
.hzmap-panel{position:absolute; top:10px; left:10px; width:240px; max-width:calc(100% - 70px); max-height:calc(100% - 46px); display:flex; flex-direction:column; gap:6px; font-size:13px}
.hzmap-panel > .hzmap-box{flex:none}
.hzmap-panel > .hzmap-legend{flex:0 1 auto; min-height:0; display:flex; flex-direction:column}
.hzmap-box{background:var(--hzmap-ui); border:1px solid var(--hzmap-ui-edge); border-radius:6px; box-shadow:0 1px 4px rgba(40,45,40,.18); overflow:hidden}
.hzmap-search{all:unset; box-sizing:border-box; display:block; width:100%; padding:8px 10px; font:inherit; color:var(--hzmap-ui-text); cursor:text; -webkit-user-select:text; user-select:text}
.hzmap-search::placeholder{color:var(--hzmap-ui-text); opacity:.55}
.hzmap-search:focus-visible{box-shadow:inset 0 0 0 2px var(--hzmap-ui-accent); border-radius:5px}
.hzmap-results{max-height:260px; overflow:auto; border-top:1px solid var(--hzmap-ui-edge)}
.hzmap-results:empty{display:none}
.hzmap-res{all:unset; box-sizing:border-box; display:flex; align-items:baseline; gap:7px; width:100%; padding:6px 10px; cursor:pointer}
.hzmap-res:hover,.hzmap-res:focus-visible{background:rgba(93,127,150,.14)}
.hzmap-res small{margin-left:auto; opacity:.6; font-size:11px; white-space:nowrap}
.hzmap-none{padding:7px 10px; opacity:.65}
.hzmap-dot{flex:none; width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px rgba(58,62,57,.25); align-self:center}
.hzmap-legend-head{all:unset; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; width:100%; padding:7px 10px; cursor:pointer; font-weight:600}
.hzmap-legend-head:focus-visible{box-shadow:inset 0 0 0 2px var(--hzmap-ui-accent)}
.hzmap-legend-head svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .15s}
.hzmap-legend.hzmap-closed .hzmap-legend-head svg{transform:rotate(-90deg)}
.hzmap-legend.hzmap-closed .hzmap-legend-list{display:none}
.hzmap-legend-list{flex:1 1 auto; min-height:0; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; border-top:1px solid var(--hzmap-ui-edge); padding:4px 0; scrollbar-width:thin; scrollbar-color:rgba(58,62,57,.5) rgba(58,62,57,.08)}
.hzmap-legend-list::-webkit-scrollbar{display:block !important; width:8px !important; height:8px !important}
.hzmap-legend-list::-webkit-scrollbar-thumb{background:rgba(58,62,57,.5) !important; border-radius:4px}
.hzmap-legend-list::-webkit-scrollbar-track{background:rgba(58,62,57,.08) !important}
.hzmap-cat{display:flex; align-items:center; gap:6px; padding:0 8px 0 10px}
.hzmap-cat:hover{background:rgba(93,127,150,.1)}
.hzmap-check{flex:none; box-sizing:border-box; width:15px; height:15px; display:grid; place-items:center; border:1.5px solid var(--hzmap-ui-text); border-radius:3px; background:var(--hzmap-ui); cursor:pointer; opacity:.75}
.hzmap-check svg{width:11px; height:11px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; visibility:hidden}
.hzmap-check[aria-checked="true"]{background:var(--hzmap-ui-accent); border-color:var(--hzmap-ui-accent); opacity:1}
.hzmap-check[aria-checked="true"] svg{visibility:visible}
.hzmap-check:focus-visible{outline:2px solid var(--hzmap-ui-accent); outline-offset:1px}
.hzmap-catbtn{all:unset; box-sizing:border-box; flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:5px 0; cursor:pointer; font-weight:600}
.hzmap-catbtn:focus-visible{box-shadow:inset 0 0 0 2px var(--hzmap-ui-accent); border-radius:4px}
.hzmap-catname{flex:1; min-width:0}
.hzmap-catcnt{opacity:.6; font-size:11px; font-weight:400}
.hzmap-catbtn svg{flex:none; width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; opacity:.7; transform:rotate(-90deg)}
.hzmap-catbtn[aria-expanded="true"] svg{transform:none}
.hzmap-catitems{margin:0 0 4px 16px; border-left:1px solid var(--hzmap-ui-edge)}
.hzmap-catitems[hidden]{display:none !important}
.hzmap-catitem{all:unset; box-sizing:border-box; display:block; width:100%; padding:3px 8px 3px 12px; cursor:pointer; font-size:12.5px; line-height:1.3; overflow-wrap:anywhere}
.hzmap-catitem:hover,.hzmap-catitem:focus-visible{background:rgba(93,127,150,.18)}
.hzmap-pop{position:absolute; left:0; top:0; width:260px; max-width:calc(100% - 20px); background:var(--hzmap-ui); border:1px solid var(--hzmap-ui-edge); border-radius:8px; box-shadow:0 4px 16px rgba(40,45,40,.28); -webkit-user-select:text; user-select:text; overflow:hidden}
.hzmap-pop[hidden]{display:none}
.hzmap-pop-img{display:block; width:100%; max-height:150px; object-fit:cover}
.hzmap-pop-body{padding:10px 12px 12px; max-height:230px; overflow:auto}
.hzmap-pop-title{font-size:15px; font-weight:700; line-height:1.25; margin:0 22px 3px 0}
.hzmap-pop-cat{display:flex; align-items:center; gap:6px; font-size:12px; opacity:.8; margin-bottom:6px}
.hzmap-pop-text{white-space:pre-line; line-height:1.4; margin:0; overflow-wrap:anywhere}
.hzmap-pop-text a{color:var(--hzmap-ui-accent); text-decoration:underline}
.hzmap-pop-link{display:inline-block; margin-top:9px; padding:5px 10px; border-radius:5px; background:var(--hzmap-ui-accent); color:#fff !important; text-decoration:none !important; font-weight:600}
.hzmap-pop-x{all:unset; position:absolute; top:5px; right:6px; width:24px; height:24px; display:grid; place-items:center; cursor:pointer; border-radius:50%; background:rgba(255,255,255,.85); font-size:17px; line-height:1}
.hzmap-pop-x:hover{background:rgba(93,127,150,.2)}
.hzmap-pop-x:focus-visible{box-shadow:0 0 0 2px var(--hzmap-ui-accent)}
@media (prefers-reduced-motion: reduce){.hzmap-legend-head svg{transition:none}}
</style>

<div id="hzmap-demo"></div>

<script src="https://forumstatic.ru/files/001b/d4/18/56792.js?v=3"></script> <!-- карта эврики -->
<script src="https://forumstatic.ru/files/001b/d4/18/30659.js?v=7"></script> <!-- движок карты эврики-->
<script src="https://forumstatic.ru/files/001b/d4/18/84373.js?v=11"></script> <!-- объекты карты эврики-->
<script src="https://forumstatic.ru/files/001b/d4/18/62122.js?v=2"></script>

<style>
#hzmap-demo{min-height: 600px;}
</style>[/html]