отобразить круговую диаграмму во всплывающем окне mapbox - PullRequest
Новая
       9

отобразить круговую диаграмму во всплывающем окне mapbox

0 голосов
/ 23 октября 2019

Я хочу отобразить круговую диаграмму, чтобы показать мои данные, когда я нажимаю на точку. 

//html part
<div id="map"></div>


//javaScript
<script >


var peopleJSON = [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [144.961027, -37.795947]
            },
            "properties": {
                "building_name": "Art West",
                "student": 100,
                "staff": 200,
                "total": 300,
            }
        },

map.on('load', function(){
                map.addLayer({
                'id': 'test',
                'type': 'circle',
                'source' : {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": peopleJSON,
                    }

                },
                'paint':{
                    'circle-color': '#00b7bf',
                    'circle-radius':8
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#333',
                }
            });

            map.on('click', 'test', function (e) {
                new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(
                 "Building Name: " + e.features[0].properties.building_name
                + "<br> detail: " + e.features[0].properties.detail
                + "<br> total: " + e.features[0].properties.total
                 )
                .addTo(map);
                });


            })
</script>

Теперь мой код просто показывает текст данных. Могу ли я создать элемент div во всплывающем окне и использовать любой внешний API (например, Google Chart) для доступа к данным и создания круговой диаграммы в Div?

...