Filtering/Open Street Map/User Input

This block displays location data on a map, and then allows you to filter it based on user entry into the text box.

It used angular, Open Street Maps (OpenLayers library) and d3 (Doesnt currently use d3! It uses a static image instead... Work in progress!)

It is based on Mike Bostock's "Google Maps + D3" block.

Similar blocks:
Filtering/Google Maps/User Input

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <style>

html, body, #map, canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.stations, .stations svg {
  position: absolute;
}

.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

</style>
</head>
<body ng-app="app" ng-controller="ctrl">
  Type in name or part of a name to filter: (e.g. "KM")
  <input type="text" ng-model="filteringSelection" ng-change="updateLocations()">
  <div id="map"></div>
  <script>
    // *** This page uses angular as the way it interacts with the user input
		angular.module("app", [])
			.controller("ctrl", function($scope) {
      
      	var fullData = {};
      	
      	// *** Start by getting out the data from the json file and
      	// *** passing it to showlocations() which displays it all
      	// *** also store it in variable fullData for filtering later
      	d3.json("stations.json", function(error, data) {
          if (error) throw error;
          fullData = data;
          showLocations(data);
        });

// *** Create a vector layer which sits on top of the map
        var vectorSource = new ol.source.Vector(),
        		vectorLayer = new ol.layer.Vector({
          		source: vectorSource
        		});
      
        // *** Create the OSM Map
        var map = new ol.Map({
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            }),
            vectorLayer
          ],
          target: 'map',
          view: new ol.View({
            center: ol.proj.fromLonLat([-122.41948, 37.76487]),
            zoom: 8
          })
        });
      
      	
      
 
      function showLocations(data){
        // *** Clear the current data
        vectorSource.clear()
        
        for(var k in data){
          
          var svg = '<svg height="20" width="20"><circle cx="10" cy="10" r="10" stroke="none" fill="red" /></svg>';
          
          var mysvg = new Image();
          mysvg.src = 'data:image/svg+xml,' + escape(svg);
          
    			// *** Set up what each point will look like
          var iconStyle = new ol.style.Style({
            
              image: new ol.style.Icon({
                  opacity: 0.75, src:'https://upload.wikimedia.org/wikipedia/commons/0/0f/Black_dot.png'
              }),
              /*
            	image: new ol.style.Icon({
              	img: mysvg,
    						imgSize:[30,30]
            	}),
            */
              text: new ol.style.Text({
                  font: '12px Calibri,sans-serif',
                  fill: new ol.style.Fill({ color: '#000' }),
                  stroke: new ol.style.Stroke({
                      color: '#fff', width: 2
                  }),
                  text: k,
                  offsetY: 15
              })
          });
          
          
          
          // *** Create a point and transform it to the correct projection
          var point = new ol.geom.Point([data[k][0],data[k][1]]);
          point.transform('EPSG:4326','EPSG:900913');
          var feature = new ol.Feature(
          	new ol.geom.Point(point.A)
          );
          feature.setStyle(iconStyle);
          
          // *** Add point to layer on top of map
          vectorSource.addFeature(feature);
        }
        
      }
      
      	// *** This function is called using angular's ng-change every time
      	// *** there is a change to the data in the text box. It filters the
      	// *** data based on the input and creates a new object which is then
      	// *** passed to show locations to put on the screen
      	$scope.updateLocations = function(){
          
          
          var stationKeys = Object.keys(fullData);

var filteredStationsArr = stationKeys.filter(function(dataItem){
            var re = new RegExp($scope.filteringSelection, "i");
            var result = dataItem.match(re);

if(result != null){
              return true;
            } else {
              return false;
            }
            
          });
          
          var filteredStationsObj = {};
          
          for(var k in fullData){
            if(filteredStationsArr.includes(k)){
              filteredStationsObj[k] = fullData[k];
            }
          }
          
          showLocations(filteredStationsObj);
          
        }
      });
    
    
  
  </script>
</body>

https://openlayers.org/en/v4.4.2/build/ol.js

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js