<bird-data>
    <bird-data-style></bird-data-style>
    <bird-data-map></bird-data-map>
    <bird-data-map-first if={mapfirst}></bird-data-map-first>
    <bird-data-map-addall if={mapaddall}></bird-data-map-addall>
    <script>
        this.mapfirst = true;
        this.mapaddall = false;
        obs.on("mapEvent", function(inputval) {
            this.mapfirst = false;
            this.mapaddall = true;
            this.update();
        }.bind(this));
    </script>
</bird-data>
<bird-data-map>
    <script>
        var t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
            attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
        });
        var t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
            attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
        });
        var o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        });
        var iconLayersControl = new L.Control.IconLayers(
            [
                {
                    title: 'OSM',
                    layer: o_std,
                    icon: 'img/map_04.png'
                },
                {
                    title: '航空写真',
                    layer: t_ort,
                    icon: 'img/map_02.png'
                },
                {
                    title: '地理院地図',
                    layer: t_pale,
                    icon: 'img/map_03.png'
                }
            ], {
                position: 'bottomleft',
                maxLayersInRow: 5
            }
        );
        var lat = 37.5051;
        var lng = 140.8509;
        var map = L.map('map', {
            center: [lat, lng],
            zoom: 11,
            minZoom: 10,
            maxZoom: 14,
            zoomControl: true,
            layers: [o_std]
        });
        L.control.scale({
            imperial: false,
            maxWidth: 300
        }).addTo(map);
        L.control.locate().addTo(map);
        iconLayersControl.addTo(map);
        var PointAll01 = L.layerGroup().addTo(map);
        var PointAll001 = L.layerGroup().addTo(map);
        var Pointnumber01 = L.layerGroup().addTo(map);
        riot.mixin('mapadd', {
            mapadd: map
        });
        riot.mixin('PointAll01add', {
            PointAll01add: PointAll01
        });
        riot.mixin('PointAll001add', {
            PointAll001add: PointAll001
        });
        riot.mixin('Pointnumber01add', {
            Pointnumber01add: Pointnumber01
        });
    </script>
</bird-data-map>
<bird-data-map-first>
    <script>
        this.mixin('mapadd');
        this.mixin('PointAll01add');
        this.mixin('PointAll001add');
        this.mixin('Pointnumber01add');
        fetch('./vecter/birddata.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                var i = 0;
                var sitecode = _.map(_.uniqBy(json, "sitecode"), 'sitecode');
                var length = Object.keys(_.uniqBy(json, "sitecode")).length;
                var ovn = [];
                var z;
                i = 0;
                _.forEach(sitecode, function(data) {
                    z = _.sumBy(_.filter(json, {"sitecode": data}), "observation");
                    ovn[i] = z;
                    i = i + 1;
                });
                var zoneall = [];
                var s;
                i = 0;
                _.forEach(sitecode, function(data) {
                    s = _.map(_.uniqBy(_.filter(json, {"sitecode": data, "year": "2014"}), "zone"), "zone");
                    zoneall[i] = s;
                    i = i + 1;
                });
                var onevalue = [];
                var y;
                i = 0;
                _.forEach(sitecode, function(data) {
                    y = _.sumBy(_.filter(json, {"sitecode": data, "birdname": "キビタキ"}), "value");
                    onevalue[i] = y;
                    i = i + 1;
                });
                var totalvalue = [];
                var x;
                i = 0;
                _.forEach(sitecode, function(data) {
                    x = _.sumBy(_.uniqBy(_.filter(json, {"sitecode": data}), "year"), "valueall");
                    totalvalue[i] = x;
                    i = i + 1;
                });
                var percentvalue = [];
                var t;
                i = 0;
                _.forEach(sitecode, function(data) {
                    t = _.round(((onevalue[i] / totalvalue[i])*100), [precision=2]);
                    percentvalue[i] = t;
                    i = i + 1;
                });
                var PointGeojson01 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (percentvalue[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_zero);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_zero);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_zero);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_zero);
                                }
                            } else if (percentvalue[i] >= 0 && percentvalue[i] < 5 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_mid);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_mid);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_mid);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_mid);
                                }
                            } else if (percentvalue[i] >= 5 && percentvalue[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max1);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max1);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max1);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max1);
                                }
                            } else if (percentvalue[i] >= 10 && percentvalue[i] < 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max2);
                                }
                            } else if (percentvalue[i] >= 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max2);
                                }
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                return L.circle(layer, 0, nopoint);
                            }
                        }
                    }
                }).addTo(this.PointAll01add);
                var PointGeojson02 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (percentvalue[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_zero);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_zero);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_zero);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_zero);
                                }
                            } else if (percentvalue[i] >= 0 && percentvalue[i] < 5 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_mid);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_mid);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_mid);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_mid);
                                }
                            } else if (percentvalue[i] >= 5 && percentvalue[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max1);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max1);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max1);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max1);
                                }
                            } else if (percentvalue[i] >= 10 && percentvalue[i] < 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max2);
                                }
                            } else if (percentvalue[i] >= 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max3);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max3);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max3);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max3);
                                }
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                return L.circle(layer, 0, nopoint);
                            }
                        }
                    }
                }).addTo(this.PointAll001add);
                var allanswer = [];
                var PointGeojson02 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            allanswer[i] = percentvalue[i].toFixed(2);
                            if (percentvalue[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(20, 20),
                                    className: "divicon",
                                    html: '<div class="outline"><p>0%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 0 && percentvalue[i] < 5 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(45, 27),
                                    className: "divicon",
                                    html: '<div class="outline2"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 5 && percentvalue[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(45, 27),
                                    className: "divicon",
                                    html: '<div class="outline2"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 10 && percentvalue[i] < 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(60, 30),
                                    className: "divicon",
                                    html: '<div class="outline3"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(75, 35),
                                    className: "divicon",
                                    html: '<div class="outline4"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(0, 0),
                                    className: "divicon",
                                    html: ''
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            }
                        }
                    }
                }).addTo(this.Pointnumber01add);
                this.update();
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
    </script>
