Principes

La base
Le principe est simple, pour afficher une carte avec Open Layer, il faut les éléments
suivants :
 Une page HTML (bien évidemment) possédant un conteneur (div) qui sera utilisé pour
afficher la carte.
 Un appel à la librairie Open Layer (pour en utiliser les fonctionnalités).
 Un fichier de configuration (pour personnaliser la carte).
 Un fichier CSS de mise en forme de la carte.
La librairie Open Layer tout comme le fichier CSS sont disponibles directement depuis le site
d’Open Layer.
Nous utiliserons en plus la librairie Layer Switcher. Il s’agit d’une extension pour Open Layer
qui permet de construire une légende automatiquement.

Un outil modulaire
Une carte créée avec Open Layer est composée d’objets. Les propriétés ou options de
chacun de ces objets peuvent avoir différentes valeurs :
 Une valeur textuelle ou numérique.
o 'valeur' ou 1234
 Une liste de valeurs textuelles ou numériques (array : [] ).
o ['valeur 1', 'valeur 2'] ou [1,2,3,4]
 Un objet Open Layer.
 Une liste d’objets Open Layer (array : [] ).

Ainsi, un objet peut contenir d’autres objets qui peuvent eux même contenir encore d’autres
objets.

Ces objets emboités peuvent donc :

 Soit être définis au sein de leur parent
 Soit être définis dans une variable puis cette variable est utilisée dans le parent.

Voici un exemple d’une même définition mais présentée de deux façons différentes :
 En une seule fois
 Avec l’utilisation de variables appelées dans les parents.
Style1- En une seule fois

new [Link]({
// Option avec une valeur textuelle
option_1: 'valeur',
// Option avec plusieurs valeur numériques
option_2: [0, 2, 3],
// Option faisant appel à un autre objet Open Layer
option_3:
new [Link]({
// Option avec plusieurs valeurs textuelles
option_A: [
'valeur',
'valeur 2'
]
}),
// Option faisant appel à plusieurs autres objets Open Layer
option_4: [
new [Link]({
// Option avec une valeur textuelle
option_A: 'valeur',
// Option faisant appel à un autre objet Open Layer
option_B:
new [Link]()
}),
new [Link]({
// Option faisant appel à plusieurs autres objets Open Layer
option_Z:
new [Link]({
// Option avec une valeur textuelle
option_X: 'valeur',
})
})
]
});
 Style2- Avec des variables
var variable_view = new [Link]({
// Option avec plusieurs valeurs textuelles
option_A: [
'valeur',
'valeur 2'
]
})
var variable_layer_tile = new [Link]({
// Option avec une valeur textuelle
option_A: 'valeur',
// Option faisant appel à un autre objet Open Layer
option_B:
new [Link]()
})
var variable_source_vector = new [Link]({
// Option avec une valeur textuelle
option_X: 'valeur',
})
var variable_layer_vector = new [Link]({
// Option faisant appel à plusieurs autres objets Open Layer
// On utilise ici la variable définie plus tôt
option_Z: variable_source_vector
})

new [Link]({
// Option avec une valeur textuelle
option_1: 'valeur',
// Option avec plusieurs valeur numériques
option_2: [0, 2, 3],
// Option faisant appel à un autre objet Open Layer
// On utilise ici la variable définie plus tôt
option_3: variable_view,
// Option faisant appel à plusieurs autres objets Open Layer
// On utilise ici les variables définies plus tôt
option_4: [
variable_layer_tile,
variable_layer_vector
]
});
 Vous verrez plus bas que j’utilise principalement la deuxième solution qui consiste à définir
des variables puis à les utiliser. Ça permet d’avoir un code plus facilement maintenable et
plus clair de mon point de vue.

Pour pouvoir utiliser une variable, il faut au préalable la déclarer. Ainsi, la lecture des fichiers
de configurations que je vous propose peut être faite à l’envers, en partant de la carte pour
remonter jusqu’aux différents éléments qui la compose.

2-Carte des objets

Pour s’y retrouver, voici une cartographie rapide et non exhaustive des principaux objets
d’Open Layer. Vous pourrez y retrouver les principales propriétés ayant pour valeur d’autres
objets.

Attention, certains objets sont des « classes de base » : il s’agit d’un objet générique dont est
dérivée plusieurs objets spécifiques. J’ai utilisé cette classe de base comme valeur de
propriété lorsque cette dernière peut utiliser n’importe quel objet dérivé de cette classe de
base.

Dans le cas des classes de base, les propriétés des classes dérivée sont parfois listées pour
limiter le nombre de paragraphe et simplifier la lecture.

[Link]
Détails

Conteneur de carte
Utilisé par :

Propriétés :

 layers: [Link] – Couches de données cartographiques

 view: [Link] – Vue (emprise, rotation…)

 controls: [Link] – Fonctionnalités (zoom, plein écran…)

 interactions: [Link] – Interactions (déplacement…)

 overlays: [Link] – Objets superposés (comme des contrôles mais

liés à une position géographique)

[Link]
Détails
Classe de base

Fonctionnalités
Utilisé par :
 [Link]
 Classes dérivées et propriétés :

 [Link] – Mentions légales

 [Link] – Mode plein écran

 [Link] – Position de la souris

 [Link] – Mini carte

o layers: [Link] – Couches de données cartographique

o view: [Link] – Vue (emprise, rotation…)

 [Link] – Rotation de la carte

 [Link] – Echelle

 [Link] – Barre de zoom

 [Link] – Emprise initiale

 [Link] – Zoom avant/arrière

[Link]
Détails
Classe de base

Couche de données cartographiques

Utilisé par :
 [Link]
 [Link] t [Link]

Classes dérivées et propriétés :

 [Link] – Couche de type image

o source: [Link] – Source de type image

 [Link] – Couche tuilée

o source: [Link] – Source de type tuile

 [Link] – Couche vecteur mise à jour à chaque image

o source: [Link] – Source de données vecteurs
o style: [Link] – Style de couche

 [Link] – Couche vecteur mise à jour hors animation

o source: [Link] – Source de données vecteurs
o style: [Link] – Style de couche

 [Link] – Couche vecteur tuilée

