Technical Rehearsal — Q-2-Q

Behind the scenes of every great production, is superbly choreographed technical support. Technical support is two-thirds of the "Lights! Camera! ACTION!" mantra. Without light or camera, action is futile. So … before the dance, we position the lights, adjust the audio, and turn on the magic.

Previously, we mentioned the need for HTML and CSS. That is, indeed, much of the technical support in this production. Tables were carefully constructed for a visually pleasing and logical placement of form inputs. Our form contains a table of two rows. The first row contains the Markers fieldset which wraps around the marker groups. The second row contains configuration inputs for the map presentation. We will give enough detail of each row, to guide development of your similar applications.

The Markers fieldset organizes marker groups. Each marker group uses a common map pin and may designate multiple locations. Marker groups may designate polygons with lines connecting the designated locations, sequentially. Marker groups may, also, define a curved boundary with centers and foci and arc segments. Sure, there is only a single group with a single location, but the structure is ready for more.

The configuration inputs of the second row allow for setting an initial zoom in a custom-sized map view. The map view can be centered around any of the designated map pins or any other specified point as defined by a latitude and longitude. Yes! there's only one map pin. More, at this stage, would scare amateurs. We'll do multiple map pins with curves and clusters in the next tutorial. For now, enjoy changing the view of a single pin and use the Build a GMap macro page for multiple location and marker types. Maybe changing the pan and zoom control and the map type will compensate the lack of multiple pins.

There are four types of inputs in our form. Six inputs (two latitude and longitude pairs, and magnitude for width and height) use text inputs. These are simple inputs and contain a name and value from their previously assigned value. The inputs are intended for numeric values and validation code is not used. For whatever pleasure derives, provide non-numeric data if failures are your hope. A representative labeled text input would be for the map pin latitude.

<?php
// Generate a label and text input for latitude ordinate
print '  <label for ' . $marker_array . '_' . $marker_loc_array . '_lat">Latitude </label>';
print '<nput type="text" id="' . $marker_array . '_' . $marker_loc_array . '_lat"';
print ' name="my_gmap[markers][' . $marker_array . '][geoloc][' . $marker_loc_array . '][lat]"';
print ' value="' . $my_gmap['markers'][$marker_array]['geoloc'][$marker_loc_array]['lat'];
print '" size="12">
';
?>

Of course, code can be added to check for reasonable values. However, there is a more reasonable alternative: create a modified webform for map definitions … input validations are easily added. Why didn't we use a webform? Primarily, because hindsight is 20/20. HTML came, first, to mind – there is such adventure in our webmaster's mental archive.

The more plentifully utilized of our inputs are selects. Generation of those controls and associated labels are trivial tasks, but showing each generation is barely more service than showing one. Each select script uses the same general format; a common function for that generation is left as a programming exercise for another tutorial. The script for generating the map overlay select follows.

<?php
print '<label for "type">Overlay </label>';
print '<select id="type" name="my_gmap[type]">
';
foreach($types as $key => $value) {
  print '<option value="' . $key . '"';
  if ($my_gmap['type'] == $key) {
    print ' SELECTED';
  }
  print '>' . $value . '</option>
';
}
unset($value);
unset($key);
print '</select><br>
';
?>

There are, also two radio inputs for designating the center of our map. The default radio input directs using the location of our pinned location as the map center. The option is manual designation of the map center at the previously designated map center or another location as described by the user. There are only two radio buttons, and the difference is significant enough to warrant reporting both in context.

<?php
print '<input type="radio" name="center" value="pin" checked="checked"> Center map at 
';
print 'group 
';
print '<select name="cgrp">
';
$gmax = count($my_gmap['markers']);
for ( $selector = 0; $selector < $gmax; $selector++) {
  print '<option value="' . $selector . '">' . $selector . '</option>
';
}
print '</select>
';
print ' :: location ';

print '<select name="cloc">
';
$lmax = count($my_gmap['markers'][--$gmax]['geoloc']);
for ( $selector = 0; $selector < $lmax; $selector++) {
  print '<option value="' . $selector . '">' . $selector . '</option>
';
}
print '</select><br>
';
print '<input type="radio" name="center" value="spec"> Center map at
';
print '<label for "map_lat">Latitude </label>
';
print '<input type="text" id="map_lat" name="my_gmap[center][lat]"';
print ' value="' . $my_gmap['center']['lat'] .'" size="12">
';
print '<label for "map_lon">Longitude </label>
';
print '<input type="text" id="map_lon" name="my_gmap[center][lon]"';
print ' value="' . $my_gmap['center']['lon'] . '" size="12"><br>
';

All of the GMap variables are previously documented. We list them, this time, with default values and associations for working variables to $_POST variables.

 default 
$my_gmaparray()$_POST['my_gmap']
$my_gmap['markers']array()$_POST['my_gmap']['markers']
$my_gmap['markers'][]['icon']'vertex'$_POST['my_gmap']['markers][]['icon']
$my_gmap['markers'][]['geolocation']array()$_POST['my_gmap']['markers'][]['geolocation']
$my_gmap['markers'][]['geolocation'][]['lat']36.66195$_POST['my_gmap']['markers'][]['geolocation'][]['lat']
$my_gmap['markers'][]['geolocation'][]['lon']-80.92485$_POST['my_gmap']['markers'][]['geolocation'][]['lon']
$my_gmap['zoom']16$_POST['my_gmap']['zoom']
$my_gmap['width']['magnitude']450$_POST['my_gmap']['width']['magnitude']
$my_gmap['width']['unit']'px'$_POST['my_gmap']['width']['unit']
$my_gmap['height']['magnitude']250$_POST['my_gmap']['height']['magnitude']
$my_gmap['height']['unit']'px'$_POST['my_gmap']['height']['unit']
$my_gmap['center']['lat']36.66195$_POST['my_gmap']['center']['lat']
$my_gmap['center']['lon']-80.92485$_POST['my_gmap']['center']['lon']
$my_gmap['control']'Small'$_POST['my_gmap']['control']
$my_gmap['type']'Map'$_POST['my_gmap']['type']
'pin'$_POST['center']
0$_POST['cgrp']
0$_POST['cloc']
'Show my map'$_POST['map']
'Start over'$_POST['reset']

When the curtain raises and everything is in place, one actor steals the show. We gather all the facts to generate our GMap macro.

<?php
print '
[';
print 'gmap';
print ' markers=' . $my_gmap['markers'][0]['icon'] . '::';
  print $my_gmap['markers'][0]['geoloc'][0]['lat'] . ',' . $my_gmap['markers'][0]['geoloc'][0]['lon'];
print ' |zoom=' . $my_gmap['zoom'];
print ' |width=';
  print $my_gmap['width']['magnitude'] . $my_gmap['width']['unit'];
print ' |height=';
  print $my_gmap['height']['magnitude'] . $my_gmap['height']['unit'];
print ' |center=';
  print $my_gmap['center']['lat'] . ',' . $my_gmap['center']['lon'];
print ' |control=' . $my_gmap['control'];
print ' |type=' . $my_gmap['type'];
print ']
';
?>

We hope you enjoyed the show. Kindly tip the usher on your way out.