</bird-data-map-first>
<bird-data-map-addall>
    <script>
        obs.on("mapmapEvent", function(inputval) {
            this.mixin('mapadd');
            this.mixin('PointAll01add');
            this.mixin('PointAll001add');
            this.mixin('Pointnumber01add');
            this.PointAll01add.clearLayers();
            this.PointAll001add.clearLayers();
            this.Pointnumber01add.clearLayers();
            fetch('./vecter/birddata.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var i = 0;
                    var flag;
                    var length;
                    var sitecode;
                    var Exclusion0;
                    var Exclusion0org;
                    var years;
                    var yearsorg;
                    var school;
                    var ovn = [];
                    var zoneall = [];
                    var onevalue = [];
                    var totalvalue = [];
                    var percentvalue = [];
                    var birdname = [];
                    var lengthbird = [];
                    var s;
                    var t;
                    var u;
                    var w;
                    var x;
                    var y;
                    var z;
                    if (inputval[1] === "未選択" && inputval[0] !== "") {
                        flag = 0;
                        sitecode = _.map(_.uniqBy(json, "sitecode"), 'sitecode');
                        length = Object.keys(_.uniqBy(json, "sitecode")).length;
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            z = _.sumBy(_.filter(json, {"sitecode": data}), "observation");
                            ovn[i] = z;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            s = _.map(_.uniqBy(_.filter(json, {"sitecode": data, "year": inputval[3]}), "zone"), "zone");
                            zoneall[i] = s;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            y = _.sumBy(_.filter(json, {"sitecode": data, "birdname": inputval[0]}), "value");
                            onevalue[i] = y;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            x = _.sumBy(_.uniqBy(_.filter(json, {"sitecode": data}), "year"), "valueall");
                            totalvalue[i] = x;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            t = _.round(((onevalue[i] / totalvalue[i])*100), [precision=2]);
                            percentvalue[i] = t;
                            i = i + 1;
                        });
                    }else if (inputval[1] !== "未選択" && inputval[0] !== "") {
                        flag = 0;
                        years = _.filter(json, function(data) {
                            if (inputval[1] !== "未選択" && inputval[2] === "未選択") {
                                if (data.year == inputval[1]) {
                                    return data;
                                }
                            } else if (inputval[1] !== "未選択" && inputval[2] !== "未選択") {
                                if (data.year >= inputval[1] && data.year <= inputval[2]) {
                                    return data;
                                }
                            }
                        });
                        sitecode = _.map(_.uniqBy(years, "sitecode"), 'sitecode');
                        length = Object.keys(_.uniqBy(years, "sitecode")).length;
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            z = _.sumBy(_.filter(years, {"sitecode": data}), "observation");
                            ovn[i] = z;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            s = _.map(_.uniqBy(_.filter(json, {"sitecode": data, "year": inputval[3]}), "zone"), "zone");
                            zoneall[i] = s;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            y = _.sumBy(_.filter(years, {"sitecode": data, "birdname": inputval[0]}), "value");
                            onevalue[i] = y;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            x = _.sumBy(_.uniqBy(_.filter(years, {"sitecode": data}), "year"), "valueall");
                            totalvalue[i] = x;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function() {
                            t = _.round(((onevalue[i] / totalvalue[i])*100), [precision=2]);
                            percentvalue[i] = t;
                            i = i + 1;
                        });
                    }else if (inputval[1] !== "未選択" && inputval[0] === "") {
                        flag = 1;
                        Exclusion0org = _.filter(json, function(data) {
                            if (data.value !== 0) {
                                return data;
                            }
                        });
                        yearsorg = _.filter(Exclusion0org, function(data) {
                            if (inputval[1] !== "未選択" && inputval[2] === "未選択") {
                                if (data.year == inputval[1]) {
                                    return data;
                                }
                            } else if (inputval[1] !== "未選択" && inputval[2] !== "未選択") {
                                if (data.year >= inputval[1] && data.year <= inputval[2]) {
                                    return data;
                                }
                            }
                        });
                        Exclusion0 = _.filter(json, function(data) {
                            if (data.observation === 0) {
                                return data;
                            } else if (data.observation === 1) {
                                if (data.value !== 0) {
                                    return data;
                                }
                            }
                        });
                        years = _.filter(Exclusion0, function(data) {
                            if (inputval[1] !== "未選択" && inputval[2] === "未選択") {
                                if (data.year == inputval[1]) {
                                    return data;
                                }
                            } else if (inputval[1] !== "未選択" && inputval[2] !== "未選択") {
                                if (data.year >= inputval[1] && data.year <= inputval[2]) {
                                    return data;
                                }
                            }
                        });
                        sitecode = _.map(_.uniqBy(years, "sitecode"), 'sitecode');
                        school = _.map(_.uniqBy(years, "school"), 'school');
                        length = Object.keys(_.uniqBy(years, "sitecode")).length;
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            u = _.map(_.uniqBy(_.filter(yearsorg, {"sitecode": data}), 'birdname'), 'birdname');
                            birdname[i] = u;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            w = Object.keys(_.map(_.uniqBy(_.filter(yearsorg, {"sitecode": data}), 'birdname'), 'birdname')).length;
                            lengthbird[i] = w;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            z = _.sumBy(_.filter(years, {"sitecode": data}), "observation");
                            ovn[i] = z;
                            i = i + 1;
                        });
                        i = 0;
                        _.forEach(sitecode, function(data) {
                            s = _.map(_.uniqBy(_.filter(json, {"sitecode": data, "year": inputval[3]}), "zone"), "zone");
                            zoneall[i] = s;
                            i = i + 1;
                        });
                    }else {
                    }
                    GeoJSON_ON(sitecode, percentvalue, zoneall, ovn, lengthbird, school, birdname, length, flag, this.PointAll01add, this.PointAll001add, this.Pointnumber01add);
                    this.update();
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
                });
        }.bind(this));
        function GeoJSON_ON(sitecode, percentvalue, zoneall, ovn, lengthbird, school, birdname, length, flag, PointAll01add, PointAll001add, Pointnumber01add) {
            var i = 0;
            if (flag == 0) {
                var PointGeojson01 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (percentvalue[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_zero);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_zero);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_zero);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_zero);
                                }
                            } else if (percentvalue[i] >= 0 && percentvalue[i] < 5 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_mid);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_mid);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_mid);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_mid);
                                }
                            } else if (percentvalue[i] >= 5 && percentvalue[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max1);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max1);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max1);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max1);
                                }
                            } else if (percentvalue[i] >= 10 && percentvalue[i] < 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max2);
                                }
                            } else if (percentvalue[i] >= 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max3);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max3);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max3);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max3);
                                }
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                return L.circle(layer, 0, nopoint);
                            }
                        }
                    }
                }).addTo(PointAll01add);
                var PointGeojson02 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (percentvalue[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_zero);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_zero);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_zero);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_zero);
                                }
                            } else if (percentvalue[i] >= 0 && percentvalue[i] < 5 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_mid);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_mid);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_mid);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_mid);
                                }
                            } else if (percentvalue[i] >= 5 && percentvalue[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max1);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max1);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max1);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max1);
                                }
                            } else if (percentvalue[i] >= 10 && percentvalue[i] < 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max2);
                                }
                            } else if (percentvalue[i] >= 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max3);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max3);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max3);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max3);
                                }
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                return L.circle(layer, 0, nopoint);
                            }
                        }
                    }
                }).addTo(PointAll001add);
                var allanswer = [];
                var PointGeojson02 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            allanswer[i] = percentvalue[i].toFixed(2);
                            if (percentvalue[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(20, 20),
                                    className: "divicon",
                                    html: '<div class="outline"><p>0%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 0 && percentvalue[i] < 5 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(45, 27),
                                    className: "divicon",
                                    html: '<div class="outline2"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 5 && percentvalue[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(45, 27),
                                    className: "divicon",
                                    html: '<div class="outline2"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 10 && percentvalue[i] < 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(60, 30),
                                    className: "divicon",
                                    html: '<div class="outline3"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (percentvalue[i] >= 30 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(75, 35),
                                    className: "divicon",
                                    html: '<div class="outline4"><p>' + allanswer[i] + '%</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(0, 0),
                                    className: "divicon",
                                    html: ''
                                });
                                return L.marker(layer, {icon: myIcon,clickable:false});
                            }
                        }
                    }
                }).addTo(Pointnumber01add);
            } else if (flag == 1) {
                var PointGeojson01 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (lengthbird[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_zero);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_zero);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_zero);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_zero);
                                }
                            } else if (lengthbird[i] >= 0 && lengthbird[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_mid);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_mid);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_mid);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_mid);
                                }
                            } else if (lengthbird[i] >= 10 && lengthbird[i] < 15 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max1);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max1);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max1);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max1);
                                }
                            } else if (lengthbird[i] >= 15 && lengthbird[i] < 20 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max2);
                                }
                            } else if (lengthbird[i] >= 20 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_max3);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_max3);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_max3);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_max3);
                                }
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                return L.circle(layer, 0, nopoint);
                            }
                        }
                    }
                }).addTo(PointAll01add);
                var PointGeojson02 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (lengthbird[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone0_zero);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone1_zero);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone2_zero);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone3_zero);
                                }
                            } else if (lengthbird[i] >= 0 && lengthbird[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_mid);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_mid);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_mid);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_mid);
                                }
                            } else if (lengthbird[i] >= 10 && lengthbird[i] < 15 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max1);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max1);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max1);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max1);
                                }
                            } else if (lengthbird[i] >= 15 && lengthbird[i] < 20 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max2);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max2);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max2);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max2);
                                }
                            } else if (lengthbird[i] >= 20 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                if (zoneall[i] == 0) {
                                    return L.circleMarker(layer, zone00_max3);
                                } else if (zoneall[i] == 1) {
                                    return L.circleMarker(layer, zone01_max3);
                                } else if (zoneall[i] == 2) {
                                    return L.circleMarker(layer, zone02_max3);
                                } else if (zoneall[i] == 3) {
                                    return L.circleMarker(layer, zone03_max3);
                                }
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                return L.circle(layer, 0, nopoint);
                            }
                        }
                    }
                }).addTo(PointAll001add);
                var PointGeojson02 = L.geoJson(spotdata, {
                    pointToLayer: function (feature, layer) {
                        for (i = 0; i < length; i++) {
                            if (lengthbird[i] == 0 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(12, 30),
                                    className: "divicon",
                                    html: '<div class="outline01"><p>' + lengthbird[i] + '</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon});
                            } else if (lengthbird[i] >= 0 && lengthbird[i] < 10 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(12, 30),
                                    className: "divicon",
                                    html: '<div class="outline02"><p>' + lengthbird[i] + '</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon});
                            } else if (lengthbird[i] >= 10 && lengthbird[i] < 15 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(22, 30),
                                    className: "divicon",
                                    html: '<div class="outline02"><p>' + lengthbird[i] + '</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon});
                            } else if (lengthbird[i] >= 15 && lengthbird[i] < 20 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(25, 35),
                                    className: "divicon",
                                    html: '<div class="outline03"><p>' + lengthbird[i] + '</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon});
                            } else if (lengthbird[i] >= 20 && ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(30, 48),
                                    className: "divicon",
                                    html: '<div class="outline04"><p>' + lengthbird[i] + '</p></div>'
                                });
                                return L.marker(layer, {icon: myIcon});
                            } else if (ovn[i] == 0 && feature.properties.sitecode == sitecode[i]) {
                                var myIcon = L.divIcon({
                                    iconSize: new L.Point(0, 0),
                                    className: "divicon",
                                    html: ''
                                });
                                return L.marker(layer, {icon: myIcon});
                            }
                        }
                    },
                    onEachFeature: function (feature, layer) {
                        layer.on('click', function (e) {
                            for (i = 0; i < length; i++) {
                                if (ovn[i] >= 1 && feature.properties.sitecode == sitecode[i]) {
                                    obs.trigger("mapmoveEvent", birdname[i]);
                                    obs.trigger("mapmovemoveEvent", school[i]);
                                }
                            }
                        });
                    }
                }).addTo(Pointnumber01add);
            }
        }
    </script>
