mastersigat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<html>

<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
  <link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />

  <style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

    .Mypopup .mapboxgl-popup-content {
      background-color: black;
      color : white;
      opacity : 0.7;
}

        .menu {
     position: absolute;
     top: 10px;
     left: 30px;
     width: 180px;
     background-color: #FFFFFF;
     opacity: 0.89;
     color: #000000;
     font: 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
      padding:10;
        }


  </style>

  </head>

  <body>

  <div id="map"></div>

    <div class='menu'>
    <hr>
<label class="categoryLabel"><B>Données Réferentielles</B></label>
          <br>
 <input type="checkbox" id="Batiments" value="Batiments" onchange="switchlayer('Batiments')" checked/>
<label for="Batiments">Batiments</label>
          <hr>
<label class="categoryLabel"><B>Données TC</B></label>
          <br>
<input type="checkbox" id="Stations" value="Stations" onchange="switchlayer('Stations')" checked/>
<label for="Stations">Stations de métro</label>
          <br>
<input type="checkbox" id="Lignes" value="Lignes" onchange="switchlayer('Lignes')" checked/>
<label for="Lignes">Lignes de métro</label>
  <hr>
</div>
<script>

      //Appel et configuration de la carte

var map = new mapboxgl.Map({
  container: 'map',
  style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json', //Fond de carte
  zoom: 15.3, // Zoom
  center: [-1.68, 48.106],  // Centrage carte
  pitch: 60, // Inclinaison carte
  bearing: -50,  // Rotation carte
  minZoom:14.5
    });

  // Ajout des données

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

map.addSource('Batiments', {
        type: 'geojson',
        data: 'https://raw.githubusercontent.com/mastersigat/data/main/BatiRennes.geojson'
    });

map.addLayer({
    'id': 'Batiments',
    'type': 'fill-extrusion',
    'source': 'Batiments',
	'paint':
	{'fill-extrusion-color': '#A9A9A9',
        'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
        'fill-extrusion-color': {
        'property': 'HAUTEUR',
        'stops': [
          [5, '#1a9850'],
          [7, '#91cf60'],
          [9, '#d9ef8b'],
          [12, '#ffffbf'],
      	  [16, '#fee08b'],
	  [20, '#fc8d59'],
          [30, '#d73027']]},
	 'fill-extrusion-opacity': 0.7,
         'fill-extrusion-base': 0}
    });

     // Ajout lignes de metros

     map.addSource('lignes', {
            type: 'geojson',
            data: 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-traces-de-laxe-des-lignes.geojson'
        });

     map.addLayer({
            'id': 'Lignes',
            'type': 'line',
            'source': 'lignes',
            'paint': {'line-opacity': 0.7, 'line-width': 7,
                     'line-color': '#0074D9'}
     });

     // Ajout stations de metros

  map.addSource('Stations', {
            type: 'geojson',
            data: 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-localisation-des-stations.geojson'
        });

     map.addLayer({
            'id': 'Stations',
            'type': 'circle',
            'source': 'Stations',
            'paint': {'circle-stroke-color': 'white',
                      'circle-stroke-width': 3,
                      'circle-radius' : 6,
                      'circle-color': '#0074D9'}}
                 );
         });


  //Interactivité HOVER

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

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['Stations'] });
    // 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('<b>'+ feature.properties.nom + '</b>')
        .addTo(map);

});

  // Configuration affichage menu couches
 switchlayer = function (lname) {
            if (document.getElementById(lname ).checked) {
                map.setLayoutProperty(lname, 'visibility', 'visible');
            } else {
                map.setLayoutProperty(lname, 'visibility', 'none');
           }
        };


    // Ajout controle de navigation et echelle

map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));

map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));


</script>

</body>
</html>
	<html>

	<head>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
	<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />

	<style>
	#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

	.Mypopup .mapboxgl-popup-content {
	background-color: black;
	color : white;
	opacity : 0.7;
	}

	.menu {
	position: absolute;
	top: 10px;
	left: 30px;
	width: 180px;
	background-color: #FFFFFF;
	opacity: 0.89;
	color: #000000;
	font: 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	padding:10;
	}



	</style>

	</head>

	<body>

	<div id="map"></div>

	<div class='menu'>
	<hr>
	<label class="categoryLabel"><B>Données Réferentielles</B></label>
	<br>
	<input type="checkbox" id="Batiments" value="Batiments" onchange="switchlayer('Batiments')" checked/>
	<label for="Batiments">Batiments</label>
	<hr>
	<label class="categoryLabel"><B>Données TC</B></label>
	<br>
	<input type="checkbox" id="Stations" value="Stations" onchange="switchlayer('Stations')" checked/>
	<label for="Stations">Stations de métro</label>
	<br>
	<input type="checkbox" id="Lignes" value="Lignes" onchange="switchlayer('Lignes')" checked/>
	<label for="Lignes">Lignes de métro</label>
	<hr>
	</div>
	<script>

	//Appel et configuration de la carte

	var map = new mapboxgl.Map({
	container: 'map',
	style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json', //Fond de carte
	zoom: 15.3, // Zoom
	center: [-1.68, 48.106], // Centrage carte
	pitch: 60, // Inclinaison carte
	bearing: -50, // Rotation carte
	minZoom:14.5
	});

	// Ajout des données

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

	map.addSource('Batiments', {
	type: 'geojson',
	data: 'https://raw.githubusercontent.com/mastersigat/data/main/BatiRennes.geojson'
	});

	map.addLayer({
	'id': 'Batiments',
	'type': 'fill-extrusion',
	'source': 'Batiments',
	'paint':
	{'fill-extrusion-color': '#A9A9A9',
	'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
	'fill-extrusion-color': {
	'property': 'HAUTEUR',
	'stops': [
	[5, '#1a9850'],
	[7, '#91cf60'],
	[9, '#d9ef8b'],
	[12, '#ffffbf'],
	[16, '#fee08b'],
	[20, '#fc8d59'],
	[30, '#d73027']]},
	'fill-extrusion-opacity': 0.7,
	'fill-extrusion-base': 0}
	});

	// Ajout lignes de metros

	map.addSource('lignes', {
	type: 'geojson',
	data: 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-traces-de-laxe-des-lignes.geojson'
	});

	map.addLayer({
	'id': 'Lignes',
	'type': 'line',
	'source': 'lignes',
	'paint': {'line-opacity': 0.7, 'line-width': 7,
	'line-color': '#0074D9'}
	});

	// Ajout stations de metros

	map.addSource('Stations', {
	type: 'geojson',
	data: 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-localisation-des-stations.geojson'
	});

	map.addLayer({
	'id': 'Stations',
	'type': 'circle',
	'source': 'Stations',
	'paint': {'circle-stroke-color': 'white',
	'circle-stroke-width': 3,
	'circle-radius' : 6,
	'circle-color': '#0074D9'}}
	);
	});


	//Interactivité HOVER

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

	map.on('mousemove', function(e) {
	var features = map.queryRenderedFeatures(e.point, { layers: ['Stations'] });
	// 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('<b>'+ feature.properties.nom + '</b>')
	.addTo(map);

	});

	// Configuration affichage menu couches
	switchlayer = function (lname) {
	if (document.getElementById(lname ).checked) {
	map.setLayoutProperty(lname, 'visibility', 'visible');
	} else {
	map.setLayoutProperty(lname, 'visibility', 'none');
	}
	};


	// Ajout controle de navigation et echelle

	map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));

	map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));


	</script>

	</body>
	</html>