0

I am new to JavaScript.

I have a GeoJSON with about 400- 600 points drawn on the map using the circle icon. I want to change what markers are shown on the map when a different year is clicked on the page. If the year clicked on HTML page corresponds to feature.properties.YEAR for GeoJSON point, display all the markers for that year. If the year clicked is changed old points should be removed and the new points should be shown.

 function calcPropRadius(attributeValue)
    {
            var scaleFactor = 16;
            var area = attributeValue * scaleFactor;
            return Math.sqrt(area/Math.PI)*2;           
    }

    //filter data based on year
    function filterDatabasedOnYear(year, features) {
      var result = [];
      for (var i = 0; i < features.length; i++) {
        if (features[i].properties.YEAR == year) {
          result.push(features[i]);
        }
      }
      return result;
    }


    function loadData(year) {
      $.getJSON("mendBokonew.geojson",function(data){
        var jsonData = data;
        if (year) jsonData.features = filterDatabasedOnYear(year, jsonData.features);

        L.geoJSON(jsonData,{
          pointToLayer: function( feature, latlng) {

        var popupOptions={
          maxWidth : 200
        };
          var popupContent = "Fatalities: "+ feature.properties.FATALITIES;
          function getOptions(properties){
          if (properties.FATALITIES ===0 || properties.FATALITIES <=5){
            return {
              raduis :(calcPropRadius(5))
            };
          }
          else if (properties.FATALITIES > 5 &&  properties.FATALITIES < 50) {
            return {
              radius: (calcPropRadius(10)) };
          }
          else if (properties.FATALITIES >=50 &&  properties.FATALITIES <100) {
            return {radius: (calcPropRadius(20)) };
          }
          else {
            return {radius: (calcPropRadius(40)) };
          }
        }
        return L.circleMarker(latlng , getOptions(feature.properties)).bindPopup(popupContent, popupOptions);
      }}).addTo(map);
      });
    }

    loadData();

my GeoJSONlooks like this.

{"type":"FeatureCollection","features":[{"geometry":{"type":"Point","coordinates":[5.75,5.51667]},"type":"Feature","properties":{"COUNTRY":"Nigeria","NOTES":"MEND increases attacks againt the Royal Dutch Shell PLC","FATALITIES":0,"ACTOR2":"Civilians (Nigeria)","ACTOR1":"MEND: Movement for the Emancipation of the Niger Delta","EVENT_DATE":"01/01/2007","EVENT_TYPE":"Violence against civilians","SOURCE":"Wall Street Journal","LOCATION":"Warri","LONGITUDE":5.75,"ALLY_ACTOR_1":"","GWNO":475,"YEAR":2007,"LATITUDE":5.51667}},{"geometry":{"type":"Point","coordinates":[7.0134,4.77742]},"type":"Feature","properties":{"COUNTRY":"Nigeria","NOTES":"Filipino sailors kidnapped at restaurant.","FATALITIES":0,"ACTOR2":"Civilians (International)","ACTOR1":"MEND: Movement for the Emancipation of the Niger Delta","EVENT_DATE":"06/01/2007","EVENT_TYPE":"Violence against civilians","SOURCE":"Platts Commodity News","LOCATION":"Port Harcourt","LONGITUDE":7.0134,"GWNO":475,"YEAR":2007,"LATITUDE":4.77742}},{"geometry":{"type":"Point","coordinates":[7.0134,4.77742]},"type":"Feature","properties":{"COUNTRY":"Nigeria","NOTES":"Militants kidnap four Indian expatriates","FATALITIES":0,"ACTOR2":"Civilians (International)","ACTOR1":"MEND: Movement for the Emancipation of the Niger Delta","EVENT_DATE":"06/01/2007","GEO_PRECISION":1,"EVENT_TYPE":"Violence against civilians","SOURCE":"All Africa","LOCATION":"Port Harcourt","TIME_PRECISION":1,"INTERACTION":27,"LONGITUDE":7.0134,"GWNO":475,"YEAR":2007,"LATITUDE":4.77742}},{"geometry":{"type":"Point","coordinates":[5.44821,5.39905]},"type":"Feature","properties":{"COUNTRY":"Nigeria","NOTES":"MEND group takes 24 foreigners hostage","FATALITIES":0,"ACTOR2":"Civilians (International)","ACTOR1":"MEND: Movement for the Emancipation of the Niger Delta","EVENT_DATE":"21/01/2007","EVENT_TYPE":"Violence against civilians","SOURCE":"Xinhua News","LOCATION":"Chanomi Creek","LONGITUDE":5.44821,"GWNO":475,"YEAR":2007,"LATITUDE":5.39905}},{"geometry":{"type":"Point","coordinates":[13.27446,12.62293]},"type":"Feature","properties":{"COUNTRY":"Nigeria","NOTES":"Twenty bus passengers are shot killed by Boko Haram in Jigalta.","FATALITIES":20,"ACTOR2":"Civilians (Nigeria)","ACTOR1":"Boko Haram - Wilayat Gharb Ifriqiyyah","EVENT_DATE":"21/10/2015","GEO_PRECISION":1,"EVENT_TYPE":"Violence against civilians","SOURCE":"Agence France Presse","LOCATION":"Jigalta","LONGITUDE":13.27446,"GWNO":475,"YEAR":2015,"LATITUDE":12.62293}}]}

my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Armed Conflicts in West Africa</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <link rel="stylesheet" href="style.css" />

    <style type="text/css"> 
    html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map {
        margin: 0;
        padding: 0;
        height: 600px;
        width: 1230px;
        float: left;
        z-index: 1;
     }

     #sidebar {
       width: 300px;
       height: 600px;
       float: left;
     }    
</style>
  </head>
  <body>
  <!-- This div displays the container, tabs, and map; add title and caption if desired -->
  <div class="interactiveContainer">
    <div class="tabBar">
      <!-- Edit the labels for each tab, such as "1910" -->
      <div id="tab1" class="tabItem selected" onclick="loadData(2007)">2007</div>
      <div id="tab2" class="tabItem" onclick="loadData(2008)">2008</div>
      <div id="tab3" class="tabItem" onclick="loadData(2009)">2009</div>
      <div id="tab4" class="tabItem" onclick="loadData(2010)">2010</div>
      <div id="tab5" class="tabItem" onclick="loadData(2011)">2011</div>
      <div id="tab6" class="tabItem" onclick="loadData(2012)">2012</div>
      <div id="tab7" class="tabItem" onclick="loadData(2013)">2013</div>
      <div id="tab8" class="tabItem" onclick="loadData(2014)">2014</div>
      <div id="tab9" class="tabItem" onclick="loadData(2015)">2015</div>
      <div id="tab10" class="tabItem" onclick="loadData(2016)">2016</div>
    </div>
      <div id="map"></div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Browser Image

1

The easy way is to store the feature you create as a global variable, and then, when you load a year, you check if it exists and if it does, remove it.

Your line like L.geoJSON(jsonData,{ returns a feature, I think, so doing something like this would work:

// Put this outside your functions, at the top of the script
var currentFeatures = null;

And then change your layer creation to:

if (currentFeatures) {
    map.removeLayer(currentFeatures);
}
currentFeatures = L.geoJSON(jsonData,{
...

That should do it!

  • Thanks Alex. It worked like a charm. I have struggling with this for a couple of days. – umbilli1132 Apr 21 '17 at 0:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.