Skip to content

Instantly share code, notes, and snippets.

@renauld94
Last active December 30, 2019 03:13
Show Gist options
  • Save renauld94/d6c485f87728e52e5cfd2f48af3e194a to your computer and use it in GitHub Desktop.
Save renauld94/d6c485f87728e52e5cfd2f48af3e194a to your computer and use it in GitHub Desktop.
geojson
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>
<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>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment