Eklaslide.js

Par Papasti dans Papasti le 20 Octobre 2014 à 08:16

1. Présentation

Je vous ai préparé une petite classe javascript pour réaliser un slider de contenu html. Il peut donc comporter des images, du texte, du javascrit etc...

C'est un slider qui comporte deux éléments, celui de gauche et celui de droite et dont vous pouvez paramétrer le temps des animations ainsi que les rotations dans les 3 directions.

2. Mise en place

Pour faire fonctionner ce slider, il faut charger les script suivants:

Enregistrez ces deux fichiers parmi ceux de votre blog en leur donnant le nom des boutons ci-dessus.

A noter que pour faire fonctionner ce slider dans l'entête de votre blog, tout le code suivant devra être placé dans un module simple html. Si par contre vous voulez placer le slider dans un article ou une page simple, alors vous placerez directement les codes dans l'article ou la page.

Pour charger ces scripts, il suffit d'écrire:

<script src="url du fichier Velocity.js"></script>
<script src="url du fichier DualSlider.js"></script>

3. Définition du slider

La structure html est la suivante et est organisée à partir de balises div, ce qui permet d'y placer tout ce que l'on souhaite.

Le conteneur doit avoir la classe eklaslide. Il comporte des conteneurs de classe itemslide qui contiennent eux-mêmes deux div de classe respective item_left et item_right. Ces dans ces deux dernières div que vous placerez le contenu que vous voulez voir défiler.

Cela nous donne:

<div class="eklaslide">
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 1er slide</div>
		<div class="item_right">Contenu à droite du 1er slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 2ème slide</div>
		<div class="item_right">Contenu à droite du 2ème slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 3ème slide</div>
		<div class="item_right">Contenu à droite du 3ème slide</div>
	</div>
	....
</div>

4. Le CSS

Le CSS par défaut est le suivant. Il faudra l'adapter en fonction de votre blog et de vos envies. En particulier width et height.

La Propriété overflow doit être à hidden.

Il faudra peut-être aussi modifier bottom et left selon la position que vous voulez adopter pour le slider (en particulier dans le header). Ici il est placé en bas à gauche et fait la largeur du blog (974px).

.eklaslide{    
    width:974px;
    height:220px;
    overflow:hidden;
    background-color:white;
    color:black;
    position:absolute;
    bottom:0;
    left:0;}

Il vous est bien entendu possible d'ajouter du css pour les classes item_left et item_right.

5. Les options

Les options possibles sont les suivantes:

  HEADER:true          // true si doit être positionné dans le header
  DUREE_ANIM:2500      // durée d'une animation
  DELAI_1:1200         // délai lancement itemde gauche
  DELAI_2:1500         // délai lancement item de droite
  TEMPS_AFFICHAGE:4500 // temps de pause avant slide suivant
  SLIDE_SUIVANT:8000   // durée pour le lancement de l'item suivant
  RX:'360deg'          // Rotation selon X de l'image
  RY:'360deg'          // Rotation selon X de l'image
  RZ:'180deg',         // Rotation selon X de l'image
  FORCE:'300'          // Force appliquée pour la transition (max 500)
  AMORTI:'15'          // amortissement

Bien entendu, vous n'avez qu'à indiquer les options que vous souhaitez. Inutile de toutes les écrire si elles ne servent pas. De DUREE_ANIM à SLIDE_SUIVANT, ce sont les temps (en millisecondes) pour les animations et les transitions. Faites des essais pour voir ce que vous préférez.

RX, RY, RZ sont les rotations dans les trois directions appliquées aux différents slides. Par exemple, lorsqu'un slide avec les options ci-dessus arrive, pendant son déplacement, il tourne de 360° selon X, 360° selon Y et 180° selon Z.

