Filtering/Google Maps/User Input

Built with blockbuilder.org

<!--

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, google maps and d3.

It is based on Mike Bostock's "Google Maps + D3" block:
https://bl.ocks.org/mbostock/899711

-->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//maps.google.com/maps/api/js?sensor=true"></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 {
  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 the Google Map
        var map = new google.maps.Map(d3.select("#map").node(), {
          zoom: 8,
          center: new google.maps.LatLng(37.76487, -122.41948),
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

// *** This function displays the dots on the map
        function showLocations(data){

var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
          overlay.onAdd = function() {
            var layer = d3.select(this.getPanes().overlayLayer).append("div")
                .attr("class", "stations");

// Draw each marker as a separate SVG element.
            // We could use a single SVG, but what size would it have?
            overlay.draw = function() {
              var projection = this.getProjection(),
                  padding = 10;
              
              // *** Remove all markers and recreate. This is probably a bit
              // *** of a lazy way of doing it...
              d3.selectAll('.marker').remove();

var marker = layer.selectAll("svg")
                  .data(d3.entries(data))
                  .each(transform) // update existing markers
                .enter().append("svg")
                  .each(transform)
                  .attr("class", "marker");

// *** Add a circle
              marker.append("circle")
                  .attr("r", 4.5)
                  .attr("cx", padding)
                  .attr("cy", padding);

// *** Add a label
              marker.append("text")
                  .attr("x", padding + 7)
                  .attr("y", padding)
                  .attr("dy", ".31em")
                  .text(function(d) { return d.key; });

function transform(d) {
                d = new google.maps.LatLng(d.value[1], d.value[0]);
                d = projection.fromLatLngToDivPixel(d);
                return d3.select(this)
                    .style("left", (d.x - padding) + "px")
                    .style("top", (d.y - padding) + "px");
              }
            };
          };

// Bind our overlay to the map…
          overlay.setMap(map);
        
        }
      
      	// *** 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://maps.google.com/maps/api/js?sensor=true

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

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