Cartographie interactive

Dès sa création en 2012, la société T&T a travaillé sur un projet de cartographie appelé FINOU Maps pour combler le vide existant dans ce domaine. En effet, nous avons cherché pour nos services de géolocalisation un service de cartographie respectant l’intégrité territoriale de notre pays, le Maroc. Le constat était que, il n’y avait aucune solution accessible aux très petites entreprises débutant dans la géolocalisation ou dans tout autre domaine. Les solutions existantes étaient trop coûteuses, et donc inaccessible pour des sociétés qui génèrent des bénéfices modestes.

La plupart des sociétés, trouvant que ces solutions sont inaccessibles, se rabattent sur Google Maps ou sur OpenStreetMaps même si ces cartes coupent le Maroc en deux. C’est pour ces raisons que nous avons décidé de mettre sur le marché, une solution complète, pas chère et respectant l’intégrité territoriale de notre pays. Nous avons jugé important aussi d’offrir notre solution GRATUITEMENT pour les clients qui n’ont pas besoin d’une grande bande passante.

FINOU Maps se présente sous forme de « tuiles » d’images .png de 256px/256px. chaque tuile représente une zone délimité en latitude, longitude et zoom (plan x,y,z).

L’intégration des cartes interactives FINOU Maps nécessite une clé d’accès, même pour un compte gratuit. Les clès peuvent être demandées dans le formulaire de commande ici.

Comment intégrer FINOU Maps dans mon site/application ?

Commander une clé d’accès

Pour avoir accès aux cartes interactives FINOU Maps, il faut tout d’abord commander une clé d’accès. Cette clé sera liée à votre serveur (adresse IP / domaine) et permettra uniquement à ce serveur de consommer le quota journalier associé à votre compte.
Vous pouvez commander une clé d’accès (API Key) en utilisant le formulaire de commande ici. Dans la suite de la documentation, nous faisons référence à cette clé par <api-key>.

Importer l’API de visualisation des tuiles

La plupart des API disponibles sur les différentes plateformes pour visualiser des cartes en « tuiles » peuvent être utilisées pour visualiser les cartes FINOU Maps. Nous allons prendre ici un exemple d’API très largement utilisée et qui permet de combiner les cartes FINOU Maps avec d’autres sources de cartographies. Elle s’appelle OpenLayers, et permet d’afficher en plus des cartes, d’autres types de données sous forme de calques (pushpin, géometries, lignes de route..etc).
Pour utiliser OpenLayers, il suffit d’ajouter la ligne suivante dans votre page Web:

<script src="http://openlayers.org/api/OpenLayers.js"></script>

Ensuite, il faudra choisir les controles à afficher sur votre carte et ajouter un calque FINOU Maps à OpenLayers :

<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
        var lat=32.32;
        var lon=-6.5;
        var zoom=6;
 
        var map; //complex object of type OpenLayers.Map
 
        //Initialise the 'map' object
        function init() {
 
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    //new OpenLayers.Control.PanZoomBar(),
                    //new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine({geodesic: true}),
                    //new OpenLayers.Control.Permalink('permalink'),                   
                    //new OpenLayers.Control.Attribution(), 
                    new OpenLayers.Control.MousePosition()
					],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0339,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
            // This is the layer that uses FINOU Maps tiles
            var newLayer = new OpenLayers.Layer.OSM("FINOU Maps", "http://<api-url>/tile.png?z=${z}&x=${x}&y=${y}&k=<api-key>&s=<map-style>", {numZoomLevels: 19});
            map.addLayer(newLayer);

            // You can add other map or aireal imagery tiles
 
            var switcherControl = new OpenLayers.Control.LayerSwitcher();
            map.addControl(switcherControl);
            switcherControl.maximizeControl();
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
        }
 
    
</script>

<api-url> fait référence à l’url de l’un de nos serveurs qui vous sera communiquée après validation de votre clé d’accès.
<api-key> fait référence à la clés d’accès à l’API.
<map-style> correspond au style de carte que vous avez choisi d’utiliser. Pour les comptes gratuits, un seul style par défaut est disponible.
La fonction init(); doit être appelé après le chargement de la page (onLoad par exemple) pour initialiser la Map. N’oubliez pas aussi de spécifier le conteneur qui va accueillir la carte. Un div fera l’affaire. Vous pouvez lui spécifier les dimensions et l’emplacement selon les besoins de votre application :

<!-- define a DIV into which the map will appear. In this example it takes up the whole window -->
<div style="width:100%; height:100%" id="map"></div>