Skip to content

Instantly share code, notes, and snippets.

@renauld94
Last active December 27, 2019 08:27
Show Gist options
  • Save renauld94/f8ed6adb4bec5b9b24733d290c1784d7 to your computer and use it in GitHub Desktop.
Save renauld94/f8ed6adb4bec5b9b24733d290c1784d7 to your computer and use it in GitHub Desktop.
Cloropeth Map
license: mit
<!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