o source: [Link] – Source de données vecteurs tuilées
 o style: [Link] – Style de couche

 [Link] – Quadrillage
 [Link] – Carte de chaleur

[Link]
Détails
Classe de base

Source de données
Utilisé par :
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]

Classes dérivées et propriétés :

 [Link] – Source de type image non tuilée

o [Link] – Service ArcGIS Rest
o [Link] –
o [Link] – Mapguide server
o [Link] – Simple image statique
o [Link] – Serveur WMS
o [Link] – Raster créé à la volée à partir d’autres données
 source: [Link] | [Link] – Source des données

 [Link] – Source de type image tuilée

o [Link] – Image tuilée Bing Maps
o [Link] – Image tuilée IIF Image API
o [Link] – Image tuilée ArcGIS Rest
o [Link] – Image tuilée JSON
o [Link] – Image tuilée de serveur WMS
o [Link] – Image tuilée de serveur WMTS
o [Link] – Image tuilée au format XYZ
o [Link] – Image tuilée au format Zoomify
o [Link] – Données vecteur tuilées
o [Link] – Données d’interaction UTFGrid
o tileGrid: [Link] – Format de la grille de tuilage

 [Link] – Source de type vecteur

o format: [Link]

 [Link] – Sources de données vecteur ponctuelles clusterisées

 [Link]
Détails
Classe de base

Format de données
Utilisé par :
 [Link]

Classes dérivées et propriétés :

 [Link] – Format JSON

o [Link]
o [Link]
o [Link]

 [Link] – Format MVT de MapBox

 [Link] – Données au format texte

o [Link]
o [Link] – Format de données encodées par algorithme Polyline
o [Link] – Données en Well Known Text

 [Link] – Données au format XML

o [Link]
o [Link]
 defaultStyle: [Link]
o [Link]
o [Link]
o [Link]

[Link]
Détails

Stylisation des couches de données vecteur

Utilisé par :
 [Link]
 [Link]
 [Link]
 [Link]

Propriétés :

 geometry: [Link] | [Link] – Forme du symbole géométrique

 fill: [Link] – Remplissage du symbole
 image: [Link] – Symbole de type image
 stroke: [Link] – Contour du symbole
 text: [Link] – Étiquette de l’objet
 [Link]
Détails
Classe de base

Formes géométriques
Utilisé par :
 [Link]
 [Link]

Classes dérivées et propriétés :

 [Link] – Collection de géométries

o geometries: [Link] – Géométries présentes dans la collection

 [Link] – Point
o coordinates: [Link]

 [Link] – Multipoint
o coordinates: [Link]

 [Link] – Contour circulaire

o coordinates: [Link]

 [Link] – Ligne
o coordinates: [Link]

 [Link] – Multiligne
o coordinates: [Link] | [Link]

 [Link] Multipolygone
o coordinates: [Link] | [Link]

 [Link] – Polygone
o coordinates: [Link]

 [Link] – Forme circulaire

o center: [Link] – Centre de la forme

[Link]
Détails
Classe de base

Symbole
Utilisé par :
 [Link]
Classes dérivées et propriétés :
 [Link] – Image
 [Link] – Polygone régulier
 o fill: [Link] – Remplissage
o stroke: [Link] – Contour
 [Link] – Cercle
o fill: [Link] – Remplissage
o stroke: [Link] – Contour

[Link]
Détails

Remplissage
Utilisé par :
 [Link]
 [Link]
 [Link]
 [Link]
Propriétés :
 color: [Link]

[Link]
Détails

Contour vecteur
Utilisé par :
 [Link]
 [Link]
 [Link]
 [Link]
Propriétés :
 color: [Link]

[Link]
Détails

Etiquette de l’objet
Utilisé par :
 [Link]
Propriétés :
 fill: [Link] – Remplissage
 stroke: [Link] – Contour
 backgroundFill: [Link] – Remplissage
 backgroundStroke: [Link] – Contour
 3-Initialisation de la carte
Pour notre projet, nous allons avoir besoin des fichiers suivants :
 [Link] : page qui sera consultée et qui contiendra la carte.
 ol_style.css : fichier CSS qui contiendra les styles de la page [Link] ainsi que les
personnalisations de notre carte (nous n’utiliserons qu’une partie des styles par défaut).
 Un fichier de configuration qui sera ici diviser en 4 fichiers pour simplifier la compréhension
:
o ol_data_raster.js : fichier de configuration des données raster.
o ol_data_vector.js : fichier de configuration des données vecteur.
o ol_control.js : fichier de configuration des contrôles de la carte (boutons de zoom,
légende, échelle…).
o ol_map.js : fichier de configuration de notre carte.

Voici les fichiers que vous devriez avoir avec le code associé :
 [Link]
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Balise méta -->
<meta charset="UTF-8"/>
<title>Open layer - Demonstration</title>
<link rel="icon" type="image/png"
href="[Link] />

<!-- Eléments utiles -->

<!-- Font Awesome (pour des icônes cool) -->
<script src="[Link]
crossorigin="anonymous"></script>
<!-- Police sympa -->
<link href="[Link]
family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Open Layers -->

<!-- Style Open Layers -->
<link rel="stylesheet"
href="[Link]
type="text/css">
<!-- Bibliothèque Open Layers -->
<script type="text/javascript"
src="[Link]
script>
<!-- Extension Open Layers - layerswitcher : paramétrage -->
<script src="[Link]
<!-- Extension Open Layers - layerswitcher : style -->
<link rel="stylesheet" href="[Link]
[Link]" />

<!-- Styles perso -->

<link rel="stylesheet" href="ol_style.css" type="text/css">

</head>

<body>
<h1>Ma carte</h1>
<p>Voici un exemple de carte</p>

<!-- Emplacement de la carte -->

<div id="ol_localisation" class="map"></div>

<p>Bravo !!</p>

<!-- Appel JS en fin de page -->

<!-- Paramétrages Open Layers -->
<!-- Attention, l'ordre à une importance -->
<script type="text/javascript" src="ol_data_raster.js"></script>
<script type="text/javascript" src="ol_data_vector.js"></script>
<script type="text/javascript" src="ol_control.js"></script>
<script type="text/javascript" src="ol_map.js"></script>

</body>

</html>
 Ol_style.css

