IGN

Géoservices IGN

Choisir Géoportail - Quickstart

Dernière mise à jour : 5 Octobre 2018

Pour afficher la carte suivante dans votre page web :

Copiez le code suivant dans votre page :

<!DOCTYPE html>
<html>
<head>
    <title>Géoservices - Carte simple</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Map with Leaflet JS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>

    <!-- Leaflet map JavaScript -->
    <script>
        // The id of map container ex <div id="map"></div>
        var mapID = 'map';
        // Get IGN tiles    
        var PlanIGN = L.tileLayer('https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?'+
            '&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM'+
            '&LAYER={ignLayer}&STYLE={style}&FORMAT={format}'+
            '&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}',
            {
	            ignApiKey: 'choisirgeoportail',
	            ignLayer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGN',
	            style: 'normal',
	            format: 'image/jpeg',
	            service: 'WMTS',
	            attribution: '&copy; <a href="http://www.ign.fr/">IGN</a>'
        });
        // Center of map and marker localisation
        var myCenter = [48.8456,2.4245];
        // My map
        var myMap = L.map(mapID, {
	        center: myCenter,
	        zoom: 16,
	        layers: [PlanIGN]
        });
        // My marker
        var myMarker = L.marker(myCenter).addTo(myMap);
        myMarker.bindPopup("<b>IGN</b><br />73 avenue de Paris<br />94160 SAINT-MANDÉ").openPopup();
    </script>

</body>
</html>