mastersigat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Ajouter des données OSM, des données hébérgées dans le Studio de Mapbox
Personnaliser un menu de gestion des couches

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      #menu {
    width: 15%; margin-right: auto; margin-left: auto;
    Z-index: 1; top: 10px; right: 10px; position: absolute;
    border-color: #FFFFFF; background-color: #808080 ;
    font-size: 12px; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; }

#menu a {
    display: block; color: #FFFFFF; padding: 8px 16px;
    text-align: center;  font-weight: bold;
    border-style: solid; border-color: #000000;}

#menu a.active { background-color: #CC6600;
    color: #FFFFFF;}

#menu a:hover:not(.active) {
    background-color:  #CC6600;
    color: #FFFFFF;}

    </style>
</head>
<body>

<div id='map'><div id="menu"></div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/ninanoun/ciyo7h3mc001q2rpngdsa9zwh', // stylesheet location
    center: [-1.68, 48.12], // starting position [lng, lat]
    zoom: 15,
    pitch: 50, //Inclinaison
    bearing: -10 // Rotation
});

  map.on('load', function () {

 map.addSource('mapbox-streets-v7', {
   type: 'vector',
   url: 'mapbox://mapbox.mapbox-streets-v7'});

  map.addLayer({
        "id": "Routes",
        "type": "line",
        "source": "mapbox-streets-v7",
        "layout": {'visibility': 'none'},
        "source-layer": "road",
        "paint": {"line-color": "#ff8533", "line-width": 0.5}
    });

map.addLayer({
        "id": "Hydrologie",
        "type": "line",
        "source": "mapbox-streets-v7",
        "source-layer": "waterway",
        "layout": {'visibility': 'none'},
        "paint": {"line-color": "#4dd2ff",
            "line-width": 3}
    });

    // Ajout arbres


map.addSource('Arbres', {
        type: 'vector',
        url: 'mapbox://ninanoun.dx1cg9bg'});

map.addLayer({
        'id': 'Arbres',
        'type': 'circle',
        'source': 'Arbres',
        'source-layer': 'arbres-d-alignement-rennes-a5jtaq',
        'layout': {'visibility': 'none'},
        'paint': {'circle-radius': 3, 'circle-color': '#0df634',}
    });


        map.addLayer({
        "id": "Batiments",
        "type": "fill",
        "source": "mapbox-streets-v7",
        "source-layer": "building",
        "layout": {'visibility': 'visible'},
        "paint": {"fill-color": "#d1e0e0"}
    });


    //Proprietes

map.addSource('Proprietes', {
        type: 'vector',
        url: 'mapbox://ninanoun.a4kdgiot'
    });

map.addLayer({
        'id': 'Proprietes',
        'type': 'line',
        'source': 'Proprietes',
        'source-layer': 'limites_proprietes',
        'layout': {'visibility': 'none',
        'line-join': 'round','line-cap': 'round'},
        'paint': {'line-color': '#FFFFFF', 'line-width': 1.5}
});

     // Ajouts bartiments 3D

 // Ajout batiments 3D

map.addLayer({
        'id': 'Batimenst_3D',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {'fill-extrusion-color': '#FFFFFF', 'fill-extrusion-height':
        {'type': 'identity','property': 'height'},
        'fill-extrusion-base': {'type': 'identity','property': 'min_height'},
        'fill-extrusion-opacity': 0.9
        }
    });

    });
  //Interactivité HOVER

var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false });

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['Arrets'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

        popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.nom)
        .addTo(map);

});

  // Sélecteur de couches


var toggleableLayerIds = [ 'Routes', 'Hydrologie', 'Proprietes', 'Arbres'];

for (var i = 0; i < toggleableLayerIds.length; i++) {var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'inactive';
    link.textContent = id;

    link.onclick = function (e) {var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();
        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';} else {this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');} };