/************************----************************/
/* Styles Open Layer */
/****************************************************/

/* Définitions générales */
body {
background-color: rgb(42, 45, 53);
}

/* Textes */
body, p {
font-family: 'Quicksand', sans-serif;
color:#fff;
font-size: 15px;
line-height: 20px;
font-weight: 200;
}

p {
margin-bottom: 8px;
margin-top: 8px;
}

h1{
font-size: 25px;
font-weight: 500;
text-transform: uppercase;

margin-top: 0px;
margin-bottom: 2px;
}

/* Conteneur carte */
.map {
height: 450px;
width: 80%;

margin-left: auto;
margin-right: auto;

border-radius: 4px;

background-color: #AF00FF;
background-image: linear-gradient(332deg, #009FFF 0%, #AF00FF 100%);

font-family: Arial, Helvetica, sans-serif;

color: #000;
}

/* Open Layer */
/*Vide*/
 Pour le moment cette page affiche un rectangle vide. Il s’agit de l’emplacement de votre
carte. Il va donc falloir personnaliser le contenu pour afficher quelque chose. Pour cela,
plusieurs étapes :
 Personnalisation du contenu
 Personnalisation du style

4-Personnalisation du contenu
Le but est donc ici de paramétrer votre carte grâce aux fichiers de configuration.

Pour cela, nous avons vu qu’Open Layer est un outil modulaire : la carte est un objet
JavaScript, composé d’objets, eux-mêmes composés d’objets etc. Ainsi, vous allez vite voir
que nous allons avoir besoin de définir tout un tas d’objets que nous allons utiliser les uns à
la suite des autres.

Nous allons donc partir de la définition de la carte pour ensuite définir tous les objets qui la
composent. Voici quelques éléments de compréhension :
 Attention, bien qu’il soit possible de tout définir d’un seul coup, je préfère définir chaque
objet séparément dans des variables.
 N’hésitez pas à utilisez la documentation d’Open Layer.
 Certaines propriétés n’ont pas besoin d’être définies, je les ai conservées mais
commentées (pour mémoire).
ol_data.[Link]

* Open Layers */
/* Paramétrage données raster */
/****************************************************/
// Ce fichier contient la définition des fonds de plan que nous souhaitons afficher
sur la carte
// Nous allons ajouter trois fonds de plan différents (2 pour la carte et 1 que nous
utiliserons plus tard dans la mini carte).
// Les objets que l'on retrouve dans cette configuration (avec par indentation ce
qu'ils contiennent) :
// [Link] : Couche de donnée tuilées
// [Link]() : Source de données en provenance du site Open Street Map
// [Link] : Source de données en provenance du site Stamen
// [Link] : Source de données tuilées ‘XYZ’

// Définition du fond de plan Open Street Map

/////////////////////////////////////////////
var data_raster_osm = new [Link]({
// Source de la couche
source: new [Link](),
// Opacité de la couche (défaut : 1)
//opacity: 1,
// Visibilité de la couche (défaut : true)
//visible: true,
// Résolutions minimum (niveau de zoom) incluse d'affichage de la couche en
unité de carte par pixel
//minResolution:25,
// Résolutions maximum (niveau de dézoom) exclue d'affichage de la couche en
unité de carte par pixel
//maxResolution:500,
// Niveau de superposition de la couche (défaut : 0)
//zIndex: 0,
// Extension LayerSwitcher : Titre de la couche
title: 'OSM',
// Extension LayerSwitcher : Fond de plan : seul une seule couche de type
'base' est affichée à la fois
type: 'base',
// Définition du fond de plan Stamen - Toner
////////////////////////////////////////////

var data_raster_stamen_toner = new [Link]({

source: new [Link]({
layer: 'toner'
}),
// Opacité de la couche (défaut : 1)
//opacity: 1,
// Visibilité de la couche (défaut : true)
//visible: true,
// Résolutions minimum (niveau de zoom) incluse d'affichage de la couche en
unité de carte par pixel
//minResolution:25,
// Résolutions maximum (niveau de dézoom) exclue d'affichage de la couche en
unité de carte par pixel
//maxResolution:500,
// Niveau de superposition de la couche (défaut : 0)
//zIndex: 0,
// Extension LayerSwitcher : Titre de la couche
title: 'Stamen - Toner',
// Extension LayerSwitcher : Fond de plan : seul une seule couche de type 'base'
est affichée à la fois
type: 'base',
})

// Définition du fond de plan Positron

//////////////////////////////////////

var data_raster_positron = new [Link]({

source: new [Link]({
url:
'[Link]
// Mentions légales
attributions:['© Contributeur <a
href="[Link] target="_blanc">OpenStreetMap</a>','© <a
href="[Link] target="_blanc">CARTO</a>'],
}),
// Opacité de la couche (défaut : 1)
//opacity: 1,
// Visibilité de la couche (défaut : true)
//visible: true,
// Résolutions minimum (niveau de zoom) incluse d'affichage de la couche en
unité de carte par pixel
//minResolution:25,
// Résolutions maximum (niveau de dézoom) exclue d'affichage de la couche en
unité de carte par pixel
//maxResolution:500,
// Niveau de superposition de la couche (défaut : 0)
//zIndex: 0,
// Extension LayerSwitcher : Titre de la couche
title: 'Positron',
// Extension LayerSwitcher : Fond de plan : seul une seule couche de type 'base'
est affichée à la fois
type: 'base',
})
 ol_data.[Link]

// Ce fichier contient la définition des données vecteurs que nous souhaitons afficher sur
la carte
// Nous allons définir 1 couche de données contenant des points représentant des
emplacement dans 3 communes de Haute-Savoie.
// Les objets que l'on retrouve dans cette configuration (avec par indentation ce qu'ils
contiennent) :
// [Link] : Couche de données vecteur
// [Link] : Source de données vecteur
// [Link]() : Lecteur de données au format GeoJSON
// [Link] : Stylisation d'une couche
// [Link] : Style du symbole
// [Link] : Style des étiquettes
// [Link] : Style du contour

// Définition des données source (format GeoJSON)

var ol_source_layer_exemple = new [Link]({
features: new [Link]().readFeatures(
{
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'name': 'Lucinges'
},
'geometry': {
'type': 'Point',
'coordinates': [
6.318435,
46.190029
]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Saint-Gervais'
},
'geometry': {
'type': 'Point',
'coordinates': [
6.711486,
45.892829
]
}
},
{
'type': 'Feature',
'properties': {
'name': 'Annecy'
},
'geometry': {
'type': 'Point',
'coordinates': [
6.131432,
45.899263
]
}
}
]
},
{featureProjection: 'EPSG:3857'},
)
})
// Définition du style des données
var ol_style_layer_exemple = new [Link]({
// Remplissage des objets de la couche
//fill
// Utilisation d'une image
image: new [Link]({
// Image source à utiliser

src:'[Link]
[Link]',
// Dimension de l'image en pixel (défaut : [50, 50])
//size:[50,50],
// Point d'ancrage de l'image (défaut : [0.5, 0.5])
//anchor: [0.5, 46],
// Unité d'ancrage en X (défaut : 'fraction')
//anchorXUnits: 'fraction',
// Unité d'ancrage en Y (défaut : 'fraction')
//anchorYUnits: 'pixels',
// Opacité de l'image (défaut : 1)
//opacity: 1,
// Echelle de l'image (défaut : 1)
scale:0.5,
// Rotation de l'icone avec la vue (défaut : false)
rotateWithView: true,
// Rotation de l'icone en radian dans le sens des aiguille
d'une montre (défaut : 0)
//rotation:0,
}),
// Contour des objets
//stroke
// Etiquette des objets
text: new [Link]({
// Texte à afficher
text: 'Salut',
// Police (défaut : '10px sans-serif')
//font:'10px sans-serif',
// Décalage du texte en X en pixel (défaut : 0)
//offsetX:0,
// Décalage du texte en Y en pixel (défaut : 0)
offsetY:19,
// Le texte peut-il dépasser de l'opbjet ? (défaut : false)
//overflow:false,
// Placement du texte (défaut : 'point')
//Valeur : 'point' ou 'line' si la forme est de type ligne ou
polygone
//placement:'point',
// Echelle
//scale:1,
// Rotation du texte avec la carte (défault : false)
rotateWithView:true,

stroke: new [Link]({

color:[255, 255, 255, 0.7],
width:3,
}),

}),
})
// Définition de la couche de données
var data_vecteur_layer_exemple = new [Link]({

// Style de la couche
title: 'Couche exemple',
source: ol_source_layer_exemple,
// Style de la couche
style: ol_style_layer_exemple,
})
Ol_map.js

