Matvey-Kuk / makers_against_covid

8 stars 7 forks source link

Страница с картой печатников #25

Open skitale-design opened 4 years ago

skitale-design commented 4 years ago

Образец без актуальных данных - http://www.psycookbook.ru/covid/map.php Доки yandex-api - https://tech.yandex.ru/maps/jsbox/2.1/object_manager

Надо просто положить Json файл с координатами и остальными данными, которые хочется выводить на диаграмме, рядом с html-файлом.

Подправленный скрипт, который добавляет на карту именно круговые диаграммы вместо обычных меток. (Значения у всех одинаковые пока):

<script>
ymaps.ready(init);
$data = "dataS";
function init () {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterDisableClickZoom: true
        });

    objectManager.objects.options.set('preset', 'islands#greenDotIcon');
    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');

    $.ajax({
        url: "data.json"
    }).done(function(data) {
        $data = data;
        objectManager.add(data);
        $data.features.forEach(function(el){
            console.log(el);
            arr = el.geometry.coordinates;
            $id = el.id;
            $iconCaption = el.properties.iconCaption;
            $description = el.properties.description;
            var myPieChart = new ymaps.Placemark(arr,
                            {
                                // Данные для построения диаграммы.
                                data: [
                                    {weight: 8, color: '#ed7070'},
                                    {weight: 6, color: '#268E00'},
                                    {weight: 4, color: '#4F4FD9'}
                                ],
                                iconCaption: $iconCaption,
                                iconContent: $id,
                                balloonContent: $description

                            }, {
                                // Зададим произвольный макет метки.
                                iconLayout: 'default#pieChart',
                                // Радиус диаграммы в пикселях.
                                iconPieChartRadius: 20,
                                // Радиус центральной части макета.
                                iconPieChartCoreRadius: 10,
                                // Стиль заливки центральной части.
                                iconPieChartCoreFillStyle: '#ffffff',
                                // Cтиль линий-разделителей секторов и внешней обводки диаграммы.
                                iconPieChartStrokeStyle: '#ffffff',
                                // Ширина линий-разделителей секторов и внешней обводки диаграммы.
                                iconPieChartStrokeWidth: 3,
                                // Максимальная ширина подписи метки.
                                iconPieChartCaptionMaxWidth: 200
                            });
            myMap.geoObjects.add(myPieChart);
            }); 
    });
}
</script>
Matvey-Kuk commented 4 years ago