Map api yandex: иконка кластера в виде круговой диаграммы

Задача: отобразить на карте иконки кластеров в виде диаграммы построенной на основании сумм неких значений

Решение:

Используя библиотеку PieChartGD.php создадим файл вывода картинки (PHP):

Далее создадим функцию отображения кластера (JavaScript):

И перед началом отрисовки меток, настроим кластеризацию:

В результате получим что-то вроде:

JavaScript: перехват всех http/https запросов страницы

Прилетела задача перехватить URL всех загрузок тайлов на странице с размещенной Яндекс картой. В принципе если бы был простой случай, то всё решилось бы созданием прототипа для функции XMLHttpRequest , что-то в духе:

Но возник один нюанс, карта располагается в iframe, а прототипы «вниз» не распространяются. Единственным способом осталось написать сервис Service Worker, который будет отлавливать все запросы..

На странице добавляем функцию загрузки сервиса:

Далее в sw.js добавим слушательсобытия fetch, и реализацию отправки перехваченых url на сервер:

Серверная часть woodpecker.php:

В результате в файл url.txt на сервере пишутся все запрошенные url.

Отладка сервиса в FireFox возможна на вкладке about:debugging#/runtime/this-firefox, ищем там свой сервис, нажимаем «исследовать»

1 2 3