zross/california_nad83_zones_min.geojson

## california_nad83_zones_min.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              california_nad83_zones_min.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>
	<!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>