Fórum nápovědy - Mapy.cz API/SDK

Přispět do diskuze

Zvětšení mapy bez přechodu na vyšší zoom

No Such

16.12.2021 v 23:25

Mobilni chrome: Snažím se zvětšit zobrazení mapy (prostě zvětšení, aby byly lépe čitelné nápisy, nikoliv zoom na větší detail) pomocí transform:scale(1.5,1.5) a transform-origin:50% 50% aplikované na element, ve kterém je vytvořena mapa. Zvětšené zobrazení funguje dobře, ale při zoomu dvěma prsty dochází k tomu, že mapa ujizdi doleva nahoru - jako kdyby body dotyku byly počítány relativne k levemu hornimu rohu podle nezvětšené (původní) mapy. Co s tím? Jak jinak bych tohoto zvětšení mapy mohl dosáhnout?

Zobrazit:

všechny

relevantní

Jakub Kraft • tým Mapy.cz

11.1.2022 v 15:05

Dobrý den,

trochu ten dotaz zapadl, nicméně aby bylo jasné, že jsme na něj nezapomněli, tak odpovím, byť nic, co by vás potěšilo. Podle mě s Mapy API nic takového udělat spolehlivě nelze a fungovat to správně nebude nikdy. Rád bych se mýlil a pokud tomu tak je, zajímalo by mě řešení, ale bez tohoto mohu říct jen, že to nejde.

No Such

20.1.2022 v 14:41

Overlay průhledného elementu přes zvětšený container mapy, který zachytává touch-eventy, zastavuje propagaci, přepočítává je a přeposílá do mapy?

Jakub Kraft • tým Mapy.cz reagoval na příspěvek od No Such

24.1.2022 v 10:27

Samozřejmě určitě lze najít nějaké kostrbatější řešení obcházející omezení Mapy API. Ale v jeho rámci řešení nenajdete, bude to muset být něco takto podivného a obávám se, že to bude zcela na vás. Jen tedy dnes bych asi už nevolil touch eventy, ale pointer eventy, které pokryjí jak myš, tak dotyk či stylus bez rozdílu. A samozřejmě do mapy nic nepřeposílejte, prostě jí jen řekněte, na jaké nové souřadnice se má nastavit střed.

No Such

14.2.2022 v 0:03

Zda se, že by to mohlo jakž takž fungovat takto:

smap=new SMap(mapdiv, ....);
var defbase=smap.addDefaultLayer(SMap.DEF_BASE); defbase.enable();
var zoomable=defbase.getContainer()[0].parentElement.parentElement;
var zoomable_cs=getComputedStyle(zoomable);
zoomable.style.transform="scale(2)";
(function adjust() {
let pcr=mapdiv.getBoundingClientRect();
let tox=pcr.width/2-parseFloat(zoomable_cs.left);
let toy=pcr.height/2-parseFloat(zoomable_cs.top);
zoomable.style.transformOrigin=tox+"px "+toy+"px";
setTimeout(adjust,100);
})()

Přepsal a zjednodusil jsem to z komplikovnější implementace, takže za chyby v zápisu se omlouvám, princip je však doufám zřejmý. Místo pollování left a top by asi bylo možno použít MutationObserver na style.
Zajímavé je, že kolem tohoto počátku lze mapu i (programově) rotovat, ovšem bohužel rotovaná mapa pak nesprávné reaguje na eventy z UI (mousexx, click, dblclick, touchxx, gesturexx a co to všechno vlastně poslouchate), na řešení ještě pracuji (viz můj jiný dotaz ohledně rotace) tam asi bude opravdu nutné eventy zachytávat jinym elementem a transformovat.

Bvgeo reagoval na příspěvek od No Such

14.2.2022 v 10:22

Dobrý den,
to by mě zajímalo, kdyby jste přišel na to, jak odchytit a transformovat eventy z UI. Otáčím mapou (kompasem) při jednoduché navigaci a pro zoomování musím používat tlačítka.

No Such

15.2.2022 v 16:57

Nerozumím zcela, já mapu zvetsenou i nezvetsenou mohu zoomovat prsty i tlačítky, rotovat o libovolný úhel pomocí UI standardně nelze, zatím tedy jen programově (funguje, pomocí transform rotate, mapa se sama natáčí dle směru jízdy). Rotaci o 90° pomocí tlačítek z UI používat nechci. Problém, který řeším, je, že pokud je mapa rotovaná, tak posun prstem posouvá nesprávným směrem, takže standardní DOM eventy do mapy přímo pustit nelze. Co se týče těchto eventů, neměl jsem tedy na mysli eventy "z UI" , sorry, ale eventy pro UI, ještě než se do něj dostanou. Překryji mapu průhledným elementem, který bude poslouchat eventy (a nenechá je dorazit do UI mapy), transformuji je a pošlu transformované do UI mapy pomocí dispatchEvent. Zároveň bych tyto eventy, ještě než je pošlu do mapy, mohl použít i k rotaci prsty.

No Such

19.2.2022 v 12:07

Nebo by bylo možné na základě eventů ž překryvného elementu řešit pohyb, zoom i rotaci úplně ve vlastní režii a ovládat mapu pomocí setCenterZoom a transform:scale() rotate(), pak by se vůbec nepoužíval ovládací prvek MOUSE. Otázka je, co bude jednodušší, vzhled by totiž bylo nutné měnit už během gesta a zároveň řešit kolize s automatickými změnami z logiky aplikace (posun za jízdy, změna zoomu mapy). Uvidíme.

Přispět do diskuze

Nový dotaz

0/56

Popis dotazu 0/5000

Přiložené přílohy

Nahrát přílohu

Zbývá 12MB (z 12MB)