/* Paramétrage carte */
// Ce fichier contient la définition de la carte
// Les objets que l'on retrouve dans cette configuration (avec par
indentation ce qu'ils contiennent) :
// [Link] : Carte que l'on verra dans la page HTML
// [Link] : Groupe de couche (optionnel, on
aura pu utiliser les couches directement)
// [Link] : Couche de donnée vecteur
(définit dans ol_data_vector.js)
// [Link] : Couche de donnée raster
(définit dans ol_data_raster.js)
// [Link] : Vue de la carte (paramètres qui
régissent ce que l'on voit dans la carte)

// Définition de groupes de couches

///////////////////////////////////
// Ceci est optionnel mais nous l'utiliserons plus tard dans la
légende

var data_group = [
// Groupe de couche 1
new [Link]({

title: 'Fond de plan',

// Extension LayerSwitcher : Dépliage du groupe
(défaut : 'open')
fold: 'open',
// Extension LayerSwitcher : Combiner plusieurs couches
en une seule : le groupe fait office de "couche"
//combine: true,
// Couches de données contenues dans le groupe
layers:[
data_raster_osm,
data_raster_positron
],
}),
// Groupe de couche 2
new [Link]({
// Résolutions minimum (niveau de zoom) incluse
d'affichage de la couche en unité de carte par pixel
title: 'Vecteurs',
// Extension LayerSwitcher : Dépliage du groupe
(défaut : 'open')
fold: 'open',
// Couches de données contenues dans le groupe
layers:[
data_vecteur_layer_exemple,
],
}),
]
// Paramétrage de la vue
var vue_carte = new [Link]({
// Projection de la carte (défaut : 'EPSG:3857')
//projection:'EPSG:3857',
// Centre de la carte
// On récupère les coordonnées depuis des
coordonnées longitude/lattitude
center: [Link]([5.918861, 45.888972]),
// Extension maximale permise pour le centre de la carte
// Emprise en xmin, ymin, xmax, ymax en 3857
//extent: [],
// Résolution à l'ouverture en unité de carte par pixel
resolution: 432,
// Résolutions possibles pour l'utilisateur (en ordre
décroissant) en unité de carte par pixel
resolutions: [110693, 55346, 27673, 13837, 6918, 3459, 1730,
865, 432, 216, 108, 54, 27, 14, 7, 3.3, 1.6, 0.8, 0.4, 0.2, 0.1],
// Niveau de zoom maximum (défaut : 28)
//maxZoom: 0,
// Niveau de zoom minimum (défaut : 0)
//minZoom: 0,
// Niveau de zoom à l'ouverture (0 : dézoomé - 20 : très zoomé)
//zoom: 8,
// Autoriser la rotation de la carte (défaut : true)
//enableRotation: true,
// Contrainde la rotation de la carte (défaut : true)
// true = sans contrainte mais accrochage
automatique vers 0°
// nombre : nombre d'étapes possibles (4 étape = 0,
90, 180 et 270 degrés)
//constrainRotation: true,
// Rotation de la carte en radian dans le sens des aiguilles
d'une montre (défaut : 0)
//rotation: 0,***
});
// Paramétrage de la carte
var map = new [Link]({
// Identifiant de l'élément HTML où placer l'élément
target: 'ol_localisation',
// Couches à utiliser dans la carte
// L'objet est défini plus bas
layers: data_group,
// Controles à utiliser dans la carte
//controls:,
// Paramétrage de la vue
view: vue_carte,
// Nombre du tuiles chargées simultanéement (défaut : 16)
//maxTilesLoading: 10,
// Charger les tuiles durant les animations (défaut : false)
//loadTilesWhileAnimating: false,
// Charger les tuiles durant les interactions (défaut : false)
//loadTilesWhileInteracting: false,
// Tolérance de détection des mouvement du curseur en pixel
(défaut : 1)
//moveTolerance: 1,
});
Ajouter des contrôles
Le but est maintenant d’avoir des boutons pour contrôler la carte (zoom, échelle, mentions,
plein écran…).

