CODEWITHSUNDEEP
javascriptjsonleaflet
R. Lorenzini
R. Lorenzini

Reputation: 33

Filter Json and Add Custom Markers

I'm trying to import a json file from my database and add custom layers with different marker styles. When I import the json and do json.map, it works as one layer with all the lat/lng data. When I do json.filter, if category == "what i want", add marker... It pulls the data, puts it in a variable, but won't use it as a layer.

NOTE: I'm using Javascript and Sequelize. My leaflet map is importing from mapbox. The program is fully functional as is, but I'm trying to add extra features for sorting data and viewing pleasure.

  fetch('https://agile-mesa-12521.herokuapp.com/api')
    .then(function(response) {
      return response.json();
    }).then(function(complaintJson){
      let lMarkerArray = complaintJson.filter((complaint) => {
        if(complaint.category == "pothole"){
        return L.marker([complaint.lat, complaint.long])
      }
    })
    console.log(lMarkerArray)
      let overlayMaps = { "Complaints": L.layerGroup(lMarkerArray)}
      let streetView = {"Street View": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          minZoom: 10,
          id: 'mapbox.streets',
          accessToken: 'pk.eyJ1IjoicmxvcmVuemluaSIsImEiOiJjanR5Z3R2bjQxNjlxM3lvNTV4ZnMxOXAyIn0.xxNzHRkLduHYsYIMoCvGCA'
      }).addTo(mymap)}
      L.control.layers(streetView, overlayMaps).addTo(mymap)
    })
})

Take out the if(complaint...) and change complaintJson.filter to .map and it works with all the incoming data.

Any suggestions on how to create multiple variables, assign them to different categories from my complaintJson file, and then give them custom markers?

  fetch('https://agile-mesa-12521.herokuapp.com/api')
    .then(function(response) {
      return response.json();
    }).then(function(complaintJson){
      let lMarkerArray = complaintJson
  .filter(complaint => complaint.category == "pothole")
  .map(complaint => L.marker([complaint.lat, complaint.long]));
        // return L.marker([complaint.lat, complaint.long])
    // })
    console.log(lMarkerArray)
      let overlayMaps = { "Complaints": L.layerGroup(lMarkerArray)}
      let streetView = {"Street View": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          minZoom: 10,
          id: 'mapbox.streets',
          accessToken: 'pk.eyJ1IjoicmxvcmVuemluaSIsImEiOiJjanR5Z3R2bjQxNjlxM3lvNTV4ZnMxOXAyIn0.xxNzHRkLduHYsYIMoCvGCA'
      }).addTo(mymap)}
      L.control.layers(streetView, overlayMaps).addTo(mymap)
    })
})

Updated code with suggestions to filter then map.

Oxnoob resolved my issue. Thanks!

Upvotes: 0

Views: 299

Answers (1)

0xnoob
0xnoob

Reputation: 1057

Because filter returns a subset of the original array, (with only the elements to which the function returns a truthy value), you can't change the element itself like you did with map.

I think what you want to do is:

let lMarkerArray = complaintJson
  .filter(complaint => complaint.category == "pothole")
  .map(complaint => L.marker([complaint.lat, complaint.long]));

Upvotes: 0

Related Questions