Built with blockbuilder.org
Last active
December 30, 2019 03:13
-
-
Save renauld94/d6c485f87728e52e5cfd2f48af3e194a to your computer and use it in GitHub Desktop.
geojson
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> | |
| <script type="text/javascript" | |
| src="https://maps.googleapis.com/maps/api/js"> | |
| </script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFGGcmkdib9Ztkii4kjWG8jX9ul0eSpgE&callback=initMap" | |
| type="text/javascript"></script> | |
| <script src="https://storage.cloud.google.com/jsontestdemp/testdata.json"></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/jsontestdemp/testdata.json"); | |
| 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