var layers = document.getElementById('menu');  layers.appendChild(link); }


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Display a map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#menu {
	width: 15%; margin-right: auto; margin-left: auto;
	Z-index: 1; top: 10px; right: 10px; position: absolute;
	border-color: #FFFFFF; background-color: #808080 ;
	font-size: 12px; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; }

	#menu a {
	display: block; color: #FFFFFF; padding: 8px 16px;
	text-align: center; font-weight: bold;
	border-style: solid; border-color: #000000;}

	#menu a.active { background-color: #CC6600;
	color: #FFFFFF;}

	#menu a:hover:not(.active) {
	background-color: #CC6600;
	color: #FFFFFF;}

	</style>
	</head>
	<body>

	<div id='map'><div id="menu"></div>
	</div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/ninanoun/ciyo7h3mc001q2rpngdsa9zwh', // stylesheet location
	center: [-1.68, 48.12], // starting position [lng, lat]
	zoom: 15,
	pitch: 50, //Inclinaison
	bearing: -10 // Rotation
	});

	map.on('load', function () {

	map.addSource('mapbox-streets-v7', {
	type: 'vector',
	url: 'mapbox://mapbox.mapbox-streets-v7'});

	map.addLayer({
	"id": "Routes",
	"type": "line",
	"source": "mapbox-streets-v7",
	"layout": {'visibility': 'none'},
	"source-layer": "road",
	"paint": {"line-color": "#ff8533", "line-width": 0.5}
	});

	map.addLayer({
	"id": "Hydrologie",
	"type": "line",
	"source": "mapbox-streets-v7",
	"source-layer": "waterway",
	"layout": {'visibility': 'none'},
	"paint": {"line-color": "#4dd2ff",
	"line-width": 3}
	});

	// Ajout arbres


	map.addSource('Arbres', {
	type: 'vector',
	url: 'mapbox://ninanoun.dx1cg9bg'});

	map.addLayer({
	'id': 'Arbres',
	'type': 'circle',
	'source': 'Arbres',
	'source-layer': 'arbres-d-alignement-rennes-a5jtaq',
	'layout': {'visibility': 'none'},
	'paint': {'circle-radius': 3, 'circle-color': '#0df634',}
	});


	map.addLayer({
	"id": "Batiments",
	"type": "fill",
	"source": "mapbox-streets-v7",
	"source-layer": "building",
	"layout": {'visibility': 'visible'},
	"paint": {"fill-color": "#d1e0e0"}
	});


	//Proprietes

	map.addSource('Proprietes', {
	type: 'vector',
	url: 'mapbox://ninanoun.a4kdgiot'
	});

	map.addLayer({
	'id': 'Proprietes',
	'type': 'line',
	'source': 'Proprietes',
	'source-layer': 'limites_proprietes',
	'layout': {'visibility': 'none',
	'line-join': 'round','line-cap': 'round'},
	'paint': {'line-color': '#FFFFFF', 'line-width': 1.5}
	});

	// Ajouts bartiments 3D

	// Ajout batiments 3D

	map.addLayer({
	'id': 'Batimenst_3D',
	'source': 'composite',
	'source-layer': 'building',
	'filter': ['==', 'extrude', 'true'],
	'type': 'fill-extrusion',
	'minzoom': 15,
	'paint': {'fill-extrusion-color': '#FFFFFF', 'fill-extrusion-height':
	{'type': 'identity','property': 'height'},
	'fill-extrusion-base': {'type': 'identity','property': 'min_height'},
	'fill-extrusion-opacity': 0.9
	}
	});

	});
	//Interactivité HOVER

	var popup = new mapboxgl.Popup({
	closeButton: false,
	closeOnClick: false });

	map.on('mousemove', function(e) {
	var features = map.queryRenderedFeatures(e.point, { layers: ['Arrets'] });
	// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

	if (!features.length) {
	popup.remove();
	return;
	}

	var feature = features[0];

	popup.setLngLat(feature.geometry.coordinates)
	.setHTML(feature.properties.nom)
	.addTo(map);

	});

	// Sélecteur de couches


	var toggleableLayerIds = [ 'Routes', 'Hydrologie', 'Proprietes', 'Arbres'];

	for (var i = 0; i < toggleableLayerIds.length; i++) {var id = toggleableLayerIds[i];

	var link = document.createElement('a');
	link.href = '#';
	link.className = 'inactive';
	link.textContent = id;

	link.onclick = function (e) {var clickedLayer = this.textContent;
	e.preventDefault();
	e.stopPropagation();
	var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
	if (visibility === 'visible') {
	map.setLayoutProperty(clickedLayer, 'visibility', 'none');
	this.className = '';} else {this.className = 'active';
	map.setLayoutProperty(clickedLayer, 'visibility', 'visible');} };

	var layers = document.getElementById('menu'); layers.appendChild(link); }


	</script>

	</body>
	</html>