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>
Taggé , , , .Mettre en favori le Permaliens.

A propos Florian Delahaye

Fondateur et Administrateur de Geomatick. Consultant en Géomatique. Docteur en Géographie, Spécialités en SIG et Télédétection.

Laisser un commentaire

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