Jak seskupit značky v Google Maps

Pokud potřebujete ukázat velké množství geografických informací ve srozumitelné formě, pravděpodobně využijete Google Maps. Samozřejmě je třeba informace představit tak, aby uživatelé snadno a rychle viděli celkový obrázek a mohli případně získat podrobnější informace. Stovky datových bodů, které jsou shromážděny dohromady, mohou představovat překážku.

V tomto článku vám povíme, jak použít JavaScriptovou knihovnu pro seskupování značek, abyste mohli tyto informace předávat ve zgrupovaném stavu, bez všech značek, které se překrývají. Také vám trochu vysvětlíme, jak to funguje, abyste lépe porozuměli, jak lze nastavit seskupování značek ve vlastních projektech.

K čemu vlastně slouží seskupování značek?

Abyste to pochopili, podívejme se na tuto mapu Nového Zélandu a Austrálie, na které jsou roztroušeny skupiny značek:

Navzdory tomu, že jsme přidali popisky ke každé značce, mnoho z nich je tak blízko, že se překrývají. Existuje méně než 25 lokalit, ale jsou příliš blízko k sobě na to, aby bylo možné je zobrazit na mapě bez překrytí.

Pokud váš mapa vypadá přibližně takto, brání to vašim zákazníkům pohodlně a správně vnímat informace, které se snažíte představit. Ale řešení existuje – shlukování značek. S pomocí jednoduché open-source knihovny a malého úpravy vašeho kódu mapy můžete přidat shlukování značek, což výrazně zlepší uživatelský zážitek pro vaše zákazníky.

Shlukování značek je pohodlným nástrojem pro vizuální konsolidaci značek, což usnadňuje čtení mapy zákazníkům jako celek. Shlukuje značky, které jsou blízko sebe na mapě, do shluků, které jsou zobrazeny jako jediný symbol.

Aktivujte shlukování značek: Jak na marker clustering

Shlukování značek (marker clustering) přidáte do své mapy pomocí několika řádků v JavaScriptu. Tento příklad ukazuje postup pro webové mapy, ale podobné nástroje nabízí i platforma Android a SDK Google Maps Platform. Než se pustíme do samotného shlukování, podívejme se, jak vypadá kód pro standardní značky bez clusterů:

const pos1 = {lat: -33.727111, lng: 150.371124};

const marker1 = new google.maps.Marker({position: pos1, map: map});

const pos2 = {lat: -33.718234, lng: 150.363181};

const marker2 = new google.maps.Marker({position: pos2, map: map});

Pokud pracujete s desítkami či stovkami bodů, pravděpodobně nebudete definovat každou proměnnou ručně. Tyto dvě značky nám však bohatě poslouží k tomu, abychom si ukázali funkci shlukování v praxi.

Pro aktivaci shlukování stačí v kódu provést dvě změny. Nejdříve si stáhněte knihovnu pro marker clustering. Pro produkční nasazení si ji stáhněte z GitHubu a uložte JavaScript na svůj server. V rámci tohoto demo příkladu využijeme soubor přímo z dokumentace Google Maps Platform:

Při kliknutí na ikonu shluku se mapa přiblíží na úroveň, kdy jsou viditelné obě značky.

Pokud přiblížíte mapu na několik úrovní, ikona shluku se objeví místo dvou značek, jakmile je mapa na úrovni, kdy se mohou překrývat.

V tomto průvodci klastrováním značek je podrobnější informace a příklady s větším počtem bodů.

Jak funguje shlukování tokenů

Knihovna pro klastrování značek je součástí open source mapových utilit na platformě GitHub. Máte přístup ke kompletnímu zdrojovému kódu a můžete provádět vlastní úpravy podle potřeby. Podívejme se na fungování algoritmu obecně. Nejprve algoritmus rozděluje mapu do mřížky, přičemž každý čtvereček v mřížce je výchozím nastavením 60×60 pixelů. Použitím příkladu s překrývajícími se značkami výše to můžeme vizualizovat následovně:

Mřížka ve skutečnosti nebude vypadat přesně jako na obrázku výše, protože se odvíjí od samotných značek. První značka se stane středem prvního sektoru. Další značky v tomto sektoru se přidají do příslušného shluku a jeho střed se následně přepočítá podle průměrné polohy všech obsažených značek. Pokud by značka mohla patřit do více shluků najednou, systém ji přiřadí k tomu nejbližšímu na základě vzdálenosti mezi souřadnicemi.

Výchozí nastavení algoritmu vyhovuje většině případů, ale jelikož je kód plně open-source, můžete si jej upravit přesně podle svých potřeb.

Přizpůsobte si svůj Google Maps clusterer: Možnosti konfigurace

Existuje mnoho způsobů, jak upravit vzhled a chování vašich shluků značek, přičemž většina z nich nevyžaduje zásah do samotné knihovny. Při vytváření shluků lze nastavit několik klíčových parametrů.

Nejsnadnější cestou k personalizaci shlukování v Google Maps je použití vlastních ikon. V předchozím jednoduchém příkladu jsme použili parametr imagePath. Knihovna pro shlukování automaticky přidá na konec této cesty číslo (1–5) následované příponou souboru (výchozí je .png). Pokud chcete použít jiný formát, využijte parametr imageExtension. Pamatujte, že na mapě vypadají nejlépe ikony s průhledným pozadím.

Standardně stačí k vytvoření shluku pouze dvě značky. Toto nastavení můžete změnit pomocí volby minimumClusterSize. Zvýšení tohoto čísla může vést k překrývání značek, ale i pro tyto případy lze nastavit práh překryvu.

Zde jsou další užitečné parametry pro práci s knihovnou:

gridSize: počet pixelů v mřížce shlukování.

zoomOnClick: automatické přiblížení shluku po kliknutí.

maxZoom: maximální úroveň přiblížení, po jejímž překročení se již budou zobrazovat pouze jednotlivé značky.

styles: pole objektů pro každý typ shluku, které definuje barvu textu (textColor), velikost písma (textSize) a další vlastnosti.

Všechny výše uvedené možnosti můžete zkombinovat například takto:

// Nastavení parametrů pro marker clusterer const clusterOptions = { imagePath: “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”, gridSize: 30, zoomOnClick: false, maxZoom: 10 };

// Přidání marker clustereru pro správu značek. const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);

// Úprava stylů po vytvoření shluku const styles = markerClusterer.getStyles(); for (let i=0; i<styles.length; i++) { styles[i].textColor = “red”; styles[i].textSize = 18; }

Všechny tyto parametry můžete využít společně, jak je ukázáno v následujícím příkladu:

Jak jste si již všimli, existují 2 rozdíly: více shluků (díky menšímu rozměru sítě), čísla jsou červená a trochu větší. Při kliknutí na shluk se měřítko nezmění, ale můžete jej ručně zvětšit. Samostatné značky se objeví rychleji díky menšímu rozměru sítě, což snižuje šanci na překrytí značek. Jakmile dosáhnete úrovně měřítka 10 (mapa začíná na úrovni 3), všechny značky budou zobrazeny bez ohledu na to, jak jsou blízko. V této fázi jste přešli od přeplněné mapy k elegantně shlukované. Využijte tyto nové znalosti k poskytnutí lepšího uživatelského zážitku u map s velkým množstvím značek. Další způsoby přizpůsobení knihovny pro shlukování značek najdete při studiu jejího kódu.

Pro implementaci těchto a dalších funkcí se obraťte na naši tým odborníků pro konzultaci nebo technickou expertízu. Navíc společnost Cloudfresh je partnerem Google Maps a poskytuje možnost platby na fakturu pro podniky včetně přípravy veškerých potřebných účetních a právních dokumentů.

Co nabízíme?

• Konzultace a integrace API.
• Služby založené na platformě Google Maps.
• Technické vzdělávání vašeho týmu.
• Technickou podporu.

Spoluprací s námi získáte následující výhody:

• Přístup k 7úrovňovému systému slev, který je dostupný pouze s partnerem Google Maps.
• Možnost platby na fakturu právnické osobě v CZK, EUR, USD a dokonce i kryptoměnách.
• Profesionální podpora po celou dobu využívání služeb.