</bird-data-map-addall>
<bird-data-style>
    <script>
        zone0color = "#0E7AC4";
        zone1color = "#3CFF00";
        zone2color = "#FFBE00";
        zone3color = "#FF0000";
        zone0_zero = {
            color: zone0color,
            radius: 25,
            weight: 3, //default value:6
            opacity: 0.4,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.4,
            //dashArray:[10, 10],
            clickable:false
        };
        zone1_zero = {
            color: zone1color,
            radius: 25,
            weight: 3, //default value:6
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.4,
            //dashArray:[10, 10],
            clickable:false
        };
        zone2_zero = {
            color: zone2color,
            radius: 25,
            weight: 3, //default value:6
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.4,
            //dashArray:[10, 10],
            clickable:false
        };
        zone3_zero = {
            color: zone3color,
            radius: 25,
            weight: 3, //default value:6
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.4,
            //dashArray:[10, 10],
            clickable:false
        };
        zone0_mid = {
            color: zone0color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone1_mid = {
            color: zone1color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone2_mid = {
            color: zone2color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone3_mid = {
            color: zone3color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone00_mid = {
            color: zone0color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: zone0color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone01_mid = {
            color: zone1color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: zone1color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone02_mid = {
            color: zone2color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: zone2color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone03_mid = {
            color: zone3color,
            radius: 30,
            weight: 6,
            opacity: 0.6,
            fill: true,
            fillColor: zone3color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone0_max1 = {
            color: zone0color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone1_max1 = {
            color: zone1color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone2_max1 = {
            color: zone2color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone3_max1 = {
            color: zone3color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone00_max1 = {
            color: zone0color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone0color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone01_max1 = {
            color: zone1color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone1color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone02_max1 = {
            color: zone2color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone2color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone03_max1 = {
            color: zone3color,
            radius: 35,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone3color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone0_max2 = {
            color: zone0color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone1_max2 = {
            color: zone1color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone2_max2 = {
            color: zone2color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone3_max2 = {
            color: zone3color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone00_max2 = {
            color: zone0color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone0color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone01_max2 = {
            color: zone1color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone1color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone02_max2 = {
            color: zone2color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone2color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone03_max2 = {
            color: zone3color,
            radius: 40,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone3color,
            fillOpacity: 0.2,
            clickable:false
        };
        //max3
        zone0_max3 = {
            color: zone0color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone1_max3 = {
            color: zone1color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone2_max3 = {
            color: zone2color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone3_max3 = {
            color: zone3color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 0.8,
            clickable:false
        };
        zone00_max3 = {
            color: zone0color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone0color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone01_max3 = {
            color: zone1color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone1color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone02_max3 = {
            color: zone2color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone2color,
            fillOpacity: 0.2,
            clickable:false
        };
        zone03_max3 = {
            color: zone3color,
            radius: 50,
            weight: 7,
            opacity: 0.6,
            fill: true,
            fillColor: zone3color,
            fillOpacity: 0.2,
            clickable:false
        };
        nopoint = {
            weight: 0,
            opacity: 0,
            fill: false,
            clickable:false
        };
    </script>
</bird-data-style>
