Filtering objects by various attributes
You can use the GeoQueryResult class to create a set of placemarks on the map from JSON descriptions of their geometries.
The search method allows you to filter the objects in the selection according to various criteria. For example, to select objects with a specific value in data fields or select objects based on the geometry type.
This example shows how to select geo objects by multiple characteristics, and make a combination or a sample of the selection.
index.html
geoobjects_menu.js
<!DOCTYPE html>
<html>
<head>
<title>Examples. Filtering objects by attributes.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--
Set your own API-key. Testing key is not valid for other web-sites and services.
Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
-->
<script src="https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=<your API-key>" type="text/javascript"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.js"></script>
<script src="geoobjects_menu.js" type="text/javascript"></script>
<style>
body, html {
font-family: Arial;
font-size: 11pt;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 60%;
}
</style>
</head>
<body>
<div id="map"></div>
<div style="padding: 5px;">
<div>
Filter by color <br>
<input type="checkbox" id="red" checked="true">Red</input><br>
<input type="checkbox" id="green" checked="true">Green</input><br>
<input type="checkbox" id="yellow" checked="true">Yellow</input>
</div>
<div>
Filter by geometries <br>
<input type="checkbox" id="point" checked="true">Points</input><br>
<input type="checkbox" id="polygon" checked="true">Polygons</input><br>
<input type="checkbox" id="circle" checked="true">Circles</input>
</div>
</div>
</body>
</html>
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [55.30954, 37.721587],
zoom: 8,
},
{
searchControlProvider: "yandex#search",
}
);
/**
* A function, which according to the state of the checkboxes in the menu
* shows or hides the geo objects from the selection.
*/
function checkState() {
var shownObjects,
byColor = new ymaps.GeoQueryResult(),
byShape = new ymaps.GeoQueryResult();
// Selecting objects by color.
if ($("#red").prop("checked")) {
/**
* We will search using two parameters:
* - for point objects using the "preset" field;
* - for contour objects using the fill color.
*/
byColor = myObjects
.search('options.fillColor = "#ff1000"')
.add(
myObjects.search('options.preset = "islands#redIcon"')
);
}
if ($("#green").prop("checked")) {
byColor = myObjects
.search('options.fillColor = "#00ff00"')
.add(
myObjects.search('options.preset = "islands#greenIcon"')
)
/**
* After we have found all the green objects, we will add them
* to the objects found in the previous iteration.
*/
.add(byColor);
}
if ($("#yellow").prop("checked")) {
byColor = myObjects
.search('options.fillColor = "#ffcc00"')
.add(
myObjects.search(
'options.preset = "islands#yellowIcon"'
)
)
.add(byColor);
}
// Selecting objects based on shape.
if ($("#point").prop("checked")) {
byShape = myObjects.search('geometry.type = "Point"');
}
if ($("#polygon").prop("checked")) {
byShape = myObjects
.search('geometry.type = "Polygon"')
.add(byShape);
}
if ($("#circle").prop("checked")) {
byShape = myObjects
.search('geometry.type = "Circle"')
.add(byShape);
}
/**
* We selected objects by color and shape. Now we'll show objects on the map
* that combine the desired characteristics.
*/
shownObjects = byColor.intersect(byShape).addToMap(myMap);
// Objects that were not included in the selection must be removed from the map.
myObjects.remove(shownObjects).removeFromMap(myMap);
}
$("#red").click(checkState);
$("#green").click(checkState);
$("#yellow").click(checkState);
$("#point").click(checkState);
$("#polygon").click(checkState);
$("#circle").click(checkState);
// Creating objects from their JSON descriptions and adding them to the map.
window.myObjects = ymaps
.geoQuery({
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [55.34954, 37.721587],
},
options: {
preset: "islands#yellowIcon",
},
},
{
type: "Feature",
geometry: {
type: "Circle",
coordinates: [55.24954, 37.5],
radius: 20000,
},
options: {
fillColor: "#ffcc00",
},
},
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[55.33954, 37.7],
[55.43954, 37.7],
[55.33954, 38.7],
[55.33954, 37.7],
],
],
},
options: {
fillColor: "#ffcc00",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [55.24954, 37.4],
},
options: {
preset: "islands#greenIcon",
},
},
{
type: "Feature",
geometry: {
type: "Circle",
coordinates: [55.14954, 37.61587],
radius: 10000,
},
options: {
fillColor: "#00ff00",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [55.14954, 37.61587],
radius: 10000,
},
options: {
preset: "islands#redIcon",
},
},
],
})
.addToMap(myMap);
}