Suite

FitBounds sur les points après la sélection d'entités

FitBounds sur les points après la sélection d'entités


J'essaie de suivre certains des exemples que j'ai trouvés ici et dans Google Groupes à propos des fitBounds pour les points. La plupart des exemples concernent les polygones et ne semblent pas fonctionner pour les points. Je pense avoir essayé à peu près toutes les combinaisons de syntaxes qui ressemblent généralement à ce qui suit :

var sql = cartodb.SQL({ utilisateur : 'nom d'utilisateur' }); //fonctionnalité des boutons de sélection : $('.button').click(function(e, latlon, lat, lng, pxPos, data, layer) { $('.button').removeClass('selected'); $( this).addClass('selected'); //Je pense que je dois inclure une instruction SQL avec lat et lon pour obtenir des limites, mais je peux me tromper : //sql.execute("SELECT cartodb_id, name, ST_X(the_geom ) lon, ST_Y(the_geom) lat FROM table_name WHERE name = " + $(this).attr('selected'), function(ret) { var swLat = map.getBounds().getSouthWest().lat, swLon = map .getBounds().getSouthWest().lng, neLat = map.getBounds().getNorthEast().lat, neLon = map.getBounds().getNorthEast().lng, //fitBounds fonctionne avec des entrées manuelles (ci-dessous) southWest = L.latLng(40.56, -112.05), northEast = L.latLng(40.77, -111.8), //… **mais pas avec cette partie** //southWest = L.latLng(swLat, swLon), // northEast = L.latLng(neLat, neLon), bounds = L.latLngBounds(sudWest, northEast), map.fitBounds(bounds); LayerActions[$(this).attr('id')] (); });

Je serais reconnaissant de tout commentaire à ce sujet, ou d'exemples de fitBounds pour les points et non les polygones. Voici le jsbin, annoté au mieux de mes capacités : http://jsbin.com/hunovumu/38/edit


C'est moins un problème de Leaflet qu'un problème de CartoDB. Dans votre code, vous ajoutez une couche CartoDB à votre carte Leaflet, puis interagissez avec CartoDB pour filtrer les caractéristiques affichées par la couche.

La réponse courte est : vous devez demander les limites à CartoDB. Leaflet ne sait pas grand-chose sur la couche CartoDB, en particulier en ce qui concerne les fonctionnalités affichées par CartoDB.

La réponse plus longue est :

  1. Obtenez les limites de CartoDB. Il y a plusieurs façons de le faire, mais la plus simple est probablement d'utiliser sql.getBounds(). Cela ressemblera à quelque chose comme :

    var sql = new cartodb.SQL({ utilisateur : 'tbushman' }); sql.getBounds(YOUR_QUERY).done(function(bounds) { // TODO Définir les limites de Leaflet ici });

    VOTRE REQUÊTEest la requête SQL que vous avez utilisée pour filtrer votre couche. Par exemple, en regardant dans votre code, l'un d'eux est :

    SELECT * FROM full_uu_tb WHERE type = 'Santé et capacité'
  2. Définissez maintenant les limites de votre carte Leaflet (sur laFAIREligne ci-dessus). Cela devrait être aussi simple que ce que vous avez déjà dans le code ci-dessus :

    map.fitBounds(bornes);
  3. Débarrassez-vous de la plupart du code de gestion des limites que vous avez ci-dessus, tout ce qui se trouve entre (mais non compris)$(this).addClass('selected');etLayerActions[$(this).attr('id')] ();

Finalement, leActions de coucheobject dans votre code complet est un bon moyen de séparer les différentes requêtes SQL du reste du code. Le seul problème est que c'est un peu redondant et que vous devrez obtenir la requête SQL réelle afin d'obtenir les limites. je recommanderais de stocker seulement les requêtes SQL de cette façon et déplacer le reste dans$('.button').click(… ).