Групповые точки карты по их категории в JavaScript

Question

Я помещаю точки на карте, анализируя динамически созданный файл GeoJSON. Я бы хотел сгруппировать эти точки с помощью атрибута категории (каждая точка имеет свойство категории). Я нашел, как добавлять точки к объектам группы в моей картографической библиотеке (Лист: http://leaflet.cloudmade.com/examples/layers-control.html), но предполагает, что я знаю, какими будут категории (например, var citiesLayer = new L.LayerGroup();).

Что я хотел бы сделать, это разобрать каждую точку (уже выполняющую эту часть) и выполнить проверку, чтобы увидеть, существует ли группа для категории X, и либо добавить точку к этой группе, либо создать группу и добавьте точку. Это позволило бы мне сразу включить/выключить все точки определенной категории. Любые идеи относительно того, как я это сделаю? Я очень мало знаю об JavaScript (я парень Python).

Вот мой JS:

// http://geoserving.net/odk_geoserver/ 

function init(){ 
    $.getJSON(geoJSONURL, makeMap); 
} 

function makeMap(data) { 
    // Assign GeoJSON to variable 
    var eventPoints = data; 
    // Create new map instance 
    var map = new L.Map('map'); 
    var eventsGeoJSON = new L.GeoJSON(null, { 
      pointToLayer: function (latlng){ 
       return new L.CircleMarker(latlng, { 
        radius: 5, 
        fillColor: "#A3C990", 
        color: "#000", 
        weight: 1, 
        opacity: 1, 
        fillOpacity: 0.4 
       }); 
      } 
     }); 

    // Event Listener for Addition of Data to Boundary Layer 
    eventsGeoJSON.on('featureparse', function (e) { 
     var popupText = 
     '<div id="feature">'; 

     for(var i = 0, l = e.properties.event_set__all.length; i < l; i++) { 
      popupText += '<div class="event">' + 
      '<p>' + 
       '<h3 class="featureInfo">' + 
         e.properties.event_set__all[i].title + 
       '</h3>' + 
      '</p>'; 
      if (e.properties.event_set__all[i].category__category) { 
       popupText += 
       '<p>' + 
        '<span class="featureLabel">Category: </span>' + 
        '<span class="featureInfo">' + 
         e.properties.event_set__all[i].category__category + 
        '</span>' + 
       '</p>'; 
      } 
      popupText += '</div>'; 
     } 

     popupText += 
      '<div class="venue">' + 
        '<span class="featureLabel">Venue: </span>' + 
        '<span class="featureInfo">' + 
         '<a href="../' + e.properties.neighborhood__slug + '/' + e.properties.slug + '">' + 
          e.properties.venue + 
         '</a>' + 
        '</span>' + 
      '</div>'; 

     e.layer.bindPopup(popupText); 
    }); // End feature parse 

    // Populate Points Layer with Data 
    eventsGeoJSON.addGeoJSON(eventPoints); 

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/<My Key>/256/{z}/{x}/{y}.png', 
     cloudmadeAttrib = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade', 
     cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib}); 
    var seattle = new L.LatLng(47.64, -122.34); // geographical point (longitude and latitude) 
    map.setView(seattle, 12).addLayer(cloudmade); 
    map.addLayer(eventsGeoJSON); 
} 

Точка пример GeoJSON:

{ 
    "crs": null, 
    "type": "FeatureCollection", 
    "features": [ 
     { 
      "geometry": { 
       "type": "Point", 
       "coordinates": [ 
        -122.382626, 
        47.6657641 
       ] 
      }, 
      "type": "Feature", 
      "id": 18, 
      "properties": { 
       "event_set__all": [ 
        { 
         "category__category": "Live", 
         "title": "the Tallboys", 
         "cost": "$5", 
         "description": "", 
         "slug": "the-tallboys" 
        } 
       ], 
       "neighborhood__slug": "ballard", 
       "venue": "Tractor Tavern", 
       "neighborhood__neighborhood": "Ballard", 
       "address": "5213 Ballard Ave NW, Seattle, WA 98107, USA", 
       "slug": "tractor-tavern" 
      } 
     } 
    ] 
} 

атрибут будет использоваться для группы каждая точка e.properties.event_set__all[0].category__category.

Answer 1

Вы можете сгруппировать все точки с Alasql библиотекой:

var res = alasql('SELECT features->0->properties->event_set__all->0->category__category \ 
         AS category, ARRAY(_) AS points FROM ? GROUP BY category',[data]); 

Он группирует все точки с выбранной категорией из этого длинного имени точки, как:

[ 
    {category:"Live1", points: [{point},{point},...] }, 
    {category:"Live2", points: [{point},{point},...] } 
] 

Попробуйте этот пример at jsFiddle.