I try to set markers on a static (non google) map based on the zip code.
This is my html code:
<div ng-controller="DealerMarkerListCtrl">
<a href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.left}}px;top:{{marker.top}}px" ng-repeat="marker in dealer|zipFilter:countryLookup"></a>
</div>
Now I try to display all markers that are filtered by the zipcode and the country, here's the drop down:
<input type="text" name="plz" placeholder="PLZ (z.B 80469)" class="plz" ng-model="zipCodeLookup">
<select name="drop" tabindex="1" class="drop" id="dropcountry" ng-model="countryLookup" ng-options='option.value as option.name for option in typeOptions'>
</select>
I got the following filter:
app.filter("zipFilter", function() { return function(markers, country, zip) {
var retMarkers = [];
for(var i = 0, len = markers.length; i < len; ++i) {
var singleMarker = markers[i];
if(singleMarker.land == country) {
retMarkers.push(singleMarker);
}
}
return retMarkers;
}});
The main problem is:
I got a circumcircle search where I get all zipcodes within 20 (km/miles) around the user-zipcode. This is working fine. I get a json like this, when I directly access the framework (not within the controller):
{"plz":["44787","44789","44791","44793","44795","44797","44799","44801","44803","44805","44807","44809","44866","44867","44869","44879","44892","44894","45525","45527","45529","45549"]}
for the zipcode "45525".
Now I need to display all markers (dealers) that are IN this array of zipcodes.
The zip parameter along with the country parameter within the filter needs to be send to the "area search" function " files/framework/umkreis/:zip/:country" to get the zip json of the area.
Afterwards I need to check if some of the markers are in this json and filter them.
I just don't know, how to built this stuff into my filter. Can you help me out on that? Thank you very much.
Other useful information:
Route & Service:
app.factory('dealerService', ['$resource', '$http', '$rootScope', function($resource, $http, $rootScope){
return {
//the resource provider interacting with the PHP backend
api:
$resource('files/framework/dealer/:id', {}, {
update: {method:'PUT'}
}),
}
}])
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/dealer/:id', {templateUrl: 'files/tpl/dealer-details.html', controller: 'DealerDetailsCtrl'}).
otherwise({redirectTo: '/dealer'});
}]);
The route to the "Slim" framework to get the area-zipcodes is :
files/framework/umkreis/45525/DE
or
files/framework/umkreis/:zip/:country
It looks like you're trying to update the markers on the map based on two fields in your form: "zipCodeLookup" and "countryLookup".
<input ... ng-model="zipCodeLookup" ... />
<select ... ng-model="countryLookup" ... ></select>
The markers are displayed in the following controller:
<div ng-controller="DealerMarkerListCtrl"></div>
And you are using this route to gather the JSON from your PHP server
files/framework/umkreis/:zip/:country
What you need to do is specify a function in the "DealerMarkerListCtrl" controller that will take a zip code and a country, and update the dealers using the new JSON from the server.
$scope.updateDealer = function(zip, country) {
$http.get('files/framework/umkreis/'+ zip + '/' + country).
success(function(data) {
$scope.dealer = data;
});
}
After you have this, you can add a ng-submit to the <form> that contains the inputs that will call this function,
<form ng-submit="updateDealer(zipCodeLookup, countryLookup)"> ... </form>
Make sure that the <form> is inside of the correct controller to see the newly created function. Whenever the user submits this form, it will call your PHP server, get the JSON, and update the dealer array.