Comment réaliser une carte sur le web ?

Le webmapping est par définition la cartographie dynamique sur internet. On utilise différentes technologies tels les langages HTML, PHP, JAVA, Python et JavaScript et on y associe souvent les bibliothèques OpenLayers, Leaflet ou encore l’API (Application Programming Interface en anglais) Google Maps.
L’objet spatial peut être un point, une ligne, un polygone ou une collection de ces géométries pour les vecteurs ou un tableau de pixels pour les rasters. Chaque bibliothèque précitée gère ces différents formats de données spatiales. Ces dernières sont déclarées directement dans le script ou on peut « appeler » une donnée stockée dans un répertoire, dans une base de données ou encore dans un serveur cartographique.

Voici ci-après le code et le résultat d’une carte simple réalisée avec OpenLayers :

<!DOCTYPE html>
<html>
	<head>
		<title>Simple carte avec Openlayers v3</title>
		<!-- Chargement du fichier de style Openlayers -->
		<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
		<!-- Pour des anciens navigateurs -->
		<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
		<!-- Chargement de la bibliothèque Javascript Openlayers -->
		<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
	</head>
	<body>
		<!-- Déclaration de la div map dans le corps du code -->
		<div id="map" class="map"></div>
		<!-- Code Javascript pour l'appel de la carte et des sources affichées -->
		<script>
			var couche = new ol.layer.Tile({
				/* Chargement d'une source de données Openlayers*/
				source: new ol.source.Stamen({ layer: 'watercolor' })
			})
			/* Déclaration de la carte */
			var map = new ol.Map({
				/* Déclaration des couches de la carte */
				layers: [couche],
				/* Cible de la div map */
				target: 'map',
				/* Caractéristiques de la vue de la carte */
				view: new ol.View({
					center: ol.proj.transform( [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
					zoom: 12
				})
			});
		</script>
	</body>
</html>
Partager l'article
Taggé , , , .Mettre en favori le Permaliens.

A propos Florian Delahaye

Passionné de Géomatique

Une réponse à Comment réaliser une carte sur le web ?

  1. elnofey dit :

    Bonjour, dans le cadre d’un projet je réfléchis à utiliser QGIS, j’aimerais publier sur un site privé une carte de France avec les département associé à des couleurs et que l’utilisateur puisse changer les couleurs selon ses choix.
    Pensez vous que c’est possible?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *