on Code

Podcast

For this podcast series, we’ll be building a web site with map, geocoding, choropleth mapping, and point in polygon operation from scratch using HTML5 Boilerplate, jQuery, the Google Maps API, and Google Fusion Tables. With HTML5, CSS styling, jQuery, and Google Maps and Fusion Tables, hopefully there’ll be something for everybody. It take at least one more podcast next month, perhaps two, to get it all done, but in 1-1.5 hours we’ll go from an empty folder to a well-styled, functional web mapping site that you could use to solve real-world problems.

Unless you have eagle eyes, you will want to increase the resolution and video size to as large as your hardware and bandwidth can handle. You’ll be able to read the code in 720p, but it’ll look sharpest in 1080p.

Our code so far (minus the stock Boilerplate parts):

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="container">
    <header>
      <h1>Header</h1>
    </header>
    <div id="main" role="main" class="clearfix">
	<aside>
	   <h3>Aside</h3>
	   <form id="geocode" action="javascript:void(0)">
		<input id="address" type="textbox" placeholder="Enter Address" />
		<input type="submit" value="Go">
	   </form>
	</aside>
	<div id="map">
	   <div id="map_canvas"></div>
	</div>
    </div>
    <footer>
        Footer
    </footer>
 </div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 var geocoder;
  var map;
  var marker;

$(document).ready(function(){

	// Geocode form
	$("#geocode").submit(codeAddress);
});

$(window).load(function() {

	// initialize map
	initializeMap();

});

function initializeMap() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(35.270, -80.837);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
	   map.setZoom(15);
		marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
		var infowindow = new google.maps.InfoWindow({
			content: results[0].formatted_address
		 });
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map,marker);
		});

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

CSS

1
2
3
4
#container { max-width: 960px; margin: 0 auto; border: 1px solid #ccc; }
aside { float: left; width: 25%; }
#map { width: 74%; float: right; }
#map_canvas { height: 600px; width: 99%; border: 1px solid black; }