Buon giorno a tutti, sono un utente nuovo e a dir poco inesperto di javascript.
Vi presento il problema se avete modo di aiutarmi:
Importo in cartodb una mappa con un database da qgis e da cartodb preparo tutti i filtri necessari, da qui esporto un geojason da inserire in una pagina html. In questa pagina html creo un form di ricerca dei dati del database importato in cartodb e vorrei che una volta trovata la sezione ricercata, la mappa effettui una transizione con zoom sull'elemento trovato.
Il codice che sto usando è il seguente ma non riesco a far funzionare il fit.Bound e zoomToFuture :
<script>
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'user' });
var $options = $('#b');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var c = document.getElementById('c').value;
var f = document.getElementById('f').value;
var m = document.getElementById('m').value;
// create query based on data from the layer
// var query = "select * from layer";
if(c == "" && f == "" && m == ""){
alert("Compila tutti i campi");
}
else {
query = "SELECT * FROM prova where codcomune = '" + c + "' and foglio = " + f + " and numero = '" + m + "'";
console.log(query);
sql.getBounds(query).done(function(bounds) {
latlon = bounds[0];
console.log(latlon);
});
}
// change the query in the layer to update the map
layer.setSQL(query);
});
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
click: zoomToFeature
});
}
function main() {
cartodb.createVis('map', 'https://file.json', {
tiles_loader: true,
center_lat: 39.87,
center_lon: 8.70,
zoom: 13
})
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
var subLayer = layers[1].getSubLayer(0);
createSelector(subLayer);
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
Se riuscite a spiegarmi come implementarli correttamente ve ne sono grato.