Skip to content

Instantly share code, notes, and snippets.

@carpiediem

carpiediem/markerFilter.html

Created April 7, 2015 09:30
Show Gist options
  • Save carpiediem/88ee3e6521936e7a535a to your computer and use it in GitHub Desktop.
Save carpiediem/88ee3e6521936e7a535a to your computer and use it in GitHub Desktop.
Download ZIP
This shows the difficulty of filtering markers displayed with the angular-openlayers-directive by tombatossals.
Raw
markerFilter.html
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.min.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.css" />
<script>
var app = angular.module("demoapp", ["openlayers-directive"]);
var markers = [
{
name: 'London',
lat: 51.505,
lon: -0.09
},
{
name: 'Bath',
lat: 51.375,
lon: -2.35
},
{
name: 'Canterbury',
lat: 51.267,
lon: 1.083
}
];
app.controller("DemoController", [ '$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 51.505,
lon: -0.09,
zoom: 7
},
markers: markers
});
} ]);
</script>
</head>
<body ng-controller="DemoController">
<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%">
<ol-marker ng-repeat="marker in markers | filter:search" lat="marker.lat" lon="marker.lon"></ol-marker>
</openlayers>
<h1>Markers filter example</h1>
<p>Typing in a city name below will filter the li elements, but not the map markers. Strangely, typing a string that does not match any cities will still make allth e markers disappear at once. Is there a better way to do this?</p>
<input type="text" ng-model="search.name" placeholder="Filter by city name" />
<ul>
<li ng-repeat="marker in markers | filter:search" ng-bind="marker.name"></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment