mastersigat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<html>
<head>
<title>A Leaflet map!</title>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<style>
#map { position:absolute; top:0; bottom:0; width:100%; }</style>

</head>

<body>

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

<script>

  // Initialiser la carte

var map = L.map('map', {
                 center: [48.11, -1.66],
                 zoom: 14 });


  // Ajout fonds de carte (tile et WMS)

var baselayers = {

	// Services de tuiles

     OSM: L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'),
     ESRI: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'),
     CartoDB: L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png')};baselayers.CartoDB.addTo(map);

  // Echelle cartographique

L.control.scale().addTo(map);


 // Selecteur de fond de carte

 var controlLayers = L.control.layers(baselayers, null,{collapsed:false}).addTo(map);


 // Ajout couche Ligne de metros

 var url1 = 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-traces-de-laxe-des-lignes.geojson';

$.getJSON(url1, function (geojson) {
  var geojsonLayer = L.geoJson(geojson, {
    style: function (feature) {
      return {
      color: '#DC143C',
      fillOpacity: 0.0,
	  opacity: 1,
      stroke: true
      }
    }
  }).addTo(map);
  controlLayers.addOverlay(geojsonLayer, 'Lignes de métro');
});


// Ajout des Stations de métros

var url2 = 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-localisation-des-stations.geojson';

$.getJSON(url2, function (geojson) {
  var metros = L.geoJson(geojson,
{

      // We make the points circles instead of markers so we can style them
      pointToLayer: function (geoJsonPoint, latlng) {
        return L.circleMarker(latlng);
      },

      // Then we can style them as we would other features
      style: function (geoJsonFeature) {
        return {
          fillColor: '#ff4f68',
          radius: 7,
          fillOpacity: 0.8,
          stroke: true,
		  };
      },
    }
	).addTo(map);

	//Ajout de popup sur chaque objet
metros.bindPopup(function(metros) {console.log(metros.feature.properties);
return "<h1>"+metros.feature.properties.nom+"</h1>"+"<hr><h2> Ligne : " +metros.feature.properties.ligne+ "</h2>" ;
});

controlLayers.addOverlay(metros, 'Stations de métro');
});


	// Ajout des Stations de vélos

var url3 = 'https://raw.githubusercontent.com/mastersigat/data/main/velostar.geojson';

$.getJSON(url3, function (geojson) {
  var velos = L.geoJson(geojson,
{

      // We make the points circles instead of markers so we can style them
      pointToLayer: function (geoJsonPoint, latlng) {
        return L.circleMarker(latlng);
      },

      // Then we can style them as we would other features
      style: function (geoJsonFeature) {
        return {
          fillColor: '#001f3f',
          radius: 6,
          fillOpacity: 0.7,
          stroke: false
		  };
      },
   }).addTo(map);

velos.bindPopup(function(velos) {console.log(velos.feature.properties);
return "<h1> Station : "+velos.feature.properties.nom+"</h1>"+"<hr><h2>" +velos.feature.properties.nombreemplacementstheorique+ "&nbsp; vélos</h2>" ;
});

controlLayers.addOverlay(velos, 'Stations de vélos');
});

</script>

</body>
</html>
	<html>
	<head>
	<title>A Leaflet map!</title>
	<meta charset="UTF-8">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

	<style>
	#map { position:absolute; top:0; bottom:0; width:100%; }</style>

	</head>

	<body>

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

	<script>

	// Initialiser la carte

	var map = L.map('map', {
	center: [48.11, -1.66],
	zoom: 14 });


	// Ajout fonds de carte (tile et WMS)

	var baselayers = {

	// Services de tuiles

	OSM: L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'),
	ESRI: L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'),
	CartoDB: L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png')};baselayers.CartoDB.addTo(map);

	// Echelle cartographique

	L.control.scale().addTo(map);


	// Selecteur de fond de carte

	var controlLayers = L.control.layers(baselayers, null,{collapsed:false}).addTo(map);


	// Ajout couche Ligne de metros

	var url1 = 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-traces-de-laxe-des-lignes.geojson';

	$.getJSON(url1, function (geojson) {
	var geojsonLayer = L.geoJson(geojson, {
	style: function (feature) {
	return {
	color: '#DC143C',
	fillOpacity: 0.0,
	opacity: 1,
	stroke: true
	}
	}
	}).addTo(map);
	controlLayers.addOverlay(geojsonLayer, 'Lignes de métro');
	});



	// Ajout des Stations de métros

	var url2 = 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-localisation-des-stations.geojson';

	$.getJSON(url2, function (geojson) {
	var metros = L.geoJson(geojson,
	{

	// We make the points circles instead of markers so we can style them
	pointToLayer: function (geoJsonPoint, latlng) {
	return L.circleMarker(latlng);
	},

	// Then we can style them as we would other features
	style: function (geoJsonFeature) {
	return {
	fillColor: '#ff4f68',
	radius: 7,
	fillOpacity: 0.8,
	stroke: true,
	};
	},
	}
	).addTo(map);

	//Ajout de popup sur chaque objet
	metros.bindPopup(function(metros) {console.log(metros.feature.properties);
	return "<h1>"+metros.feature.properties.nom+"</h1>"+"<hr><h2> Ligne : " +metros.feature.properties.ligne+ "</h2>" ;
	});

	controlLayers.addOverlay(metros, 'Stations de métro');
	});


	// Ajout des Stations de vélos

	var url3 = 'https://raw.githubusercontent.com/mastersigat/data/main/velostar.geojson';

	$.getJSON(url3, function (geojson) {
	var velos = L.geoJson(geojson,
	{

	// We make the points circles instead of markers so we can style them
	pointToLayer: function (geoJsonPoint, latlng) {
	return L.circleMarker(latlng);
	},

	// Then we can style them as we would other features
	style: function (geoJsonFeature) {
	return {
	fillColor: '#001f3f',
	radius: 6,
	fillOpacity: 0.7,
	stroke: false
	};
	},
	}).addTo(map);

	velos.bindPopup(function(velos) {console.log(velos.feature.properties);
	return "<h1> Station : "+velos.feature.properties.nom+"</h1>"+"<hr><h2>" +velos.feature.properties.nombreemplacementstheorique+ "  vélos</h2>" ;
	});

	controlLayers.addOverlay(velos, 'Stations de vélos');
	});

	</script>

	</body>
	</html>