.webp)
Vous souhaitez intégrer des données géographiques, comme le cadastre ou des couches thématiques, dans une carte interactive ?
Grâce aux services web de l’IGN et à OpenStreetMap, il est possible de créer une carte interactive personnalisée directement dans une page HTML.
Les services IGN (Institut National de l'Information Géographique et Forestière) proposent une large gamme de couches géographiques (cadastre, réseaux routiers, utilisation des terres, etc.) disponibles en WMTS.
Pour plus de détails sur les services disponibles, consultez la documentation officielle : https://geoservices.ign.fr/services-geoplateforme-diffusion.
Voici un exemple de code HTML pour afficher une carte OpenStreetMap avec la couche "Cadastre" ajoutée à l’aide des services IGN :
<!DOCTYPE html>
<html>
<head>
<title>Carte OSM avec couches IGN</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
<style>
#map {
height: 900px;
width: 100%;
}
body {
margin: 0;
padding: 20px;
}
</style>
</head>
<body>
<h2>Carte interactive avec les données IGN</h2>
<div id="map"></div>
<script>
// Initialisation de la carte centrée sur la France
const map = L.map('map').setView([46.85, 2.35], 6);
// Couche OpenStreetMap
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Exemple de couche IGN : Cadastre
const wmsLayerCadastre = L.tileLayer('https://data.geopf.fr/wmts?' +
'&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM' +
'&LAYER=CADASTRALPARCELS.PARCELLAIRE_EXPRESS&STYLE=normal' +
'&FORMAT=image/png&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}', {
attribution: '© IGN',
tileSize: 256
});
// Ajout des couches au contrôle Leaflet
const baseMaps = { "OpenStreetMap": osmLayer };
const overlayMaps = { "Cadastre": wmsLayerCadastre };
L.control.layers(baseMaps, overlayMaps).addTo(map);
// Activation par défaut de la couche Cadastre
wmsLayerCadastre.addTo(map);
// Ajout d'une échelle
L.control.scale({ imperial: false }).addTo(map);
</script>
</body>
</html>
Vous pouvez facilement remplacer la couche "Cadastre" par d’autres couches proposées par l’IGN :
Utilisation des terres agricoles: LANDUSE.AGRICULTURE2021
Couche satellite : ORTHOIMAGERY.ORTHOPHOTOS
Réseau routier : TRANSPORTNETWORKS.ROADS
N’oubliez pas de vérifier le format de l’image (image/png, image/jpeg, etc ...) pour chaque couche.
Prêt à personnaliser vos cartes ?
Les services de l’IGN offrent une incroyable flexibilité pour intégrer des données géographiques précises dans vos projets.
Vous souhaitez intégrer openstreepmap dans une application WinDev, WebDev ou WinDev Mobile ? N’hésitez pas à nous contacter pour plus d'informations !
.webp)
