Présentation de la nouvelle API Javascript 1.3 : interactivité et personnalisation améliorées

7 min - Author: Marine

Sommaire

Chez Woosmap, nous faisons évoluer nos produits en continu selon vos retours. Nous souhaitons que les développeurs et utilisateurs de Woosmap bénéficient des dernières améliorations. L'équipe développeurs Woosmap publie aujourd'hui une nouvelle version de l'API Javascript Woosmap (1.3).

Cette version apporte trois changements majeurs :

Les cartes construites avec l'API Javascript Woosmap peuvent désormais être enrichies avec de nouveaux paramètres issus de Google Maps — Version et Région — ainsi qu'un nouvel événement mouseover pour faciliter l'exploration de la carte (obtenez des informations sur les assets d'une simple survol).
Les développeurs peuvent facilement et rapidement compter et filtrer les assets sur une étendue de carte (« Voici une carte avec les assets que vous recherchez. Par ailleurs, X assets correspondent à votre recherche pour ce type, Y pour ce type et Z pour ce type. »)
Les attributs personnalisés peuvent désormais faire partie des requêtes de recherche pour répondre aux besoins spécifiques des clients (« Quel est l'asset le plus proche de cette marque (Type), avec ce service (Tag) et cette propriété (Attribut personnalisé) ? »).

Événements souris

Vous pouvez désormais enregistrer tous types d'événements souris en utilisant la classe BaseView ou une classe enfant étendue, woosmap.View et woosmap.TiledView. Le nom de l'événement doit être l'un des suivants : click, mousedown, mouseout, mouseover, mouseup.

Une action peut déclencher plusieurs événements. Par exemple, un clic déclenche d'abord mousedown lorsque le bouton est pressé, puis mouseup et click à son relâchement. Sur les appareils à écran tactile et touchpad, les événements souris se produisent également — ils sont émulés.

Testez vous-même les événements souris avec l'exemple suivant (basé sur jsFiddle)

Voici l'extrait javascript utilisé pour enregistrer l'événement mouseover et afficher les attributs des points de vente survolés via l'objet woosmap.TemplateRenderer.

var mapView = new woosmap.TiledView(map, {/*options*/});
//Use a template to render store properties as HTML
var customTemplate =  "<div class='store-photo'>< img src=''/></div>"
+ "<div class='store-title'>Introducing The New Javascript API 1.3: Improved Interactivity and Customization</div>"
+ "<div class='store-address'> </div>";
//Register the mouseover event
mapView.addListener('mouseover', function(store) {
// Render the hovered store info using woosmap.TemplateRenderer
var templateRenderer = new woosmap.TemplateRenderer(customTemplate)
var renderedTemplate = templateRenderer.render(store.properties);
woosmap.$('#mouse-hover-content').html(renderedTemplate);
});

Consultez la section EventListeners dans la documentation Woosmap pour plus de détails.

Combiner la recherche locale et le filtrage

L'équipe de développement Woosmap introduit une nouvelle façon de rechercher vos points de vente en combinant le filtrage par attributs avec des zones géographiques. Vous devrez implémenter woosmap.search.SearchParameters({}) et renseigner, pour le biais géographique, les propriétés de localisation (lat/lng et maxDistanceFromUser), puis construire la propriété Query pour la recherche par attributs. Tous les champs référencés dans la Data API sont également disponibles pour la recherche dans la Javascript API.

L'exemple suivant illustre comment filtrer par type et tag en tenant compte d'une saisie de géocodage utilisateur.

Voici la structure du dictionnaire SearchParameters.

var paramForSearch = {};
// set Geography Bias based on user geocoding input
paramForSearch.lat = latitude;
paramForSearch.lng = longitude;
paramForSearch.maxDistanceFromUser = parseInt(woosmap.$("#stores-distance").val()) * 1000;
// set the Query that looks like "type: 'myType' AND tag: 'myTag'"
paramForSearch.query = typeCondition + operator + tagCondition ;
// finally, build a SearchParameters object and pass it to the mapView
var searchParameters = new woosmap.search.SearchParameters(paramForSearch);
mapView.setSearchParameters(searchParameters);

Plutôt que de construire manuellement la chaîne Query, vous pouvez utiliser des classes utilitaires Woosmap comme dans l'exemple suivant.

Combiner la recherche par attributs avec les limites cartographiques

L'objet SearchParameters permet de rechercher,** filtrer et compter** vos points de vente dans les limites de la vue cartographique. Pour cela, définissez la propriété bounds avec un objet Google LatLngBounds.

Comme vous pouvez le voir, les points de vente retournés sont également comptés et la vue est recentrée sur eux. Pour cela, utilisez l'objet woosmap.DataSource.

var dataSource = new woosmap.DataSource();
dataSource.countStoresByParameters(searchParameters, function(totalStores) {
woosmap.$('#count-store-value').text(totalStores.count);
});
dataSource.storesBoundsByParameters(searchParameters, function(extent) {
if (extent.bounds.south) {
var bounds = new google.maps.LatLngBounds().union(extent.bounds);
mapView.fitBounds(bounds);
}
});

Tous les exemples de code présentés ici sont hébergés sur jsFiddle, un environnement en ligne permettant de tester votre code JavaScript, HTML et CSS directement dans le navigateur. N'hésitez pas à forker ces exemples et à les adapter avec votre propre clé publique.

Prise en charge des options Version et Region de Google Maps

Lorsque vous chargez la Javascript API Google Maps via Woosmap (par défaut, le chargement de la Javascript API Woosmap inclut celui de Google Maps), vous pouvez personnaliser plusieurs paramètres : Client ID, clé API Google Maps, ainsi que deux nouveaux paramètres ajoutés récemment, region et version.

Region

Pour adapter votre application à différentes tuiles cartographiques ou biaiser les résultats géographiquement, ajoutez le paramètre region. Ce paramètre accepte les identifiants de sous-tags de région Unicode, qui correspondent généralement aux domaines de premier niveau nationaux (ccTLD). Exemple : region: "GB". Consultez la documentation Google pour plus de détails.

Version

Vous pouvez indiquer la version de la Javascript API Google Maps à charger via le paramètre version. Les options disponibles sont :

La version expérimentale : version:"3.exp".
La version stable : version:"3".
Un numéro de version précis, par exemple version:"3.26" ou version:"3.27".

Si aucune version n'est spécifiée, la version expérimentale est chargée par défaut pour le plan standard (y compris les utilisateurs sans clé). Pour le plan premium sans version spécifiée, c'est la version stable qui s'applique. Consultez la documentation pour plus de détails.

Exemple

Voici un exemple complet d'objet MapsLoaderOptions chargeant la version 3.26 de l'API Google Maps pour la région française.

var mapsOptions = {
key: "xxx_Your_Google_Maps_Browser_Key_xxx",
clientId: "a_client_id",
librariesToLoad: ["places"],
channelId: "a_channel_id",
language: "fr",
region: "FR"
version: "3.26"
}
var loader = new woosmap.MapsLoader(mapsOptions);

Consultez les options supportées par Maps Loader dans la documentation Woosmap pour plus de détails.

Changelog

Retrouvez le changelog complet dans la documentation Woosmap pour les développeurs. Voici le résumé des modifications :

Ajout de l'option eventListeners dans le constructeur des renderers, permettant d'enregistrer des handlers pour des événements nommés sur les marqueurs.
Ajout du namespace woosmap.query pour gérer les nouvelles syntaxes de requêtes.
Ajout de la propriété query dans woosmap.search.SearchParameters pour passer des requêtes sous forme de chaîne brute.
Le paramètre markers dans le constructeur de woosmap.View peut désormais être un objet BaseViewOptions.
Prise en charge du paramètre region dans MapsLoaderOptions.
Prise en charge du paramètre version dans MapsLoaderOptions.
Ajout du support de bounds et count dans woosmap.DataSource.
Ajout des méthodes addListener et removeListener dans woosmap.BaseView, permettant d'enregistrer des événements indépendamment de la source (TiledImageLayer, DefaultRenderer, MarkersRenderer ou renderer personnalisé).

Liens utiles

Référence Woosmap Javascript API 1.3.
Changelog de la Javascript API Woosmap.
Pour toute question sur le contenu ou le processus décrit, n'hésitez pas à nous contacter via la page de contact.