lines and polygons peterson. simple line function initialize() { var mylatlng = new...
Post on 20-Dec-2015
218 views
TRANSCRIPT
![Page 1: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/1.jpg)
Lines and Polygons
Peterson
![Page 2: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/2.jpg)
Simple Line
![Page 3: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/3.jpg)
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); }
![Page 4: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/4.jpg)
Flow Map
![Page 5: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/5.jpg)
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);
![Page 6: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/6.jpg)
Great Circle
![Page 7: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/7.jpg)
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 });
![Page 8: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/8.jpg)
From XML file
![Page 9: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/9.jpg)
![Page 10: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/10.jpg)
![Page 11: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/11.jpg)
// 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 });
![Page 12: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/12.jpg)
Cross-section
![Page 13: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/13.jpg)
// 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]); }
![Page 14: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/14.jpg)
Encoded Polylines
![Page 15: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/15.jpg)
Encoding
![Page 16: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/16.jpg)
Polygon
![Page 17: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/17.jpg)
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 });
![Page 18: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/18.jpg)
From XML file
![Page 19: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/19.jpg)
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);
![Page 20: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/20.jpg)
Donut
![Page 21: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/21.jpg)
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); }
![Page 22: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/22.jpg)
Line Coordinate Thinning
![Page 23: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/23.jpg)
File Conversion
![Page 24: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/24.jpg)
Formatting for XML file
![Page 25: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/25.jpg)
From KML file
![Page 26: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/26.jpg)
![Page 27: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/27.jpg)
Google Map Error
![Page 28: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/28.jpg)
Choropleth Map
![Page 29: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/29.jpg)
// 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)
![Page 30: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/30.jpg)
Opacity-based Choropleth Map
![Page 31: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/31.jpg)
Heat Map
![Page 32: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/32.jpg)
Shaded Isoline (Isotherms)
![Page 33: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/33.jpg)
Heatmap Data
![Page 34: Lines and Polygons Peterson. Simple Line function initialize() { var myLatLng = new google.maps.LatLng(5, -170); var myOptions = { zoom: 2, center: myLatLng,](https://reader035.vdocuments.site/reader035/viewer/2022062421/56649d4d5503460f94a2bbb6/html5/thumbnails/34.jpg)
</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