FORCE et AMORTI sont les paramètres qui vont donner un effet linéaire ou élastique aux transitions. Pour avoir un effet élastique, on choisira une valeur faible pour AMORTI (par exemple 10). Si on le combine avec une FORCE de 300 par exemple, l'élément aura un comportement de ressort.

Lorsque le slide s'en va, ce sont les mêmes effets mais inversés qui sont appliqués.

6. Lancer le script

Une fois les scripts chargés et le html réalisé, on va lancer le script du slider. Pour cela on le placera à la fin. Il ressemblera à ceci:

<script>// <![CDATA[
onJSFilesLoaded.push(function(){
	var monslide=new EklaSlide('eklaslide');
	var options = {
		HEADER:true, // true si doit être positionné dans le header
		DUREE_ANIM:2500, // durée d'une animation
		DELAI_1:1200,    // délai lancement itemde gauche
		DELAI_2:1500,    // délai lancement item de droite
		TEMPS_AFFICHAGE:4500, // temps de pause avant slide suivant
		SLIDE_SUIVANT:8000,   // durée pour le lancement de l'item suivant
		RX:'360deg',     // Rotation selon X de l'image
		RY:'360deg',     // Rotation selon X de l'image
		RZ:'180deg',   // Rotation selon X de l'image
		FORCE:'300',   // Force appliquee pour la transition >500
		AMORTI:'15'    // amortissement 
		};
	monslide.init(options);
});
// ]]></script>

7. Un exemple complet

Tout cela mis bout à bout nous donne:

<script src="url du fichier Velocity.js"></script>  //Placez l'url de votre fichier
<script src="url du fichier DualSlider.js"></script>//Placez l'url de votre fichier
<div class="monslide">
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 1er slide</div>
		<div class="item_right">Contenu à droite du 1er slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 2ème slide</div>
		<div class="item_right">Contenu à droite du 2ème slide</div>
	</div>
	<div class="itemslide">
		<div class="item_left">Contenu à gauche du 3ème slide</div>
		<div class="item_right">Contenu à droite du 3ème slide</div>
	</div>
</div>
<style>
.monslide{    
    width:974px;
    height:220px;
    overflow:hidden;
    font-family: kaushan-script, cursive;
    font-size:1em; 
    background-color:white;
    color:black;
    position:absolute;
    bottom:0;
    left:0;}
</style>
<script>// <![CDATA[
onJSFilesLoaded.push(function(){
	var slider=new EklaSlide('monslide');
	var options = {
		HEADER:false, // true si doit être positionné dans le header
		DUREE_ANIM:2500, // durée d'une animation
		DELAI_1:1200,    // délai lancement itemde gauche
		DELAI_2:1500,    // délai lancement item de droite
		TEMPS_AFFICHAGE:4500, // temps de pause avant slide suivant
		SLIDE_SUIVANT:8000,   // durée pour le lancement de l'item suivant
		RX:'360deg',     // Rotation selon X de l'image
		RY:'360deg',     // Rotation selon X de l'image
		RZ:'180deg',   // Rotation selon X de l'image
		FORCE:'300',   // Force appliquee pour la transition >500
		AMORTI:'15'    // amortissement 
		};
	slider.init(options);
});
// ]]></script>

8. Améliorations

J'ai écrit ce script assez rapidement: il souffre donc surement d'imperfections, probablement de quelques bugs. Je compte sur vous pour me les remonter.

Par la suite, j'envisage d'y ajouter des boutons de contrôle et de développer d'autres types de sliders pour les blogs Eklablog.

votre commentaire

DataMaps.js
Par Papasti dans Cartes le 13 Octobre 2014 à 20:05
1. Présentation

Peut-être avez vous voyagé et vous souhaitez faire apparaître sur une carte toutes les destinations visitées. Ou alors vous êtes enseignant et souhaitez illustrer votre blog avec une carte mondiale. Quelque soit votre motivation, je pense que Datamaps.js va vous simplifier la vie en vous permettant l'affichage d'une carte interactive.

