Built with blockbuilder.org
Last active
December 27, 2019 08:27
-
-
Save renauld94/f8ed6adb4bec5b9b24733d290c1784d7 to your computer and use it in GitHub Desktop.
Cloropeth Map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment