angular-pdok-geocoder/app/components/searchbar/searchbar.component.js

AngularJS Geocoding PDOK Geocoder

const Terraformer = require('terraformer');
const wkt = require('terraformer-wkt-parser');
require('../../../assets/css/global.css');
require('../../../assets/css/geocoder.css');
// let templateUrl = require('./test.html');
const templateUrl = require('./searchbar.view.html');

class controller {
	constructor ($scope, $element, $sce, GeocodeService) {
		$scope.query = '';

		// ===================== SEARCH FUNCTIONALITY =====================
		this.$onInit = function () {
			if (!this.resultLimit) {
				$scope.resultLimit = 10;
			} else {
				$scope.resultLimit = this.resultLimit;
			}
		};

		$scope.incrementLimit = function() {
			$scope.resultLimit += 5;
		}

		//Autocomplete watch functions
		$scope.$watch('query', function (query){
			if (query.length > 3 && !$scope.selectedLocation) {
				$scope.getResults(query);
			} else {
				$scope.results = [];
				$scope.showSuggestions = false;
				$scope.selectedLocation = false;
			}
		})

		$scope.getResults = function (query) {
			GeocodeService.suggest({
				q: query,
				fq: '*' // Return both kadastrale percelen & adressen/buurten/etc
			}).then(function(response){
				if (response.response.docs.length > 0) {
					$scope.results = response.response.docs;
					$scope.highlights = response.highlighting;
				} else {
					$scope.showSuggestions = true;
					$scope.suggestions = response.spellcheck.suggestions;
					$scope.collations = response.spellcheck.collations;
		    }
			});
		};

		$scope.getSuggestion = function(suggestion) {
			$scope.query = suggestion
		};

		$scope.lookupResult = function(id) {
			GeocodeService.lookup({
				id: id,
				fl: '*' // Return all possible fields
			}).then(function(result){
				$scope.query = result.weergavenaam;
				$scope.selectedLocation = true;
				$scope.results = [];
				$scope.$emit('newLocation', result);
			});
		};

		$scope.clearResults = function() {
			$scope.query = '';
			$scope.results = [];
		};

		$scope.getHTML = function(id) {
			return $sce.trustAsHtml($scope.highlights[id].suggest[0]);
		};



	}
}
controller.$inject = ['$scope', '$element', '$sce', 'GeocodeService']
export default {
	transclude: true,
	controller: controller,
	bindings: {
		resultLimit: '<'
	},
	templateUrl: templateUrl,
}