Complétez vos fichiers avec ceci :

[Link]

// Paramétrage de la carte
//////////////////////////

// Modifiez simplement l'option concernant les contrôles en ajoutant

les contrôles que vous voulez avoir dans votre carte (ici on ajoute
tous les contrôles).
var map = new [Link]({
// Controles à utiliser dans la carte
controls: [
// On reprend les paramétrages définis dans le fichier
ol_control.js
cont_zoom,
cont_rotation,
cont_zoom_sur_emprise,
cont_barre_zoom,
cont_mini_carte,
cont_echelle,
cont_position_cuseur,
cont_plein_ecran,
cont_mention_legale,
cont_control_couche,
],
});

Une légende est également présente et vous pouvez visualiser l’intérêt d’avoir groupé les
couches : la légende affiche ces groupes.

Cependant, ces boutons possèdent un style un peu classique et surtout vous remarquerez
que certains d’entre eux se superposent. La suite va nous permettre de personnaliser tout
cela.

Ol_control.js
// Ce fichier contient la définition des contrôles de la carte
// Les objets que l'on retrouve dans cette configuration (avec par
indentation ce qu'ils contiennent) :
// [Link] : bouton de zoom et de dézoom
// [Link] : bouton de réinitialisation de la
rotation de la carte (faite avec maj+alt+clic)
// [Link] : mini carte
// [Link] : couche présente dans la mini
carte
// [Link] : paramétrage de la vue de la mini carte
// [Link] : bouton de recentrage de la
carte
// [Link] : slider de zoom
// [Link] : échelle
// [Link] : coordonnées du pointeur
// [Link] : bouton de passage en mode plein
écran
// [Link] : mentions (crédits)
// [Link] : extension d'Open Layer
permettant d'afficher une légende

