I was looking for a way to bind a circle to a marker and be able to set the radius from a field. I have written a location_radius module (using location_phone) as a base. So I have a radius field that is added to the location address fields (would like to to display under the Lat field, but that is another issue) and when you change the radius amount it dynamically updates the circle radius. My problem is the only way to get that to work was to add

$element['radius']['#map'] = $mapid;
gmap_widget_setup($element['radius'], 'locpick_radius');

to the function _location_process_location($element, $form_state). I would really rather have it all contained in my module but cannot figure out how to do it in side of my module any help would be greatly appreciated, or if this can be rolled into the location module that is also fine, and submit the code that was changed.

/**
 * @file
 * Add radius number fields to Location address.
 */

/**
 * Implements hook_locationapi().
 */
function location_radius_locationapi(&$location, $op, $a3 = NULL, $a4 = NULL) {
  switch ($op) {
    case 'fields':
      return array('radius' => t('radius (meters)'));

    case 'defaults':
      return array(
        'radius' => array('default' => '0', 'collect' => 0, 'weight' => 25),
      );

    case 'field_expand':
			
      if ($a3 == 'radius') {
        return array(
          '#type' => 'textfield',
          '#title' => t('Radius'),
          '#size' => 31,
          '#maxlength' => 31,
          '#description' => NULL,
          '#required' => ($a4 == 2),
          '#default_value' => '20', 
		  '#after_build' => array('location_radius_after_build')
		  
        );
      }
      break;

    case 'save':
      db_delete('location_radius')
        ->condition('lid', $location['lid'])
        ->execute();
      if (!empty($location['radius'])) {
        db_insert('location_radius')
          ->fields(array(
            'lid' => $location['lid'],
            'radius' => $location['radius'],
          ))
          ->execute();
      }
      break;

    case 'load':
      $fields = array();
      $radius = db_query('SELECT radius FROM {location_radius} WHERE lid = :lid', array(':lid' => $location['lid']))->fetchField();
      $fields['radius'] = $radius ? $radius : '';
      return $fields;

    case 'delete':
      db_delete('location_radius')
        ->condition('lid', $location['lid'])
        ->execute();
      break;
  }
}

/**
 * Implements hook_views_api().
 */
function location_radius_views_api() {
  return array(
    'api' => 3,
  );
}

/**
 * Implements hook_token_list().
 */
function location_radius_token_list($type = 'all') {
  if ($type == 'node' || $type == 'user' || $type == 'all') {
    $tokens['location']['location-radius_N'] = t('Location radius (If there are multiple locations per node, N is the iteration, starting with 0)');
    return $tokens;
  }
}

JS Code: I added this to gmaps locpick.js but again would rather have it added during the module above, just could not figure out how to get the attach to work...


Drupal.gmap.addHandler('locpick_radius', function (elem) {
  var obj = this;
  obj.bind("init", function () {
    if (elem.value !== '') {
      obj.vars.radius = Number(elem.value);
      //obj.locpick_coord = new GLatLng(obj.vars.latitude, obj.vars.longitude);
      //obj.locpick_coord.radius = obj.vars.radius;
    }
    else {
      obj.locpick_invalid = true;
    }
  });

  var binding = obj.bind("locpickchange", function () {
    if (obj.locpick_coord) {
      elem.value = obj.vars.radius;
    }
    else {
      elem.value = '';
    }
  });

  $(elem).change(function () {
	 if (!obj.locpick_point.circle) {
		var circle = new google.maps.Circle({
    	  radius: obj.vars.radius,
		  fillColor: '#AA0000',
		});
		obj.locpick_point.circle = circle; // Add the circle object to the map object
     	circle.bindTo('map', obj.locpick_point);
		circle.bindTo('center',obj.locpick_point, 'position');
		var r =[];
		r.push(obj.locpick_point);
	 }
    if (elem.value !== '') {
      if (obj.locpick_coord) {
        //obj.locpick_coord = new GLatLng(obj.locpick_coord.lat(), Number(elem.value));
        obj.vars.radius= Number(elem.value);
		obj.locpick_point.circle.set('radius', obj.vars.radius);
        obj.change('locpickchange', binding);
      }
      else {
        //obj.locpick_coord = new GLatLng(0.0, Number(elem.value));
        obj.vars.radius = Number(elem.value);
		obj.locpick_point.circle.set('radius', obj.vars.radius);
      }
    }
    else {
      obj.change('locpickremove', -1);
    }
  });
});

Thanks.

Comments

countrdd’s picture

Title: Bind a Circle to a Marker. » Bind a Circle to a Marker. - Working!
legolasbo’s picture

Status: Active » Closed (outdated)

Closing support tickets that have been inactive for over a year to clean up the issue queue. Please reopen if this is still an issue.