En partant d'une carte mondiale, on va pouvoir afficher une partie qui nous intéresse, comme ci-dessus. Cela dit, sur le site officiel ne sont disponibles que la carte des Usa et la carte mondiale. Pour obtenir un pays en particulier, il faudra appliquer des zooms et des rotations à la carte du monde. Mais rassurez vous, c'est très simple.

Il est néanmoins possible de créer sa propre carte avec des outils externes. J'en parlerai en fin d'article.

2. Mise en place

Cette fois-ci, il y a 3 scripts à charger dont 2 correspondant à d3.js, datamaps étant construit sur celui-ci.

Commencez par enregistrer parmi les fichiers de votre blog datamaps.world.min.js et récupérez son url.

Le code à placer pour charger les 3 scripts est le suivant:
```
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="url de datamaps.world.min.js"></script>
```
Il vous faut ensuite placer une div qui va servir à contenir la carte (on l'appelle dans notre cas container) et enfin un script qui va la construire. Voyez l'exemple ci dessous
```
<div id="container" style="position: relative; width: 640px; height: 300px;"> </div>
<script>
onJSFilesLoaded.push(function(){
var map = new Datamap({element: document.getElementById('container')});
});
</script>
```
Et voilà, il n'en faut pas plus pour obtenir la carte du monde.

3. Options

Changer la couleur par défaut
```
var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            defaultFill: 'rgba(23,48,210,0.9)' 
        }
    });
```
Supprimer les pop-ups ou effets sur le hover
```
var map = new Datamap({
        element: document.getElementById('container'),
        geographyConfig: {
            highlightOnHover: false,
            popupOnHover: false
        }
    });
```
Colorer les pays lors de la création de carte

Vous pouvez définir différentes couleurs en leur donnant un label, puis appliquer le label correspondant à chaque pays comme ceci:
```
var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW'
            },
            USA: {
                fillKey: 'MEDIUM'
            },
FRA: {
                fillKey: 'HIGH'
            }
        }
    });

});
```
Il est aussi possible de modifier la couleur d'un pays plus tard en lançant un script contenant:
```
map.updateChoropleth({
   USA: {fillKey: 'LOW'},
   CAN: '#0fa0fa'
});
```
Ajouter des cercles pour localiser des évènements
```
var bombMap = new Datamap({
    element: document.getElementById('containerx'),
    scope: 'world',
    geographyConfig: {
        popupOnHover: false,
        highlightOnHover: false
    },
    fills: {
        'USA': '#1f77b4',
        'RUS': '#9467bd',
        'PRK': '#ff7f0e',
        'PRC': '#2ca02c',
        'IND': '#e377c2',
        'GBR': '#8c564b',
        'FRA': '#d62728',
        'PAK': '#7f7f7f',
        defaultFill: '#EDDC4E'
    },
    data: {
        'RUS': {fillKey: 'RUS'},
        'PRK': {fillKey: 'PRK'},
        'PRC': {fillKey: 'PRC'},
        'IND': {fillKey: 'IND'},
        'GBR': {fillKey: 'GBR'},
        'FRA': {fillKey: 'FRA'},
        'PAK': {fillKey: 'PAK'},
        'USA': {fillKey: 'USA'}
    }
});

     var bombs = [{
        name: 'Joe 4',
        radius: 25,
        yeild: 400,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First fusion weapon test by the USSR (not "staged")',
        date: '1953-08-12',
        latitude: 50.07,
        longitude: 78.43
      },{
        name: 'RDS-37',
        radius: 40,
        yeild: 1600,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
        date: '1955-11-22',
        latitude: 50.07,
        longitude: 78.43

      },{
        name: 'Tsar Bomba',
        radius: 75,
        yeild: 50000,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
        date: '1961-10-31',
        latitude: 73.482,
        longitude: 54.5854
      }
    ];
//draw bubbles for bombs
bombMap.bubbles(bombs, {
    popupTemplate: function (geo, data) { 
            return ['<div class="hoverinfo">' +  data.name,
            '<br/>Payload: ' +  data.yeild + ' kilotons',
            '<br/>Country: ' +  data.country + '',
            '<br/>Date: ' +  data.date + '',
            '</div>'].join('');
    }
});
```
Centrer, tourner et changer l'echelle de la carte

C'est ce que j'ai utilisé pour obtenir la carte de France en haut de l'article en modifiant les valeurs de center, rotate et scale.
```
var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container1'),
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([19, -3])
      .rotate([4.4, 0])
      .scale(400)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  },
```
4. Créer ses propres cartes

A venir très bientôt....
votre commentaire
Eklabouton.js
Par Papasti dans Papasti le 12 Octobre 2014 à 17:37
1. Eklabouton, c'est quoi ?

C'est parce que je trouve les boutons de type input pas très jolis (voire même très moches) que j'ai décidé de créer une petite classe javascript afin de donner à ces boutons un look plus sympa. Pour ceux qui connaissent, vous trouverez une certaine ressemblance avec les boutons de bootstrap dont je me suis inspiré. Les boutons ci-contres ont bien été écrits à partir de la balise <input> sur laquelle on va ajouter une classe, éventuellement une petite image et un petit coup de javascript pour obtenir ce résultat. Ici, je me contente de cacher le bouton et je crée une div qui réagira à la souris afin de pouvoir y placer des icones.

Etant donné que j'ai créé cette classe, il sera éventuellement possible de l'enrichir en fonction de vos demandes. Mais soyons clair, elle a été développée pour fonctionner sur Eklablog ce qui sous entend une utilisation sur base Mootools. Assez de blabla et passons aux choses sérieuses.

2. Chargement du script

Le script est ici très petit (moins de 1 ko). Téléchargez le ici: http://ekladata.com/vEMdkrkZrqV1G_MBVbvVXJYSwgQ/eklabouton.js et enregistrez le parmi les fichiers de votre blog (sous le nom eklabouton.js)

Copiez ensuite le CSS dans Apparence/Modifier le Thème/ Ajouter du css : Fichier CSS

Ensuite, vous le chargez comme ceci:
```
<script src="url du fichier eklabouton.js"></script>
```
3. Utilisation - Classe BoutonClassic

On va ici utiliser la classe BoutonClassic pour changer l'apparence du bouton Input.

Vous placez votre balise input comme d'habitude mais en lui donnant une classe (de votre choix) par exemple la classe "monbouton" comme ci-dessous
```
<input class="monbouton" onclick="alert('Clic sur mon bouton');" type="button" value="Cliquez ici" />
```
Il ne reste plus qu'à appeler le script comme ceci (avec l'utilisation de cette classe, il n'y a que deux paramètres à indiquer: la classe et la couleur - voir les options):
```
<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new BoutonClassic ('.monbouton','bleu');
typebouton1.init();
});</script>
```
On obtiendra donc un bouton bleu comme celui en haut de page.

Si on regroupe tout ça, cela donne:
```
<script src="url du fichier eklabouton.js"></script>
<input class="monbouton" onclick="alert('Clic sur mon bouton');" type="button" value="Cliquez ici" />
<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new BoutonClassic ('.monbouton','bleu');
typebouton1.init();
});</script>
```
4. Utilisation - Classe Bouton

Pour l'appel à la classe Bouton, il y a 4 paramètres:

new Bouton (classe, couleur, largeur, hauteur)

Seul le paramètre classe est obligatoire.

Paramètre couleur: bleu, vert, cyan, orange, rouge et noir.

Si vous omettez la couleur lors de l'appel à la classe Bouton, alors ce seront les couleurs par défaut (comme le bouton gris en haut de page)

Largeur et hauteur: valeurs en pixel

S'ils ne sont pas indiqués, la dimension du bouton sera ajustée automatiquement.

Exemple pour un bouton de 200 pixels de largeur et 50 de hauteur, on écrira:
```
<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new Bouton ('.monbouton','bleu',200,50);
typebouton1.init();
});</script>
```
Ajout d'images dans le bouton

Cela se fait au niveau de la balise input avec les propriétés data-ico et data-ico-pos. La hauteur de l'image s'ajuste à la hauteur du bouton. Néanmoins il est souhaitable d'avoir une image de la hauteur du bouton pour un meilleur rendu.

data-ico: url de l'image

data-ico-pos: left ou right (left par défaut)

Exemple:
```
<input class="bout1" onclick="alert('click bout1');" type="button" value="bouton" data-ico="http://ekladata.com/4hYQcQ_N-C_7GQhAEv1mCKke77Y/2745-88607.png" data-ico-pos="right" />
```
votre commentaire
Gmaps.js
Par Papasti dans Cartes le 11 Octobre 2014 à 09:43
Une carte pour localiser des lieux, des événements ou des informations géopolitiques par exemple, ça peut être sacrément sympa. Alors il y a la solution d'aller créer sa carte sur Google maps puis de la placer sur son blog à l'aide du code html fourni. Mais il y a plus sympa: La définir directement au sein du blog. C'est ce que permet Gmaps.js

1. Exemples

Une carte classique positionnée selon des coordonnée à l'échelle choisie et qui réagit au clic de souris

Code correspondant à la carte ci-dessus

2. Mise en place

Comme toujours, il va falloir charger des scripts. Le premier est récupéré directement chez Google. Pour le second, téléchargez le ici: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js puis enregistrez le parmi les fichiers de votre blog sous le nom gmaps.js

C'est quasiment fini.

Dans l'article ou la page concernés, créez une balise <div> en lui donnant l'id "map" puis placez le code correspondant à la carte que vous avez créée.

Cela vous donne:
```
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="url du fichier gmaps.js"></script>
<div id="map"> </div>
<script>
onJSFilesLoaded.push(function(){
map = new GMaps({
  div: '#map',
  zoom: 5,
  lat:47.497035,
  lng:2.483923,
  click: function(e) {
    alert('Vous avez cliqué sur la carte');
  }
});
});
</script>
```
3. Informations complémentaires

Voici quelques lien si vous souhaitez aller un peu plus loin.

Exemples sur le site officiel

Documentation

Informations complémentaires
votre commentaire

Mathjax.js

Par Papasti dans Science le 9 Octobre 2014 à 17:35

Nota: Si les formules n'apparaissent pas, raffraichissez la page.

1. Présentation

Adeptes des formules mathématiques et autres intégrales, c'est Mathjax est la librairie qu'il vous faut: Avec Mathjax , représenter une fraction, une somme ou une intégrale sur son site devient un vrai plaisir.

Exemple d'intégrale: $\int_0^{\infty}f(x)dx$
de fraction:$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
de somme $\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$

ou encore

\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

Bref, comme vous le voyez, on doit pouvoir tout écrire avec Mathjax.

Cette librairie propose d'écrire les formules en MathML ou en LaTeX. C'est cette dernière version que je vous expose afin de rendre plus facile l'utilisation avec nos blogs. En effet MathML utilise des balises qui ne sont pas reconnues par l'éditeur (comme <math>, <mi>, <mo> etc.).

2. Installation

Ici, pas de fichier à enregistrer sur votre blog. On fait directement appel au script sur le site de Mathmax.org
Il suffit de placer le code ci-dessous sur la page ou l'article sur lequel vous souhaitez faire apparaître des formules.

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript">
</script>

3. Ecrire des formules

A savoir

Pour écrire une formule dans la ligne, on doit la commencer par $ et la finir par $ Pour écrire la formule seule centrée, on la placera entre $$ et $$

Par exemple $$\int_0^{\infty}f(x)dx$$ donnera $$\int_0^{\infty}f(x)dx$$

et $\int_0^{\infty}f(x)dx$ donnera $\int_0^{\infty}f(x)dx$

Ci-dessous un exemple fonctionnel que vous pouvez placer dans le code html de votre article:

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript">
</script>
<div>
 $$\displaystyle \sin(x) = \displaystyle\sum_{n=0}^\infty \frac{(-1)^n}{(2n+1)!}\ x^{2n+1} = x - \frac{x^3}{3!} + \frac{x^5}{5!}- \frac{x^7}{7!}\ ...$$
</div>

Cela vous donnera:

$$\displaystyle \sin(x) = \displaystyle\sum_{n=0}^\infty \frac{(-1)^n}{(2n+1)!}\ x^{2n+1} = x - \frac{x^3}{3!} + \frac{x^5}{5!}- \frac{x^7}{7!}\ ...$$

Retrouver une formule

Par ailleurs, lorsque vous faites un clic droit sur une formule MathJax, vous avez la possibilité de voir le code LaTeX correspondant en cliquant sur Afficher sous forme puis Commandes Tex (Show Math as / Tex commands si c'est en anglais)

Editeur de formules

Alors, il est vrai que cela paraît compliqué au premier abord mais heureusement, il existe des éditeurs online pour vous aider dans la construction de vos formules comme Interactive LaTeX Editor.

4. Quelques exemples

Comme expliqué ci-avant, faites un clic droit pour connaître le code correspondant aux formules.

$$\frac{a}{b}$$	$$x^n$$	$$\sqrt{x}$$	$$x_n$$
$$\sqrt{\frac{a}{b}}$$	$$\left( \frac{a}{b}\right)$$	$$\sqrt[n]{x}$$	$$x_a^b$$
$$\lim_{x \to 0}$$	$$\sum_{a}^{b}$$	$$\int_{a}^{b}$$	$$\oint_{a}^{b}$$
$$\prod_{a}^{b}$$	$$\binom{n}{k}$$	$$\left[ \frac{a}{b}\right]$$	$$\lceil x \rceil$$
$$\lfloor x \rfloor$$	$$\left\{ x\right\}$$	$$\bigcup_{}$$	$$\bigcap_{}$$
$$\partial$$	$$\infty$$	$$\text{ok}$$	$$\textit{ok}$$
$$\alpha \beta \gamma\delta\epsilon\varepsilon\zeta\eta\vartheta\theta\iota\kappa\lambda\mu\nu\xi\pi\varpi\rho\varrho\sigma\varsigma\tau\upsilon\chi\varphi\phi\omega\psi$$
$$\Gamma\Delta\Theta\Lambda\Xi\Pi\Sigma\Upsilon\Psi\Omega$$

votre commentaire

1 2 3

Suivre le flux RSS des articles

Suivre le flux RSS des commentaires

Une carte classique positionnée selon des coordonnée à l'échelle choisie et qui réagit au clic de souris




Code correspondant à la carte ci-dessus

Eklaslide.js

1. Présentation

2. Mise en place

3. Définition du slider

4. Le CSS

5. Les options

6. Lancer le script

7. Un exemple complet

8. Améliorations

DataMaps.js

1. Présentation

2. Mise en place

3. Options

Changer la couleur par défaut

Supprimer les pop-ups ou effets sur le hover

Colorer les pays lors de la création de carte

Ajouter des cercles pour localiser des évènements

Centrer, tourner et changer l'echelle de la carte

4. Créer ses propres cartes

Eklabouton.js

1. Eklabouton, c'est quoi ?

2. Chargement du script

3. Utilisation - Classe BoutonClassic

4. Utilisation - Classe Bouton

Gmaps.js

1. Exemples

2. Mise en place

3. Informations complémentaires

Mathjax.js

1. Présentation

2. Installation

3. Ecrire des formules

4. Quelques exemples