MaxInterview - filter geojson programmatically

showing results for - "filter geojson programmatically"
08 Mar 2020
1<!DOCTYPE html>
2<html>
3<head>
4    <title>GeoJSON Example</title>
5    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
6    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
8
9<style>
10#wrapper {
11  margin: 0 auto;
12  width: 100%;
13}
14
15#panel{
16 float: left;
17  width: 100%;
18  height:50px;
19background-color: #175B81;
20color:white;
21}
22
23#map {
24  float: left;
25  width: 80%;
26  height:600px;
27}
28
29</style>
30</head>
31<body>
32
33<div id="wrapper">
34    <div id="panel"><span class="p2"></span>
35
36            <select id="league" onchange="LeagueSelect()">
37              <option value="NL" >National</option>
38              <option value="AL" >American</option>
39            </select>
40
41    </div>
42  <div id="map">  </div>
43
44</div>
45<script>
46var url = 'BaseBallFinal.json';  
47
48    var map = L.map('map').setView([39.0, -98.26], 4); 
49
50    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
51                attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
52    osm.addTo(map);
53
54    var myData =  L.layerGroup([]);
55
56    var bbTeam = L.geoJSON(null, {
57            //onEachFeature: forEachFeature, //not used
58            pointToLayer: function(feature, latlng) {
59
60                return L.circleMarker(latlng, {
61                radius:6,
62                opacity: .5,
63                color:'green',
64                fillColor:  'green',
65                fillOpacity: 0.8
66
67                }).bindTooltip(feature.properties.Name);
68            }
69      });
70
71    // Get GeoJSON data and create features.
72
73        $.getJSON(url, function(data) {
74            bbTeam.addData(data);
75        });
76
77    myData.addLayer(bbTeam);
78    myData.addTo(map); 
79
80    // Now working with filtered data...
81
82    function LeagueSelect() {
83        var choice = document.getElementById("league").value;
84        console.log(choice);
85
86        var theColor;
87
88        switch(choice) {
89            case 'NL':
90                theColor = 'blue'
91                break;
92            case 'AL':
93                theColor = 'red'
94                break;
95            default:
96                theColor = 'green'
97        }
98
99        myData.clearLayers();
100        map.removeLayer(myData);
101
102        bbTeam = L.geoJSON(null, {
103            //onEachFeature: forEachFeature, //not used
104            pointToLayer: function(feature, latlng) {
105
106                return L.circleMarker(latlng, {
107                radius:6,
108                opacity: .5,
109                color:theColor,
110                fillColor: theColor,
111                fillOpacity: 0.8
112
113                }).bindTooltip(feature.properties.Name);
114            },
115            filter: function(feature, layer) {   
116                 return (feature.properties.League == choice );
117            },
118
119      });
120
121    // Get GeoJSON data and create features.
122
123        $.getJSON(url, function(data) {
124            bbTeam.addData(data);
125        });
126
127    myData.addLayer(bbTeam);
128    myData.addTo(map); 
129    }
130
131 </script>
132</body>
133</html>
source