renauld94/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html


<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}

    </style>

   // http://jacobfilipp.com/creating-choropleth-maps-with-google-maps/

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>

    <script src="vietnam_provinces (3).geojson"></script>


    <script type="text/javascript">
      function initialize() {


		var mapOptions = {
		  center: { lat: 10.82, lng: 106.62},
		  zoom: 5,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  panControl: false,
		  streetViewControl: false,
		  mapTypeControl: false
		};


		var map = new google.maps.Map(document.getElementById('map-canvas'),
		    mapOptions);

		map.data.loadGeoJson("vietnam_provinces (3).geojson");

	//	map.data.loadGeoJson("https://storage.cloud.google.com/universe12345/vietnam_provinces.geojson");

		map.data.setStyle(function(feature) {

			var totalsales = feature.getProperty('cca_1');

			var fcolor = "";	// polygon fill color

			switch (true) {
		      		case ( totalsales == 0 || totalsales === null ):		// in case of no value
		      							fcolor = '#547553'; break;
		      		case ( totalsales <= 100 ):	fcolor = '#F4EB89'; break;
		      		case ( totalsales <= 200):		fcolor = '#C4CE7B'; break;
		      		case ( totalsales <= 300 ):	fcolor = '#99B16E'; break;
		      		case ( totalsales <= 400 ):	fcolor = '#749361'; break;
		      		case ( totalsales <= 500 ):	fcolor = '#547553'; break;
		      		case ( totalsales <= 600 ):	fcolor = '#395842'; break;
		      		case ( totalsales <= 700 ):	fcolor = '#233B30'; break;
		      			default:			fcolor = '#547553'; break;
		      	}


			return {
			      fillColor: fcolor,
			       strokeWeight: 1,
			       strokeColor: '#afafaf',
			       fillOpacity: 1,
			       strokeOpacity: 0.7,
			       zIndex: 0
			};
		});


		// a popup with the Health Region name and the score for Sense of Community Belonging
		var infoWindow = new google.maps.InfoWindow({
					zIndex: 2
			});


		 map.data.addListener('mouseover', function(event) {

			map.data.revertStyle();
			map.data.overrideStyle(event.feature, {strokeWeight: 2, strokeColor: 'black', zIndex: 1});

			var varname_1	= event.feature.getProperty('varname_1');
			var cca_1	= event.feature.getProperty('cca_1') === null ? "(data missing)" : event.feature.getProperty('cca_1') + "%";

			infoWindow.setPosition( event.latLng );
			infoWindow.setOptions( {
				pixelOffset: {width: 0, height: -3}
			});

			infoWindow.setContent(
					"Province Name: <b>" + varname_1 + "</b><br />" +
					"Total Sales: <b>" + cca_1 + "</b>"
			);
			infoWindow.open(map);

		 });

		 map.data.addListener('mouseout', function(event) {

		 	map.data.revertStyle();
		 	infoWindow.close();

		 });

      } // function initialize(), called upon page load


      google.maps.event.addDomListener(window, 'load', initialize);


    </script>
  </head>
  <body>

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


  </body>
</html>


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style type="text/css">
	html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}

	</style>

	// http://jacobfilipp.com/creating-choropleth-maps-with-google-maps/

	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js">
	</script>

	<script src="vietnam_provinces (3).geojson"></script>


	<script type="text/javascript">
	function initialize() {


	var mapOptions = {
	center: { lat: 10.82, lng: 106.62},
	zoom: 5,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	panControl: false,
	streetViewControl: false,
	mapTypeControl: false
	};


	var map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	map.data.loadGeoJson("vietnam_provinces (3).geojson");

	// map.data.loadGeoJson("https://storage.cloud.google.com/universe12345/vietnam_provinces.geojson");

	map.data.setStyle(function(feature) {

	var totalsales = feature.getProperty('cca_1');

	var fcolor = ""; // polygon fill color

	switch (true) {
	case ( totalsales == 0 \|\| totalsales === null ): // in case of no value
	fcolor = '#547553'; break;
	case ( totalsales <= 100 ): fcolor = '#F4EB89'; break;
	case ( totalsales <= 200): fcolor = '#C4CE7B'; break;
	case ( totalsales <= 300 ): fcolor = '#99B16E'; break;
	case ( totalsales <= 400 ): fcolor = '#749361'; break;
	case ( totalsales <= 500 ): fcolor = '#547553'; break;
	case ( totalsales <= 600 ): fcolor = '#395842'; break;
	case ( totalsales <= 700 ): fcolor = '#233B30'; break;
	default: fcolor = '#547553'; break;
	}


	return {
	fillColor: fcolor,
	strokeWeight: 1,
	strokeColor: '#afafaf',
	fillOpacity: 1,
	strokeOpacity: 0.7,
	zIndex: 0
	};
	});


	// a popup with the Health Region name and the score for Sense of Community Belonging
	var infoWindow = new google.maps.InfoWindow({
	zIndex: 2
	});


	map.data.addListener('mouseover', function(event) {

	map.data.revertStyle();
	map.data.overrideStyle(event.feature, {strokeWeight: 2, strokeColor: 'black', zIndex: 1});

	var varname_1 = event.feature.getProperty('varname_1');
	var cca_1 = event.feature.getProperty('cca_1') === null ? "(data missing)" : event.feature.getProperty('cca_1') + "%";

	infoWindow.setPosition( event.latLng );
	infoWindow.setOptions( {
	pixelOffset: {width: 0, height: -3}
	});

	infoWindow.setContent(
	"Province Name: <b>" + varname_1 + "</b><br />" +
	"Total Sales: <b>" + cca_1 + "</b>"
	);
	infoWindow.open(map);

	});

	map.data.addListener('mouseout', function(event) {

	map.data.revertStyle();
	infoWindow.close();

	});

	} // function initialize(), called upon page load






	google.maps.event.addDomListener(window, 'load', initialize);








	</script>
	</head>
	<body>

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


	</body>
	</html>