OpenLayers.Strategy.Filter
HTML
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://openlayers.org/api/2.13/OpenLayers.js"></script>
<div id='map' style='width: 51%; height: 500px; float: bottom;'></div>
<div id='button1' style='display: inline-block; margin-top: 1%; width: 100px; height: 50px; background-color: #32CD32; border-radius: 15px;'>
<div id='txt1' style='text-align: center; font-family: tahoma; color: white; font-size: 25px; line-height: 49px;'>Station 1</div>
</div>
<div id='button2' style='display: inline-block; margin-top: 1%; width: 100px; height: 50px; background-color: #32CD32; border-radius: 15px;'>
<div id='txt2' style='text-align: center; font-family: tahoma; color: white; font-size: 25px; line-height: 49px;'>Station 2</div>
</div>
<div id='button3' style='display: inline-block; margin-top: 1%; width: 100px; height: 50px; background-color: #32CD32; border-radius: 15px;'>
<div id='txt3' style='text-align: center; font-family: tahoma; color: white; font-size: 25px; line-height: 49px;'>Station 3</div>
</div>
JavaScript
var lon = -107;
var lat = 47;
var zoom = 5;
var layer;
var map;
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: 'basic'
});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var filterStrategy = new OpenLayers.Strategy.Filter();
var station = new OpenLayers.Layer.Vector("station", {
strategies: [ filterStrategy ]
});
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point, {
'id_station': 1,
'name': 'station 1'
});
var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
var pointFeature2 = new OpenLayers.Feature.Vector(point2, {
'id_station': 2,
'name': 'station 2'
});
var point3 = new OpenLayers.Geometry.Point(-107.04, 49.68);
var pointFeature3 = new OpenLayers.Feature.Vector(point3, {
'id_station': 3,
'name': 'station 3'
});
console.log(pointFeature3)
station.addFeatures([pointFeature, pointFeature3, pointFeature2]);
map.addLayer(station);
function updateFilter(station_id) {
//Put the logical filter there
var filter = new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "id_station",
value: station_id
})]
});
filterStrategy.setFilter(filter);
}
$("#button1").click(function () {
updateFilter(1);
});
$("#button2").click(function () {
updateFilter(2);
});
$("#button3").click(function () {
updateFilter(3);
});