Dans certains cas, la page ou le site Web doit étendre cette fonctionnalité et Google Maps ne le fournit pas. À ces occasions, nous pouvons utiliser Polymaps, une librairie Javascript gratuit et open source avec lequel nous pouvons implémenter des cartes de tout type et fonctionnalité sur notre site Web.
Polymaps est idéal pour afficher des informations à différents niveaux de pays, de villes et même de rues individuelles, ceci grâce à sa technologie de SVG (Graphique vectoriel évolutifs) qui n'est rien de plus qu'un format d'image vectorisé basé sur XML qui fournit un support pour l'interaction et l'animation de graphiques en deux dimensions, déjà vu que ça va un peu Polymaps Voyons ses méthodes, ses contrôles et quelques exemples de sa mise en œuvre.
Instanciation de polymaps
Tous Polymap commence par une instance de la méthode carte (), mais avant de créer une carte, nous importons l'espace de noms dans une variable locale :
var po = org.polymaps;
Polymaps n'utilise pas de constructeurs Javascript traditionnels, dans ce cas Polymaps nous fournit des méthodes qui instancient les méthodes en interne. De plus, il utilise le chaînage de méthodes, toutes les méthodes renvoient l'instance map(). Nous pouvons également insérer dans un nouveau document SVG, puis ajouter une balise à l'image :
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Nous ne pouvons pas non plus envoyer quoi que ce soit dans la méthode de récipient et l'instance de carte renverra la valeur associée au champ et servira à la fois de setter et de getter :map.conteneur ();Couches
Dans les cas les plus simples, les cartes ont une seule couche mais elles peuvent être constituées de plusieurs couches superposées, les paramètres acceptés sont les suivants :
- {X} - Coordonnée de la colonne.
- {Y} - Coordonnée de la ligne.
- {B} - Cadre de délimitation.
- {Z} - Niveau de zoom.
- {S} - Hôte.
Aube pâle
Cette carte a un design restreint qui fonctionne bien avec des tonnes de points d'information, elle est plus axée sur la mise en évidence des informations de premier plan. Cette carte est construite avec une seule couche, des coordonnées et possède quelques commandes interactives de base, c'est un bon point de départ pour commencer à la personnaliser :
Voici le code source complet :
var po = org.polymaps; var map = po.map () .container (document.getElementById ("map"). appendChild (po.svg ("svg"))) .add (po.interact ()) .add (po.hash ()); map.add (po.image () .url (po.url ("http: // {S} tile.cloudmade.com" + "/ 1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register + "/ 998 /256/{Z-lex.europa.eu/[X surprenant/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass () .pan ("aucun")); Voyons maintenant un exemple beaucoup plus complet
Grille de tuiles
Dans cet exemple, nous avons différents types de zoom, ainsi que la gestion de différentes couches, en plus nous pouvons faire pivoter la zone de la carte et ainsi pouvoir voir d'autres zones, voyons quelques captures :
Et enfin le code source pour que vous puissiez l'essayer par vous-même :
var po = org.polymaps; var div = document.getElementById ("map"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var map = po.map () .container (g) .tileSize ({x : 128, y : 128}) .angle (.3) .add (po.interact ()) .on ("redimensionner", redimensionner); redimensionner (); map.add (po.layer (grille)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("largeur", "50%"); rect.setAttribute ("hauteur", "50%"); fonction redimensionner () {if (redimensionner.ignorer) return ; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("transformer", "traduire (" + (x / 2) + "," + (y / 2) + ")"); redimensionner.ignorer = vrai; map.size ({x : x, y : y}); resize.ignore = false; } fonction grille (tile) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("largeur", taille.x); rect.setAttribute ("hauteur", taille.y); var text = g.appendChild (po.svg ("texte")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (function () {if (spin) map.angle (map.angle () + spin);}, 30); touche de fonction (e) {switch (e.keyCode) {cas 65 : spin = e.type == "keydown" ? -.004 : 0 ; Pause; case 68 : spin = e.type == "keydown" ? .004 : 0 ; Pause; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("redimensionner", redimensionner, false);
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif 
