Dans cet article nous allons découvrir comment construire une zone de saisie semi-automatique avec les services REST Bing Maps en utilisant uniquement HTML, JSON et jQuery.

Les services REST Bing Maps nous permettent d'effectuer des tâches telles que la création d'une carte avec des punaises, le géocodage d'une adresse, la récupération de métadonnées des images, ou la création d'un itinéraire.

Ici, nous allons apprendre à utiliser l'API Locations des services REST Bing Maps pour construire une zone de saisie semi-automatique avec jQuery. Pour utiliser les services REST Bing Maps, vous aurez besoin d'une clé Bing Maps. Il suffit d'aller sur le Bing Maps Account Center pour en obtenir une.

 

Création

Tout d'abord, nous allons créer une simple page HTML en ajoutant les références à jQuery et jQuery UI, une zone de saisie pour la localisation recherchée et une div dans laquelle les résultats seront affichés.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #searchBox
        {
            width: 25em;
        }
    </style>
</head>
<body>
    <div>
        <div class="ui-widget">
            <label for="searchBox">
                Search:
            </label>
            <input id="searchBox" />
        </div>
        <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
        </div>
    </div>
</body>
</html>

 

Pour appeler l'API Locations, nous utilisons l'adresse suivante : http://dev.virtualearth.net/REST/v1/Locations

Les paramètres qui suivent sont nécessaires pour obtenir une réponse du service :

Les services REST Bing Maps ont également d'autres paramètres optionnels tels que :

 

Pour créer une zone de saisie semi-automatique, nous utilisons jQuery UI. La source des suggestions fournies à l'utilisateur viendra des services REST Bing Maps.

Le fonctionnement est le suivant : lorsque l'utilisateur tape une localisation, une requête Ajax est déclenchée pour appeler l'API Locations des services REST Bing Maps et une réponse JSON est reçue. La réponse est traitée pour être affichée sous forme de  suggestions à l'utilisateur. Voici le code JavaScript pour obtenir ce comportement :

<script type="text/javascript">
    $(document).ready(function () {
        $("#searchBox").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "http://dev.virtualearth.net/REST/v1/Locations",
                    dataType: "jsonp",
                    data: {
                        key: "<yourbingmapskey>",
                        q: request.term
                    },
                    jsonp: "jsonp",
                    success: function (data) {
                        var result = data.resourceSets[0];
                        if (result) {
                            if (result.estimatedTotal > 0) {
                                response($.map(result.resources, function (item) {
                                    return {
                                        data: item,
                                        label: item.name + ' (' + item.address.countryRegion + ')',
                                        value: item.name
                                    }
                                }));
                            }
                        }
                    }
                });
            },
            minLength: 1
        });
    });
</script>

 

Il faut prêter attention à plusieurs choses ici :

 

Par exemple, lorsqu'un utilisateur cherche "San Francisco", l'URL de requête Ajax suivante est construite et appelée :

http://dev.virtualearth.net/REST/v1/Locations?jsonp=<callbackname>&key=<yourbingmapskey>&q=San+francisco&_=1298745707161

 

La source finale de la page est la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ui-autocomplete-loading
        {
            background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
        }
        #searchBox
        {
            width: 25em;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#searchBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "http://dev.virtualearth.net/REST/v1/Locations",
                        dataType: "jsonp",
                        data: {
                            key: "<yourbingmapskey>",
                            q: request.term
                        },
                        jsonp: "jsonp",
                        success: function (data) {
                            var result = data.resourceSets[0];
                            if (result) {
                                if (result.estimatedTotal > 0) {
                                    response($.map(result.resources, function (item) {
                                        return {
                                            data: item,
                                            label: item.name + ' (' + item.address.countryRegion + ')',
                                            value: item.name
                                        }
                                    }));
                                }
                            }
                        }
                    });
                },
                minLength: 1,
                change: function (event, ui) {
                    if (!ui.item)
                        $("#searchBox").val('');
                },
                select: function (event, ui) {
                    displaySelectedItem(ui.item.data);
                }
            });
        });

        function displaySelectedItem(item) {
            $("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' + item.point.coordinates[1] + ')');
        }
    </script>
</head>
<body>
    <div>
        <div class="ui-widget">
            <label for="searchBox">
                Search:
            </label>
            <input id="searchBox" />
        </div>
        <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
        </div>
    </div>
</body>
</html>

 

Vidéo de démonstration (En anglais)

 

Liens

Plusieurs liens qui vous aideront à comprendre et aller plus loin sur le sujet :

 

 

En résumé

Nous avons vu comment utiliser les services REST Bing Maps avec jQuery, jQuery UI pour construire une zone de saisie semi-automatique afin de trouver une localisation dynamiquement. Comme nous utilisons HTML, JSON et jQuery, cela peut être intégré avec la technologie que vous préférez.

Si vous souhaitez aller plus loin sur le sujet, regardez les liens ci-dessus pour comprendre ce que vous pouvez faire avec les services REST Bing Maps. Par exemple, nous pourrions afficher la localisation sélectionnée sur une carte avec le contrôle Bing Maps AJAX ou le contrôle Bing Maps Silverlight. Ce sera certainement le sujet d'un de mes prochains articles, en complément de celui-ci.

Vous pouvez télécharger les sources complète ici :

Download full sources

 

N'hésitez pas à commenter ou à me contacter si vous avez des questions à propos de cet article.


Comments

Add a comment

(Will not be published)

Back to articles