I have a code that fetches json from a database and then outputs it on to a map.
The problem I have encountered is that when I console.log the data from the server it shows up all but if I console.log inside a function instead of in "root" it only shows the last element in the json. I'm using for (var i = 0; i < $data.length; i++)) to display each json element as a "unique".
The problem in the code is here:
$( "#filter-gratis" ).click(function() {
console.log($geoJson[0].properties.place);
all.className = '';
this.className = 'active';
// The setFilter function takes a GeoJSON feature object
// and returns true to show it or false to hide it.
console.log("works");
$myLayer.setFilter(function(f) {
return f.properties['male'] < '1';
});
return false;
});
If i do console.log($geoJson[0].properties.place); inside the click, it only shows the last element in the json. But if i do it outside, (over it) it works.
this is my code:
$.ajax({
url: 'http://hotell.difi.no/api/json/bergen/dokart?',
dataType: 'json',
async: false,
success: processJSON
});
function processJSON(data) {
$data = data.entries;
for (var i = 0; i < $data.length; i++) {
// Endre "null" til 0 og de som har pris med "kr"
if($data[i].pris == "NULL"){
$data[i].pris = "GRATIS";
}else if($data[i].pris >= 0){
$data[i].pris = $data[i].pris + "kr";
}
// Om den er stengt i helgen
if($data[i].tid_lordag == "NULL"){
$data[i].tid_lordag = "Stengt";
}
if($data[i].tid_sondag == "NULL"){
$data[i].tid_sondag = "Stengt";
}
// Om den er åpen
if($data[i].tid_hverdag == "ALL" && $data[i].tid_lordag == "ALL" && $data[i].tid_sondag == "ALL"){
$data[i].tid_hverdag = "Alltid åpen"
$data[i].tid_lordag = []
$data[i].tid_sondag = []
}
$myLayer = L.mapbox.featureLayer().addTo($map);
var id = $data[i].adresse;
$geoJson = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [$data[i].longitude, $data[i].latitude]
},
"properties": {
"title": ['<h1>'+$data[i].plassering+'</h1>'],
"place": ['<span>'+ $data[i].adresse +'</span>'],
"price": ['<div class="info">'+'<i class="icon ion-cash"></i>'+'<p id="price">'+$data[i].pris+'</p>'],
"week": ['<p>'+$data[i].tid_hverdag+'</p>'],
"sat": ['<p style="color: red;">'+$data[i].tid_lordag+'</p>'],
"sun": ['<p style="color: red;">'+$data[i].tid_sondag+'</p>'],
"female": ['<img src="img/wc_female.png"/>'],
"male": ['<img src="img/wc_male.png"/>'],
"disabled": ['<img src="img/wc_hc.png"/>'],
"nursery": ['<img src="img/wc_stell.png"/>'],
"image": ['<img src="img/350x150.gif"/>'],
"icon": {
"iconUrl": ["img/markers/offices/interior/toilets.png"],
"iconSize": [25, 30], // size of the icon
"iconAnchor": [15, 15], // point of the icon which will correspond to marker's location
"popupAnchor": [-2, -15], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
}];
// Hvem som kan bruke toalettet
if($data[i].rullestol == "NULL"){
$geoJson[0].properties.disabled = [];
}
if($data[i].stellerom == "NULL") {
$geoJson[0].properties.nursery = [];
}
if($data[i].pissoir_only == "1") {
$geoJson[0].properties.disabled = [];
$geoJson[0].properties.nursery = [];
$geoJson[0].properties.female = [];
}
// Om [tid.hverdag] har masse tekst (at alt står der) så gjemmer vi lørdag og søndag + tar mindre margin så alt ser bra ut!
if($data[i].tid_hverdag.length > 20){
$geoJson[0].properties.price = ['<div style="margin-right: 1%;" class="info">'+'<i class="icon ion-cash"></i>'+'<p id="price">'+$data[i].pris+'</p>']
$geoJson[0].properties.sat = []
$geoJson[0].properties.sun = []
}
// Set a custom icon on each marker based on feature properties.
$myLayer.on('layeradd', function(e) {
//console.log($geoJson[0].properties.place);
$( "#filter-gratis" ).click(function() {
console.log($geoJson[0].properties.place);
all.className = '';
this.className = 'active';
// The setFilter function takes a GeoJSON feature object
// and returns true to show it or false to hide it.
console.log("works");
$myLayer.setFilter(function(f) {
return f.properties['male'] < '1';
});
return false;
});
$( "#filter-all" ).click(function() {
gratis.className = '';
this.className = 'active';
$myLayer.setFilter(function(f) {
// Returning true for all markers shows everything.
return true;
});
return false;
});
var marker = e.layer,
feature = marker.feature;
var popupContent = feature.properties.title + feature.properties.place + feature.properties.image +'<div id="info">'+ feature.properties.price+'</div>'+'<div class="info">'+'<i class="icon ion-clock"></i>'+ feature.properties.week +'<br>'+feature.properties.sat+'<br>'+feature.properties.sun +'</div>'+'<div>'+feature.properties.female+feature.properties.male+feature.properties.disabled+feature.properties.nursery+'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 210
});
marker.setIcon(L.icon(feature.properties.icon));
});
// Add features to the map.
$myLayer.setGeoJSON($geoJson);
//console.log($geoJson[0].properties.place);
//console.log($myLayer._geojson[0].properties.nursery);
}
}
`
Any suggestions? Thanks!
