Tutorial

Filters

Now you have you first maptimize map, let’s add some fitlers. Filters are not available on Free plan.

You can download the full example at the end of this tutorial. We use jQuery in this example to simplify event listening.
Of course, you can use any Javascript frameworks, maptimize is framework agnostic.

1 – Add meta-data to your markers.

You use your own data to filter the map. So, the first is add those meta-data in your import file. In this demo we are going to add a category filter.
JSON file will be like this:

{ "points": [ { "id": 1, "coords": "12,34", "cat": "web" },
              { "id": 3, "coords": "-12,12", "cat": "mobile" },
              ....
              { "id": 4, "coords": "-12.50,33.123", "cat": "web"} ] }

Or CSV like this

"id", "lat", "lng", "cat"
"1", "12", "34", "web"
"2", "-12", "12", "mobile"
...
"4" , "-12.50", "33.123", "web"

2 – Add HTML control

Now you need to add some check boxes to activate/unactivate categories.
This step isn’t related to maptimize, it’s just standard HTML code.

<ul id="categories">
  <li>
    <input type="checkbox" value="web" checked="checked">
    Web
  </li>
  <li>
    <input type="checkbox" value="mobile" checked="checked">
    Mobile
  </li>
</ul>

3 – Connect UI to build maptimize condition

The last step is to listen any changes on checkboxes, to build a maptimize condition and to refresh your map

// Listen click on categories
$("#categories").delegate("input", "click", filterMap);

Then create the fitlerMap method.

function filterMap() {
  var condition = new com.maptimize.Condition(), categories = [];
  // Collect selected categories
  $("#categories input").each(function() {
    if (this.checked) {
      categories.push(this.value);
    }
  });
  // Create condition
  if (categories.length > 0) {
    condition.appendAnd(["cat IN ?", categories]);
  }
  // Set condition
  mapController.setCondition(condition);
  // Refresh map
  mapController.refresh();
}

Read our Javascript API documentation to know more about all fitlers you can apply on the map.
Current available operators are:

Code

You can view/download the full example here.