guillaumebdx · December 11, 2020 14:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Exemple d'utilisation de Leaflet et d'OpenStreetMap</title>

    <style>
        html, body, #map {
            width: 100%; height: 100%;
            margin: 0px; padding: 0px;
            overflow: hidden;
        }
    </style>

    <!-- On charge la CSS leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

    <!-- On charge le code JavaScript de la librairie leaflet -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>


 </head>

 <body>

 <!-- Le tag HTML qui correspondra à notre cartographie -->
 <div id="map"></div>

 <script>
    window.addEventListener( "load", function( event ) {
        var map = L.map( 'map' /* the id of the tag used for map injection */ );
        map.setView( [43.7991 /*latitude*/, 6.72545 /*longitude*/], 12 /*zoom*/ );


        // --- We add a layer based on OpenStreetMap ---
        L.tileLayer( 'http://tile.openstreetmap.org/{z}/{x}/{y}.png' ).addTo(map);   // Base Map

        // --- We add a circle to the map ---
        var circle = L.circle( [ 43.7991, 6.72545 ] , {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 200
        }).addTo(map);

        // --- We add a polygon to the map ---
        var polygon = L.polygon([
            [ 43.7949098,6.7109003 ],
            [ 43.773007,6.7012349 ],
            [ 43.7779801,6.7306691 ]
        ]).addTo(map);


        // --- We add a marker, with events, to the map ---
        var marker = L.marker( [ 43.7991, 6.72545 ] )
            .bindPopup( "Infini Software" )
            .addTo( map );
        marker.on( "mouseover", function( event ) {
            this.openPopup();
        });
        marker.on( "mouseout", function( event ) {
            this.closePopup();
        });

        // --- We add a new layer to the map that contains some markers ---
        var seranon = L.marker( [ 43.773007,6.7012349 ] )
                .bindPopup( 'Village de Seranon' ),
            caille      = L.marker( [ 43.7779801,6.7306691 ] )
                .bindPopup( 'Village de Caille' ),
            valderoure  = L.marker( [ 43.7949098,6.7109003 ] )
                .bindPopup( 'Village de Valderoure' ),
            laFerriere  = L.marker( [ 43.7990248,6.7306592 ] )
                .bindPopup( 'Village de La Ferriere' );

        L.layerGroup([seranon, caille, valderoure, laFerriere])
            .addTo( map );
    });
 </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Exemple d'utilisation de Leaflet et d'OpenStreetMap</title>

	<style>
	html, body, #map {
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	overflow: hidden;
	}
	</style>

	<!-- On charge la CSS leaflet -->
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

	<!-- On charge le code JavaScript de la librairie leaflet -->
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>


	</head>

	<body>

	<!-- Le tag HTML qui correspondra à notre cartographie -->
	<div id="map"></div>

	<script>
	window.addEventListener( "load", function( event ) {
	var map = L.map( 'map' /* the id of the tag used for map injection */ );
	map.setView( [43.7991 /latitude/, 6.72545 /longitude/], 12 /zoom/ );


	// --- We add a layer based on OpenStreetMap ---
	L.tileLayer( 'http://tile.openstreetmap.org/{z}/{x}/{y}.png' ).addTo(map); // Base Map

	// --- We add a circle to the map ---
	var circle = L.circle( [ 43.7991, 6.72545 ] , {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	radius: 200
	}).addTo(map);

	// --- We add a polygon to the map ---
	var polygon = L.polygon([
	[ 43.7949098,6.7109003 ],
	[ 43.773007,6.7012349 ],
	[ 43.7779801,6.7306691 ]
	]).addTo(map);


	// --- We add a marker, with events, to the map ---
	var marker = L.marker( [ 43.7991, 6.72545 ] )
	.bindPopup( "Infini Software" )
	.addTo( map );
	marker.on( "mouseover", function( event ) {
	this.openPopup();
	});
	marker.on( "mouseout", function( event ) {
	this.closePopup();
	});

	// --- We add a new layer to the map that contains some markers ---
	var seranon = L.marker( [ 43.773007,6.7012349 ] )
	.bindPopup( 'Village de Seranon' ),
	caille = L.marker( [ 43.7779801,6.7306691 ] )
	.bindPopup( 'Village de Caille' ),
	valderoure = L.marker( [ 43.7949098,6.7109003 ] )
	.bindPopup( 'Village de Valderoure' ),
	laFerriere = L.marker( [ 43.7990248,6.7306592 ] )
	.bindPopup( 'Village de La Ferriere' );

	L.layerGroup([seranon, caille, valderoure, laFerriere])
	.addTo( map );
	});
	</script>
	</body>

	</html>