// Boutons de zoom
var cont_zoom = new [Link]({
// Libellé du bouton de zoom avant (défaut : '+')
//zoomInLabel: '+',
// Infobulle du bouton de zoom avant (défaut : 'Zoom in')
zoomInTipLabel: 'Zoomer',
// Libellé du bouton de zoom arrière (défaut : '-')
//zoomOutLabel: '-',
// Infobulle du bouton de zoom arrière (défaut : 'Zoom out')
zoomOutTipLabel: 'Dézoomer',
// Nombre de paliers de zoom par clic (défaut : 1)
//delta: 1,
// Durée du zoom en millisecondes (défaut : 250)
//duration: 250,
// Classe de l'élément (défaut : 'ol-zoom')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Bouton de rotation
var cont_rotation = new [Link]({
// Libellé du bouton (défaut : '⇧')
//label: '⇧',
// Infobulle du bouton (défaut : 'Reset rotation')
tipLabel: 'Réinitialiser la rotation - Maintenez alt+shift pour
tourner la carte',
// Durée du zoom en millisecondes (défaut : 250)
//duration: 250,
// Cacher le bouton lorsque la rotation est de 0° (défaut :
true)
autoHide: false,
// Classe de l'élément (défaut : 'ol-rotate')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Bouton de zoom sur une emprise

// Bouton de rotation
var cont_rotation = new [Link]({
// Libellé du bouton (défaut : '⇧')
//label: '⇧',
// Infobulle du bouton (défaut : 'Reset rotation')
tipLabel: 'Réinitialiser la rotation - Maintenez alt+shift pour tourner la
carte',
// Durée du zoom en millisecondes (défaut : 250)
//duration: 250,
// Cacher le bouton lorsque la rotation est de 0° (défaut : true)
autoHide: false,
// Classe de l'élément (défaut : 'ol-rotate')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Bouton de zoom sur une emprise

var cont_zoom_sur_emprise = new [Link]({
// Emprise sur laquelle zoomer
// Par exemple xmin, ymin, xmax, ymax en 3857
extent: [
516540, 5687190,
801228, 5837958
],
// Libellé du bouton (défaut : 'E')
//label: 'E',
// Infobulle du bouton (défaut : 'Fit to extent')
tipLabel: 'Zoomer sur l\'emprise initiale',
// Classe de l'élément (défaut : 'ol-zoom-extent')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Barre de zoom
var cont_barre_zoom = new [Link]({
// Durée de l'animation de zoom en millisecondes (défaut : 200)
//duration: 200,
// Classe de l'élément (défaut : 'ol-zoomslider')
//className: '',
})

// Mini carte
var cont_mini_carte = new [Link]({
// Possibilité de replier l'élément (défaut : true)
collapsible: true,
// Replié au démarrage ? (défaut : true)
collapsed: true,
// Infobulle du bouton
tipLabel: 'Afficher la mini-carte',
// Couches à afficher dans la minicarte
// Attention, la même couche ne doit pas être utilisée dans la carte
// Il faut une couche spécifiquement créée pour la mini carte
layers: [
data_raster_stamen_toner,
],
view: new [Link]({
zoom: 13,
}),
// La mini carte doit-elle tourner avec la carte principale (défaut : false)
rotateWithView: true,
// Classe de l'élément (défaut : 'ol-overviewmap')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Echelle
// Echelle
var cont_echelle = new [Link]({
// Taille minimum en pixel (défaut : 64)
//minWidth: 0,
// Unité de l'échelle (défaut : 'metric')
//units: '',
// Classe de l'élément (défaut : 'ol-scale-line')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Position du curseur
var cont_position_cuseur = new [Link]({
// Format des coordonnées
coordinateFormat: function(coordinate) {
return [Link](coordinate, '<span><i class="fas fa-map-marker-
alt"></i> {x} ° | {y} °</span>', 6);
},
// Projection des coordonnées (défaut : projection de la vue)
projection: 'EPSG:4326',
// Texte affiché lorsqu'aucune coordonnées n'est disponible (défaut : ' ')
//undefinedHTML: ' ',
// Classe de l'élément (défaut : 'ol-mouse-position')
//className: '',
})
// Bouton d'affichage en plein écran
var cont_plein_ecran = new [Link]({
// Libellé du bouton (defaut : '\u2922')
//label: '\u2922',
// Infobulle du bouton (défaut : 'Toggle full-screen')
tipLabel: 'Passez en mode plein-écran',
// Libellé du bouton lorsque du mode plein-écran (défaut : '\u00d7')
//labelActive: '\u00d7',
// Classe de l'élément (défaut : 'ol-full-screen')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Mentions légales
var cont_mention_legale = new [Link]({
// Possibilité de replier l'élément
collapsible: true,
// Etat "de repliage" au démarrage
collapsed: true,
// Libellé du bouton lorsque l'élément est déplié (défaut : '»')
//collapseLabel: '»',
// Libellé du bouton lorsque l'élément est replié (défaut : 'i')
//label: 'i',
// Infobulle du bouton
tipLabel: 'Attributions',
// Classe de l'élément (défaut : 'ol-attribution')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Controle des couches
// Extension LayerSwitcher
var cont_control_couche = new [Link]({
// Infobulle du bouton
tipLabel: 'Légende',
// Visibilité des groupes (défaut : 'children')
// 'none' : les groupes n'ont pas de case à cocher
// 'children' : le changement d'état de visibilité d'un groupe change l'état de ses
enfants vers le même état
// 'group' : le changement d'état de visibilité d'un groupe ne change pas l'état de
visibilité de ses enfants
groupSelectStyle:'children'
});
 Personnalisation du style
Style des contrôles
Pour personnaliser le style des contrôles deux possibilités de modification :
 Le paramétrages des objets de ces contrôles.
 Le CSS associé à ces contrôles.
Nous allons nous aider de la police Font Awesome pour ajouter un peu de fun.
OL_style.css
/* Ajoutez ces définitions à la suite de votre fichier CSS */
/* Open Layer */
/* Couleur des contrôles */
.ol-control > button,
.ol-scale-line {
background-color: rgba(255, 0, 0, 0.5);
}

.ol-control > button:focus,

.ol-control > button:hover {

background-color: rgba(255, 0, 0, 0.9);

}

/* Bouton */
.ol-control > button {
font-family: "Font Awesome 5 Free";
}

/* Zoom in */
.[Link]-zoom [Link]-zoom-in::before {
content: "\f067";
font-weight: 900;
}

/* Zoom out */
.[Link]-zoom [Link]-zoom-out::before {
content: "\f068";
font-weight: 900;
}

/* Bouton de rotation carte */

.ol-rotate {
top: 4.5em;
left: 0.5em;
right: unset;
transition: opacity .25s linear,visibility 0s linear
}

/* Bouton de retour à l'emprise initiale */

.ol-zoom-extent {
top: 7em;
}

.[Link]-zoom-extent button::before {
content: "\f689";
font-weight: 900;
}

/* Slider de zoom */
.ol-zoomslider {
top: 9.5em;
background-color: rgba(255, 255, 255, 0.8);
}
/* Mini carte */
.ol-overviewmap {
bottom: 2.5em;
}

.[Link]-overviewmap button::before {
content: "\f00d";
font-weight: 900;
}

.[Link]-collapsed button::before {
content: "\f279";
font-weight: 400;
}

/* Position du cuseur */
.ol-mouse-position {
position:absolute;
top: unset;
right: unset;
bottom: 5px;
left: 50%;
transform: translate(-50%, 0);

padding: 2px 5px;

}

/* Bouton mode plein écran */

.[Link]-full-screen [Link]-full-screen-false::before {
content: "\f108";
font-weight: 900;
}

.[Link]-full-screen [Link]-full-screen-true::before {
content: "\f00d";
font-weight: 900;
}

/* Mention */
.ol-attribution li {
display: list-item;
}

.[Link]-attribution button::before {
content: "\f00d";
font-weight: 900;
}

.[Link]-collapsed button::before {
content: "\f129";
font-weight: 900;
}
 Ol_control.js
// On remplace les valeurs textuelles affichées par rien : ''
// On gère ces valeur via CSS
// Boutons de zoom
var cont_zoom = new [Link]({
// Libellé du bouton de zoom avant (défaut : '+')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font Awesome"
zoomInLabel: '',
// Infobulle du bouton de zoom avant (défaut : 'Zoom in')
zoomInTipLabel: 'Zoomer',
// Libellé du bouton de zoom arrière (défaut : '-')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font Awesome"
zoomOutLabel: '',
// Infobulle du bouton de zoom arrière (défaut : 'Zoom out')
zoomOutTipLabel: 'Dézoomer',
// Nombre de paliers de zoom par clic (défaut : 1)
//delta: 1,
// Durée du zoom en millisecondes (défaut : 250)
//duration: 250,
// Classe de l'élément (défaut : 'ol-zoom')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Bouton de rotation
var cont_rotation = new [Link]({
// Libellé du bouton (défaut : '⇧')
//label: '⇧',
// Infobulle du bouton (défaut : 'Reset rotation')
tipLabel: 'Réinitialiser la rotation - Maintenez alt+shift pour tourner la carte',
// Durée du zoom en millisecondes (défaut : 250)
//duration: 250,
// Cacher le bouton lorsque la rotation est de 0° (défaut : true)
autoHide: false,
// Classe de l'élément (défaut : 'ol-rotate')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Bouton de zoom sur une emprise

var cont_zoom_sur_emprise = new [Link]({
// Emprise sur laquelle zoomer
// Par exemple xmin, ymin, xmax, ymax en 3857
extent: [
516540, 5687190,
801228, 5837958
],
// Libellé du bouton (défaut : 'E')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font Awesome"
label: '',
// Infobulle du bouton (défaut : 'Fit to extent')
tipLabel: 'Zoomer sur l\'emprise initiale',
// Classe de l'élément (défaut : 'ol-zoom-extent')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Barre de zoom
var cont_barre_zoom = new [Link]({
// Durée de l'animation de zoom en millisecondes (défaut : 200)
//duration: 200,
// Classe de l'élément (défaut : 'ol-zoomslider')
//className: '',
})

// Mini carte
var cont_mini_carte = new [Link]({
// Possibilité de replier l'élément (défaut : true)
collapsible: true,
// Replié au démarrage ? (défaut : true)
collapsed: true,
// Libellé du bouton lorsque l'élément est déplié (défaut : '«')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font Awesome"
collapseLabel: '',
// Libellé du bouton lorsque l'élément est replié (défaut : '»')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font Awesome"
label: '',
// Infobulle du bouton
tipLabel: 'Afficher la mini-carte',
// Couches à afficher dans la minicarte
layers: [
data_raster_stamen_toner,
],
// Vue spécifique à utiliser (défaut : EPSG:3857 avec centrage par défaut)
view: new [Link]({
zoom: 13,
}),
// La mini carte doit-elle tourner avec la carte principale (défaut : false)
rotateWithView: true,
// Classe de l'élément (défaut : 'ol-overviewmap')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Echelle
var cont_echelle = new [Link]({
// Taille minimum en pixel (défaut : 64)
//minWidth: 0,
// Unité de l'échelle (défaut : 'metric')
//units: '',
// Classe de l'élément (défaut : 'ol-scale-line')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Position du curseur
var cont_position_cuseur = new [Link]({
// Format des coordonnées
coordinateFormat: function(coordinate) {
return [Link](coordinate, '<span><i class="fas fa-map-marker-
alt"></i> {x} ° | {y} °</span>', 6);
},
// Projection des coordonnées (défaut : projection de la vue)
projection: 'EPSG:4326',
// Texte affiché lorsqu'aucune coordonnées n'est disponible (défaut : ' ')
//undefinedHTML: ' ',
// Classe de l'élément (défaut : 'ol-mouse-position')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})
// Bouton d'affichage en plein écran
var cont_plein_ecran = new [Link]({
// Libellé du bouton (defaut : '\u2922')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font
Awesome"
label: '',
// Infobulle du bouton (défaut : 'Toggle full-screen')
tipLabel: 'Passez en mode plein-écran',
// Libellé du bouton lorsque du mode plein-écran (défaut : '\u00d7')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font
Awesome"
labelActive: '',
// Classe de l'élément (défaut : 'ol-full-screen')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Mentions légales
var cont_mention_legale = new [Link]({
// Possibilité de replier l'élément
collapsible: true,
// Etat "de repliage" au démarrage
collapsed: true,
// Libellé du bouton lorsque l'élément est déplié (défaut : '»')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font
Awesome"
collapseLabel: '',
// Libellé du bouton lorsque l'élément est replié (défaut : 'i')
// On gère le libellé via le CSS (pseudo-élément before) et la font "Font
Awesome"
label: '',
// Infobulle du bouton
tipLabel: 'Attributions',
// Classe de l'élément (défaut : 'ol-attribution')
//className: '',
// Identifiant de l'élément HTML où placer l'élément
//target: '',
})

// Controle des couches

// Extension LayerSwitcher
var cont_control_couche = new [Link]({
// Infobulle du bouton
tipLabel: 'Légende',
// Visibilité des groupes (défaut : 'children')
// 'none' : les groupes n'ont pas de case à cocher
// 'children' : le changement d'état de visibilité d'un groupe change l'état
de ses enfants vers le même état
// 'group' : le changement d'état de visibilité d'un groupe ne change pas
l'état de visibilité de ses enfants
groupSelectStyle:'children'
});
 Style des couches
Nous souhaitons maintenant ajouter un peu de couleur (style par catégorie) et de quoi
identifier nos objets (étiquettes).

Nous avons vu que la définition du style d’une couche est fixe. Pour la modifier, il faut
comprendre que lors de l’affichage des objets, Open Layer appelle la définition du style de la
couche pour chaque objet. Ainsi, si nous modifions cette définition à la volée, pour chaque
objet, il devient possible d’avoir un style dynamique, mis à jour pour chaque objet.
Pour faire tout cela, intéressons nous à l’option style de l’objet [Link] (la
couche de données). D’après la documentation, cette option doit avoir comme valeur un
objet de type [Link] . Ce qui est intéressant c’est que cet objet peut être
remplacé par une fonction qui renvoi ce type d’objet et à laquelle sera automatiquement
passé deux paramètres : l’objet affiché (ainsi pour chaque objet, la fonction renverra un style
spécifique) et la résolution de la vue actuellement utilisée (ainsi selon le niveau de zoom, le
style peut être différent).

Nous allons donc modifier la définition du style que nous avons précédemment utilisé grâce
à une fonction et utiliser le résultat de cette fonction dans notre couche :

ol_data_vector.js-Fonction spécifique
// On conserve la définition du style de la donnée vecteur, ajoutez ce qui suit juste à la
suite du style de la données vecteur.
// Remplacez également la définition de la couche de données
// On défini d'abord un style spécifique pour chaque valeur
// On ne changera que la propriété image de l'objet [Link]
var ol_style_layer_exemple_style_specifique = {
// Style par défaut
'Défaut' : new [Link]({
// Image source à utiliser

src:'[Link]
// Echelle de l'image (défaut : 1)
scale:0.5,
// Rotation de l'icone avec la vue (défaut : false)
rotateWithView: true,
}),
// Style pour la valeur 1
'Lucinges' : new [Link]({
// Image source à utiliser

src:'[Link]
// Echelle de l'image (défaut : 1)
scale:0.5,
// Rotation de l'icone avec la vue (défaut : false)
rotateWithView: true,
}),
// Style pour la valeur 2
'Saint-Gervais' : new [Link]({
// Image source à utiliser

src:'[Link]
// Echelle de l'image (défaut : 1)
scale:0.5,
// Rotation de l'icone avec la vue (défaut : false)
rotateWithView: true,
}),
}
// Fonction de modification du style initial
function ol_style_layer_exemple_fct(feature, resolution) {
// Modification de l'étiquette
// On récupère l'objet [Link]
// On défini la valeur de la propriété "text" comme étant la valeur de l'attribut
"name" de chaque objet
ol_style_layer_exemple.getText().setText([Link]('name'));
// Modification de l’icône
// Si la définition spécifique existe
if (ol_style_layer_exemple_style_specifique[[Link]('name')] != null) {
// On défini la valeur de la propriété "image" comme étant l'objet définit dans
ol_style_layer_exemple_style_specifique et portant un nom égal à l'attribut "name" de chaque
objet

ol_style_layer_exemple.setImage(ol_style_layer_exemple_style_specifique[[Link]('name')
]);
}
// Sinon on utilise la définition par défaut
else {

ol_style_layer_exemple.setImage(ol_style_layer_exemple_style_specifique['Défaut']);
};

return ol_style_layer_exemple;
}
// Définition de la couche de données
// On utilise la fonction plutôt que le style initial
var data_vecteur_layer_exemple = new [Link]({
// Opacité de la couche (défaut : 1)
//opacity: 1,
// Visibilité de la couche (défaut : true)
//visible: true,
// Résolutions minimum (niveau de zoom) incluse d'affichage de la couche en unité de
carte par pixel
//minResolution:25,
// Résolutions maximum (niveau de dézoom) exclue d'affichage de la couche en unité de
carte par pixel
//maxResolution:500,
// Niveau de superposition de la couche (défaut : 0)
//zIndex: 0,
// Emprise de rendu maximum
// Emprise en xmin, ymin, xmax, ymax en 3857
//extent: [],
// Ordre de rendu de la couche (ordre de dessin des couches)
//renderOrder: 1,
// Zone en pixel autour de la carte jusqu'ou la couche sera dessinée après chaque
déplacement (défaut : 100)
//renderBuffer: 100,
// Mode de rendu de la couche (défaut : 'vector')
// 'vector' : Rendu vecteur : plus précis durant les animations mais
plus lourd
// 'image' : Rendu image : moins précis durant les animations mais plus
léger, les point et les étiquettes tournent avec la vue
//renderMode: 'vector',***
// Gestion des conflits entre les objets (défaut : false)
// Lorsqu'activé, la priorité des objets est définit avec la propriété
zIndex du style
//declutter: false,
// Extension LayerSwitcher : Titre de la couche
title: 'Couche exemple',
// Source de la données
source: ol_source_layer_exemple,
// Style de la couche
// On utilise la fonction plutôt que le style initial.
// L'objet à afficher et la résolution seront passés à la fonction comme
arguments
style: ol_style_layer_exemple_fct,
})
 6-Interaction avec la carte
Il est possible d’interagir avec la carte depuis « l’extérieur » de celle-ci. Par exemple, cliquer
sur un bouton pour zoomer quelque part.

Pour cela, il suffit d’utiliser les nombreuses méthodes disponibles avec la carte et de les
associer avec des boutons.
Dans mon exemple, je souhaite avoir deux boutons qui permettent de zoomer sur deux
emplacements différents. Pour cela, nous devons modifier la vue de notre carte
(variable vue_carte du fichier ol_map.js dans notre projet) car c’est la vue qui contrôle
l’emprise visualisée.
Nous allons faire deux modifications en utilisant les méthodes à disposition pour les
objets [Link] :
 Changer le zoom avec setResolution .
 Changer la position avec setCenter .

[Link]
<!-- Ajoutez ce code juste en dessous de votre carte -->

<!-- Boutons de localisation de la page -->

<div class="btn_localisation">
<!-- On fixe le niveau de zoom à 10 mètres par pixel : -->
<!-- vue_carte.setResolution(10) -->
<!-- On centre la carte sur un point dont les sont reprojetées dans le SRID
de la carte car les coordonnées sont en latitude longitude : -->
<!-- vue_carte.setCenter([Link]([6.711486, 45.892829])) -->
<button type="button"
onclick="vue_carte.setResolution(10);vue_carte.setCenter([Link]([6.71148
6, 45.892829]));">Localisation 1</button>
<button type="button"
onclick="vue_carte.setResolution(10);vue_carte.setCenter([Link]([6.31843
5, 46.190029]));">Localisation 2</button>
</div>
 ol_style.css
/* Ce code CSS n'est pas essentiel mais avoir un peu de style ne fait jamais de mal
*/

/* Bouton */
.btn_localisation{
margin: 20px 0px;

text-align: center;
}

.btn_localisation button {
display: inline-block;
height:35px;
width: 150px;

margin: 0px 20px;

border: 1px solid #1e2446;

border-radius: 5px;

font-family: 'Quicksand', sans-serif;

color: #fff;

background-color: #AF00FF;
background-image: linear-gradient(332deg, #009FFF 0%, #AF00FF 100%);

transition: all 0.4s;

}

.btn_localisation button:hover {
background-color: rgb(125, 0, 184);
background-image: linear-gradient(332deg, rgb(3, 123, 197) 0%, rgb(125, 0,
184) 100%);

box-shadow: 0px 0px 10px #000;

cursor: pointer;

transition: all 0.4s;

}
 7-Résolution de carte
Vous avez noté que nous parlons de « résolution » pour le niveau de zoom. En effet, il n’est
pas possible de connaitre les caractéristiques des écrans qui vont afficher la carte. Ainsi, il
n’est pas possible de connaitre l’échelle exacte de l’affichage final.

Ainsi, le niveau de zoom est défini par rapport à une résolution : un nombre de mètre de
carte par pixel affiché à l’écran. Par exemple, dans l’exemple précédent on zoom sur un
emplacement en définissant la résolution à 10 : 10 mètres de la carte par pixel affiché. Ainsi,
100 pixels de votre écran affichent 1 km.

Pour calculer l’échelle d’affichage, il faut impérativement connaitre la résolution de votre

écran car c’est elle qui renseignera sur le nombre de pixel par centimètre affichés par celui-
ci.

Par exemple, si votre écran possède une résolution de 150 dpi (dot per inch : point par
pouce), il affiche environ 60 pixels par centimètre. Ainsi :
 Résolution de l’écran : 150 dpi : 60 pixels = 1 cm écran
 Résolution de la carte : 1 pixel = 10 m carte
 1 cm écran = 60 pixels = 600 m carte ou 60 000 cm carte
 => Échelle = 1 : 60 000
La formule à utiliser est la suivante : Echelle = 1 : Rmap * ( Rscreen / 0,0254 )
 Rscreen : résolution de l’écran en dpi (dot per inch) ou ppp (point par pouce)
 Rmap : résolution de la carte en mètre par pixel

8-Exemple final
Voila un petit exemple avec un peu plus de CSS