Skip to content

Instantly share code, notes, and snippets.

@zross
Last active July 27, 2023 22:24
Show Gist options
  • Save zross/9893056 to your computer and use it in GitHub Desktop.
Save zross/9893056 to your computer and use it in GitHub Desktop.
Using geojson with Google Maps API
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.
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Styling</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#legend-container {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend-container h3 {
margin-top: 0;
}
.legend-color-box {
height:20px;
width:20px;
border-radius:3px;
float:left;
border:1px solid black;
margin-right:6px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map,
cachedGeoJson,
colorValues = [
"red", //1
"blue", //2
"green", //3
"brown", //4
"purple", //5
"pink" //6
],
invertedColorValues = [
"pink", //1
"purple", //2
"brown", //3
"green", //4
"blue", //5
"red"//6
],
infoWindow = new google.maps.InfoWindow({
content: ""
});
google.maps.event.addDomListener(window, 'load', function initialize() {
//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: {lat: 37.5, lng: -119.0},
scrollwheel: false
});
// Load GeoJSON.
var promise = $.getJSON("california_nad83_zones_min.geojson"); //same as map.data.loadGeoJson();
promise.then(function(data){
cachedGeoJson = data; //save the geojson in case we want to update its values
map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});
});
//style fucntions
var setColorStyleFn = function(feature) {
return {
fillColor: colorValues[feature.getProperty('value')],
strokeWeight: 1
};
},
//an inverted style fn
setInvertedColorStyleFn = function(feature) {
return {
fillColor: invertedColorValues[feature.getProperty('value')],
strokeWeight: 1
};
};
// Set the stroke width, and fill color for each polygon, with default colors at first
map.data.setStyle(setColorStyleFn);
//get the legend container, create a legend, add a legend renderer fn
var $legendContainer = $('#legend-container'),
$legend = $('<div id="legend">').appendTo($legendContainer),
renderLegend = function(colorValuesArray){
$legend.empty();
$.each(colorValuesArray,function(index, val){
var $div = $('<div style="height:25px;">').append($('<div class="legend-color-box">').css({
backgroundColor:val,
})).append($("<span>").css("lineHeight","23px").html("Zone " + index));
$legend.append($div);
});
}
//make a legend for the first time
renderLegend(colorValues);
//make a toggle button for color values
var $toggleColorsButton = $("<button>").html("Toggle Colors").click(function(){
if(map.data.getStyle() === setColorStyleFn){
map.data.setStyle(setInvertedColorStyleFn);
renderLegend(invertedColorValues);
} else {
map.data.setStyle(setColorStyleFn);
renderLegend(colorValues);
}
});
//add it to the legend
$legendContainer.append($toggleColorsButton);
//add the legend to the map
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($legendContainer[0]);
//listen for click events
map.data.addListener('click', function(event) {
//show an infowindow on click
infoWindow.setContent('<div style="line-height:1.35;overflow:hidden;white-space:nowrap;"> Feature id = '+
event.feature.getId() +"<br/>Feature Value = Zone " + event.feature.getProperty("value") + "</div>");
var anchor = new google.maps.MVCObject();
anchor.set("position",event.latLng);
infoWindow.open(map,anchor);
});
});
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="legend-container"><h3>Legend</h3></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment