I had a hard time trying to create a good title for my issue since it is a little hard to explain. But I will do my best.
Basically what I’m trying to create a web map to show three distinct layers, each from a different time period. The user choose a year and then the layer is loaded. For this to happen Geoserver is serving three layers using WFS. Now what follows is weird.
- Sometimes when the web map is loaded, or refreshed, some layers are not encoded.
- Sometimes layers end-up in the wrong year option.
- But sometimes everything works, but requires that I refresh the page several times.
Basically my code is not behaving as it should all the time. At first I thought that this should be something related to Geoserver (I posted this question a while ago following this line of though). But now I suspect that the issue is in my Javascript code, I friend of mine mentioned something relate to syncronous and asycrounouns code but I have not idea how to start debugging it.
This is my code:
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="Plugins/Leaflet.label-master/dist/leaflet.label.css" />
<title>Mapping Past Denver</title>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="Plugins/Leaflet.label-master/dist/leaflet.label.js"></script>
</head>
<body>
<div id="map">
<script>
var map = L.map('map').setView([39.752171, -104.998817], 17);
//the base map
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY- SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
//create the datasets that will hold the layers
var dataset1 = new L.layerGroup();
var dataset2 = new L.layerGroup();
var dataset3 = new L.layerGroup();
//JSON request
var WFSLayer1 = null;
var ajax = $.ajax({
url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset3&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
dataType: 'jsonp',
jsonpCallback: 'getJson',
success: function (response) {
WFSLayer1 = L.geoJson(response, {
style: function (feature) {
return {
weight: 5,
color: '#6e7ce8',
weight: 2,
opacity: 1,
dashArray: '3',
fillOpacity: 0.7,
};
},
onEachFeature: function (feature, layer) {
popupOptions = {
maxWidth: 200
};
if (feature.properties.name !== null) {
layer.bindLabel(feature.properties.name, popupOptions, {
noHide: true
});
};
layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
layer.on({
click: zoomToFeature
})
}
}).addTo(dataset1);
}
});
var WFSLayer2 = null;
var ajax = $.ajax({
url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset1&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
dataType: 'jsonp',
jsonpCallback: 'getJson',
success: function (response) {
WFSLayer1 = L.geoJson(response, {
style: function (feature) {
return {
weight: 5,
color: '#e31424',
weight: 2,
opacity: 1,
dashArray: '3',
fillOpacity: 0.7,
};
},
onEachFeature: function (feature, layer) {
popupOptions = {
maxWidth: 200
};
if (feature.properties.name !== null) {
layer.bindLabel(feature.properties.name, popupOptions, {
noHide: true
});
};
layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
layer.on({
click: zoomToFeature
})
}
}).addTo(dataset2);
}
});
var WFSLayer3 = null;
var ajax = $.ajax({
url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset2&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
dataType: 'jsonp',
jsonpCallback: 'getJson',
success: function (response) {
WFSLayer3 = L.geoJson(response, {
style: function (feature) {
return {
weight: 5,
color: '#14e324',
weight: 2,
opacity: 1,
dashArray: '3',
fillOpacity: 0.7,
};
},
onEachFeature: function (feature, layer) {
popupOptions = {
maxWidth: 200
};
if (feature.properties.name !== null) {
layer.bindLabel(feature.properties.name, popupOptions, {
noHide: true
});
};
layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
layer.on({
click: zoomToFeature
})
}
}).addTo(dataset3);
}
});
//zoom to feature
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
//group the datasets
var overlayData = {
"1887": dataset1,
"1925": dataset2,
"1961": dataset3
};
//create the layer control
L.control.layers(overlayData, null, {
collapsed: false
}).addTo(map);
</script>
</div>
Any type of help or idea is very appreciated, since now I have no idea where to start. Also, I’m very open to rebuild the code following better practices =).
Best,
