| license: mit |
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> |
| {"KMAE":[-120.12,36.98,"MADERA MUNICIPAL AIRPORT",[26,1,2,5,6,3,2,1,2,7,29,12,3]],"KSJC":[-121.92,37.37,"SAN JOSE INTERNATIONAL AIRPORT",[28,1,1,1,6,10,5,3,2,4,14,21,7]],"KMCE":[-120.50,37.28,"MERCED MUNICIPAL AIRPORT",[29,1,1,3,7,5,2,1,3,6,12,26,5]],"KMER":[-120.57,37.37,"Merced / Castle Air Force Base",[34,1,1,1,4,5,2,1,1,4,17,22,7]],"KAPC":[-122.28,38.20,"NAPA COUNTY AIRPORT",[23,2,1,6,3,3,8,18,11,13,4,3,5]],"KSUU":[-121.95,38.27,"Fairfield / Travis Air Force Base",[13,7,4,3,3,6,4,13,33,4,1,2,7]],"KSQL":[-122.25,37.52,"San Carlos Airport",[18,3,2,2,3,4,3,2,5,17,16,12,12]],"KSNS":[-121.60,36.67,"SALINAS MUNICIPAL AIRPORT",[21,1,1,6,12,3,1,2,9,21,17,5,1]],"KMOD":[-120.95,37.62,"MODESTO CITY CO SHAM FLD",[27,1,1,2,10,5,1,1,1,3,17,24,8]],"KOAK":[-122.23,37.72,"METRO OAKLAND INTERNATIONAL AIRPORT ",[16,3,3,2,4,6,3,4,9,23,20,6,2]],"KSCK":[-121.23,37.90,"STOCKTON METROPOLITAN AIRPORT ",[21,2,2,3,6,8,2,1,4,15,19,12,4]],"KCCR":[-122.05,38.00,"CONCORD BUCHANAN FIELD",[24,3,2,1,1,5,17,12,9,9,7,6,4]],"KMRY":[-121.85,36.58,"MONTEREY PENINSULA AIRPORT",[26,1,2,9,5,3,4,9,13,14,9,4,1]],"KPAO":[-122.12,37.47,"Palo Alto Airport",[31,3,1,1,2,5,1,1,1,4,10,25,14]],"KSAC":[-121.50,38.50,"SACRAMENTO EXECUTIVE AIRPORT ",[32,1,0,1,3,11,12,16,5,2,4,9,3]],"KHWD":[-122.12,37.67,"HAYWARD AIR TERMINAL",[20,2,7,2,2,6,3,3,6,23,18,6,2]],"KSTS":[-122.82,38.50,"SANTA ROSA SONOMA COUNTY",[46,1,0,1,5,13,10,4,3,3,4,6,3]],"KSMF":[-121.60,38.70,"SACRAMENTO INTERNATIONAL AIRPORT",[19,2,1,2,4,21,18,8,3,2,5,12,4]],"KNUQ":[-122.05,37.43,"MOFFETT FIELD",[35,3,1,1,4,7,2,1,2,5,6,17,15]],"KRHV":[-121.82,37.33,"San Jose / Reid / Hillv",[35,0,0,1,4,4,2,1,1,10,28,11,1]],"KWVI":[-121.78,36.93,"WATSONVILLE MUNICIPAL AIRPORT ",[44,1,2,3,4,5,7,9,8,4,6,5,2]],"KMHR":[-121.30,38.55,"Sacramento, Sacramento Mather Airport",[21,1,1,2,8,15,12,12,7,4,5,7,3]],"KVCB":[-121.95,38.38,"VACAVILLE NUT TREE AIRPORT",[36,2,1,1,2,6,10,18,10,2,2,5,6]],"KSFO":[-122.37,37.62,"SAN FRANCISCO INTERNATIONAL AIRPORT ",[13,3,3,2,3,4,4,4,7,31,20,2,3]],"KLVK":[-121.82,37.70,"LIVERMORE MUNICIPAL AIRPORT ",[32,2,7,3,1,1,2,7,9,17,16,2,1]]} |