DoverAudio
DoverAudio
Programming language:Javascript
2021-07-14 10:02:52
0
Q:

filter geojson programmatically

Martin BerAnek
Martin BerAnek
Code: Javascript
2021-06-30 18:31:47 
<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>
#wrapper {
  margin: 0 auto;
  width: 100%;
}

#panel{
 float: left;
  width: 100%;
  height:50px;
background-color: #175B81;
color:white;
}

#map {
  float: left;
  width: 80%;
  height:600px;
}

</style>
</head>
<body>

<div id="wrapper">
    <div id="panel"><span class="p2"></span>

            <select id="league" onchange="LeagueSelect()">
              <option value="NL" >National</option>
              <option value="AL" >American</option>
            </select>

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

</div>
<script>
var url = 'BaseBallFinal.json';  

    var map = L.map('map').setView([39.0, -98.26], 4); 

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
    osm.addTo(map);

    var myData =  L.layerGroup([]);

    var bbTeam = L.geoJSON(null, {
            //onEachFeature: forEachFeature, //not used
            pointToLayer: function(feature, latlng) {

                return L.circleMarker(latlng, {
                radius:6,
                opacity: .5,
                color:'green',
                fillColor:  'green',
                fillOpacity: 0.8

                }).bindTooltip(feature.properties.Name);
            }
      });

    // Get GeoJSON data and create features.

        $.getJSON(url, function(data) {
            bbTeam.addData(data);
        });

    myData.addLayer(bbTeam);
    myData.addTo(map); 

    // Now working with filtered data...

    function LeagueSelect() {
        var choice = document.getElementById("league").value;
        console.log(choice);

        var theColor;

        switch(choice) {
            case 'NL':
                theColor = 'blue'
                break;
            case 'AL':
                theColor = 'red'
                break;
            default:
                theColor = 'green'
        }

        myData.clearLayers();
        map.removeLayer(myData);

        bbTeam = L.geoJSON(null, {
            //onEachFeature: forEachFeature, //not used
            pointToLayer: function(feature, latlng) {

                return L.circleMarker(latlng, {
                radius:6,
                opacity: .5,
                color:theColor,
                fillColor: theColor,
                fillOpacity: 0.8

                }).bindTooltip(feature.properties.Name);
            },
            filter: function(feature, layer) {   
                 return (feature.properties.League == choice );
            },

      });

    // Get GeoJSON data and create features.

        $.getJSON(url, function(data) {
            bbTeam.addData(data);
        });

    myData.addLayer(bbTeam);
    myData.addTo(map); 
    }

 </script>
</body>
</html>
0

Tags

Related

New to Communities?

Join the community