Lines and Polygons

Peterson

Simple Line

function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 3 }); flightPath.setMap(map); }

Flow Map

Fat Line

// Second line segment var flightPlanCoordinates = [

new google.maps.LatLng(41.8, -87.7), new google.maps.LatLng(44.9, -93.3) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: “#00FF00”, strokeOpacity: .5, strokeWeight: 10 });

flightPath.setMap(map);

Great Circle

Geodesic = Great circle

var flightPlanCoordinates = [ new google.maps.LatLng(34, -118.214897), new google.maps.LatLng(51.5, 0) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0,

geodesic: true, strokeWeight: 3 });

From XML file

// Add a listener for the click event google.maps.event.addListener(map, 'click', addLatLng); } /** * Handles click events on a map, and adds a new point to the Polyline. */ function addLatLng(event) { var path = poly.getPath(); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear path.push(event.latLng); // Write out coordinates in contentWindow showInContentWindow(event.latLng); // Add a new marker at the new plotted point on the polyline. var marker = new google.maps.Marker({ position: event.latLng, title: '#' + path.getLength(), map: map });

Cross-section

// Display a polyline of the elevation path. var pathOptions = { path: elevationPath, strokeColor: '#0000CC', opacity: 0.4, map: map } polyline = new google.maps.Polyline(pathOptions); // Extract the data from which to populate the chart. var data = new google.visualization.DataTable(); data.addColumn('string', 'Sample'); data.addColumn('number', 'Elevation'); for (var i = 0; i < results.length; i++) { data.addRow(['', elevations[i].elevation]); }

Encoded Polylines

Encoding

Polygon

var bermudaTriangle; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) ]; // Construct the polygon bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });

From XML file

downloadUrl("17_point_polygon.xml", function(doc) { var xmlDoc = xmlParse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new google.maps.LatLng(lat,lng);

flightPlanCoordinates[i]=point; counter=i

var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); // create the marker var marker = createMarker(point,label,html); } // put the assembled side_bar_html contents into the side_bar div document.getElementById("side_bar").innerHTML = side_bar_html;

// make last point equal to first flightPlanCoordinates[counter+1]=flightPlanCoordinates[0];

// define the line characteristics var flightPath = new google.maps.Polyline({

path: flightPlanCoordinates, strokeColor: "#FF00F0", strokeOpacity: 1.0, strokeWeight: 3,

fillColor: "#FF00F0", fillOpacity: 0.5 }); // put the line on the map flightPath.setMap(map);

Donut

function initialize() { var myOptions = { zoom: 10, center: new google.maps.LatLng(34.0187, -118.4058), mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); bounds = new google.maps.LatLngBounds(); var donut = new google.maps.Polygon({ paths: [drawCircle(new google.maps.LatLng(34.0187, -118.4058), 200), drawCircle(new google.maps.LatLng(34.0187, -118.4058), 100)], strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); donut.setMap(map); map.fitBounds(bounds); }

Line Coordinate Thinning

File Conversion

Formatting for XML file

From KML file

Google Map Error

Choropleth Map

// Put the population data for the counties into the popdata array popdata = new Array (33185,6931,372,783,492,5668,11132,2185,3354,43954,7341,8595,25963,8819,3811,5934,9865,6564,10113,9660,11242,20587,8466,25018,1958,6170,36171,492003,2109,6259,3348,2729,5003,23365,1995,1790,1978,660,2454,55555,9490,3446,1029,2926,10610,756,6736,7874,4683,6701,8250,892,3710,8812,267135,35865,749,656,497,35279,7954,5171,3705,7247,4650,15747,2804,2992,9442,7564,31962,5349,10865,8656,1544,14155,142637,20344,36546,16835,5571,3083,1403,6570,5317,629,7273,4373,20044,9196,3701,823,14502) // Find the min and max population values for the 93 counties after doing a non-linear transformation using the log function var min=100000000; var max=-100000000; for (var i = 0; i < 93; i++) { popdata[i] = Math.log(popdata[i])

if (popdata[i] < min) { min=popdata[i] }if (popdata[i] > max) { max=popdata[i] }

}// Find the range and compute the opacities for each polygon

var range = max-min // compute an opacity as a range of the data values opacities = new Array () for (var i = 0; i < 93; i++) {

opacities[i] = 1-((max - popdata[i]) / range)

Opacity-based Choropleth Map

Heat Map

Shaded Isoline (Isotherms)

Heatmap Data

</script><script type="text/javascript"> function initialize() { var brazil = new google.maps.LatLng(-18.771115, -42.758789); map = new google.maps.Map(document.getElementById('map_canvas'), { center: brazil, zoom: 4, mapTypeId: 'roadmap'}); // Table 136705 has beaches along Brazil's coastline // View this table in a webpage: http://tables.googlelabs.com/DataSource?dsrcid=136705layer = new google.maps.FusionTablesLayer(136705, { heatmap: true