Zarządzanie widocznością POI na mapie

POI podzielone są na kategorie. Istnieje możliwość wybrania, które POI'e mają być widoczne. Domyślnie wszystkie POI są ukryte.

Do zintegrowania zarządzania kategoriami z interfejsem html'owym portalu służą specjalne metody.

Funkcja getCategories()

Zwraca kolekcję wszystkich kategorii POI z których każda kategoria ma strukturę:


var category = {
  //identyfikator kategorii
  "id" :  2037,
  //nazwa kategorii
  "name" :  "Ambasady i konsulaty",
  //url do grafiki ikony dla kategorii
  "iconUrl" :  "http://i.wp.pl/a/i/mapy/cat003/firmy.png",
  //czy domyślnie kategoria jest widoczna
  "defaultVisibility" :  0,
  //lista warstw z POIami w tej kategorii
  //to właśnie w warstwach jest zdefiniowane przy jakim zoomie są widoczne POI
  "layers" :  [
    {
      //identyfikator warstwy
      "id" :  34,
      //zoom od którego POI są widoczne
      "zoomFrom" :  14,
      //zoom do którego POI są widoczne
      "zoomTo" :  16,
      //url do grafiki ikony dla warstwy
      "iconUrl" :  "http://i.wp.pl/a/i/mapy/cat003/firmy.png",
      //czy warstwa jest warstwą agregującą
      "isAggregate" :  0,
      //źródło POI - o tym więcej w artykule o definiowaniu własnego źródła POI
      "poiBase" :  "docelu"
    }
  ]
};

Na poniższym przykładzie wypiszemy wszystkie kategorie:


<div id="map" style="width:800px; height:600px; "></div>
<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function() {
		DoCelu.loadMap(document.getElementById('map'), null, function() {
			var categories = DoCelu.getCategories();
			$catDiv = jQuery('#catDiv').html('<ul>');
			for (var i in categories) {
			  var category = categories[i];
			  $catDiv.append('<li><img src="' + category.iconUrl + '" />' + category.name + '</li>');
			}
			$catDiv.append('</ul>');
		});
	});
//]]>
</script>

Dodatkowo możemy sprawdzić, które kategorie są aktywne:

Funkcja getVisibleCategories()

Zwraca identyfikatory aktualnie widocznych kategorii.


<div id="map" style="width:800px; height:600px; "></div>
<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function() {
		DoCelu.loadMap(document.getElementById('map'), null, function() {
			var categories = DoCelu.getVisibleCategories();
			$catVDiv = jQuery('#catVisibleDiv').html('<span>');
			for (var i in categories) {
			  var category = categories[i];
			  $catVDiv.append(category +', ');
			}
			$catVDiv.append('</span>');
		});
	});
//]]>
</script>

Do (de)aktywowania kategorii służą metody showCategories i hideCategories

Funkcja showCategories(categoryIds)

Jako parametr przyjmuje tablicę identyfikatorów kategorii do pokazania.

Funkcja hideCategories(categoryIds)

Jako parametr przyjmuje tablicę identyfikatorów kategorii do ukrycia.

Przykład prezentujacy działanie tych funkcji. Deaktywuje wszystkie kategorie, a następnie aktywuje pierwszą i ostatnią.


<div id="map" style="width:800px; height:600px; "></div>
<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function() {
		DoCelu.loadMap(document.getElementById('map'), null, function() {
			//ukrywamy wszystkie widoczne kategorie
			DoCelu.hideCategories(DoCelu.getVisibleCategories());
			var categories = DoCelu.getCategories();
			var ids = [];
			ids.push(categories[0].id);
			ids.push(categories[categories.length - 1].id);
			DoCelu.showCategories(ids);
		});
	});
//]]>
</script>

Po aktywowaniu kategorii i przybliżeniu mapy na centrum większego miasta powinniśmy zobaczyć na mapie POI. POI widoczne są na mapie od określonego poziomu zoomu ze względów wydajnościowych (jednoczesne zaprezentowanie miliona obiektów na mapie z całą pewnością doprowadziłoby do zawieszenia przeglądarki użytkownika, a przynajmniej do znacznego obniżenia jej responsywności).

Poniższy test pobierze listę wszystkich kategorii i ustawi widoczność pierwszej i ostatniej kategorii ukrywając pozostałe. Na końcu pobierze identyfikatory tych kategorii które są widoczne.