vojtech-dobes/nette-forms-gpspicker

Google Maps based picker of coordinates for Nette Framework.

1.3.0 2015-02-26 23:50 UTC

Requires

• php: >=5.3.2
• nette/nette: >=2.1.0,<2.4

New BSD

• Vojtěch Dobeš

• Forms
• nette
• maps
• gps

README

GPS coordinates picker. Try it now!

Drivers

• Google Maps API v3
• Mapy.cz API v4
• Nokia Maps API v2
• OpenStreetMap (using Google Maps API v3)

License

New BSD

Dependencies

Nette 2.0.0

Demo

http://vojtechdobes.com/gpspicker/

Installation

1. Get the source code from Github or via Composer (vojtech-dobes/nette-forms-gpspicker).
2. Register VojtechDobes\NetteForms\GpsPickerExtension as extension.
3. Link appropriate maps API SDK and client/nette.gpsPicker.js in app/templates/@layout.latte.

extensions:
	gpspicker: VojtechDobes\NetteForms\GpsPickerExtension

In Nette 2.0, registration is done in app/bootstrap.php:

$configurator->onCompile[] = function ($configurator, $compiler) {
	$compiler->addExtension('gpspicker', new VojtechDobes\NetteForms\GpsPickerExtension);
};

	<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
	<script src="{$basePath}/libs/nette.gpsPicker.js"></script>
</body>

(for example when using Google Maps API v3)

Usage

$form->addGpsPicker('coords', 'Coordinates:');

You can add some options (every option has also some like setter thing):

$form->addGpsPicker('coords', 'Coordinates:', array(
	'type' => VojtechDobes\NetteForms\GpsPicker::TYPE_SATELLITE,
	'zoom' => 1, // something like whole planet I guess
	'size' => array(
		'x' => 411,
		'y' => 376,
	),
));

If you prefer manual rendering, caption can be omitted:

$form->addGpsPicker('coords', array(
	'type' => ...
	...
));

Returned value is instance of GpsPoint with lat and lng properties. It inherits from Nette\Object.

$lat = $form->values->coords->lat;
$lng = $form->values->coords->lng;

You can set value (respectively default value) like this:

$form['coords']->setDefaultValue(array(
	'lat' => 50.103245,
	'lng' => 14.474691,
));

Validation

use VojtechDobes\NetteForms\GpsPicker as Gps;

Now you can easily add various constraints on desired GPS:

$form->addGpsPicker('coords')
	->addRule(Gps::MIN_LAT, 'Minimal latitude must be %f.', 20)
	->addRule(Gps::MIN_LNG, 'Minimal longitude must be %f.', 40)
	->addRule(Gps::MAX_LAT, 'Maximum latitude must be %f.', 20)
	->addRule(Gps::MAX_LNG, 'Maximum longitude must be %f.', 40)
	->addRule(Gps::MIN_DISTANCE_FROM, 'Minimal distance from Prague must be %d m.', array(15000, array(
		'lat' => 50.083,
		'lng' => 14.423,
	)));
	->addRule(Gps::MAX_DISTANCE_FROM, 'Maximum distance from Prague must be %d m.', array(100000, array(
		'lat' => 50.083,
		'lng' => 14.423,
	)));

First four rules will be also validated client-side.

Manual rendering

If the user doesn't support Javascript or gets offline, picker provides several inputs for setting coordinates manually. You can easily render them manually as well as whole complete element.

{form formName}
	...

	{gpspicker coords}
		{gpspicker:label lat}Latitude:{/gpspicker:label} {gpspicker:input lat}
		{gpspicker:label lng}Longitude:{/gpspicker:label} {gpspicker:input lng}
	{/gpspicker}
{/form}

Search by address

Enabled by default, GpsPicker supports searching map by typing the address. Extra <input> element will be prepended to map, enhanced by Google Places Autocomplete service.

If you like to render it manually, use search key:

{gpspicker coords}
	{gpspicker:label search /} {gpspicker:input search}
{/gpspicker}

You can disable/enable search feature with enableSearch/disableSearch pair of methods:

$form->addGpsPicker('coords', 'Coordinates:')
	->disableSearch();

Or in constructor:

$form->addGpsPicker('coords', 'Coordinates:', array(
	'search' => FALSE,
));

Providers

If you are afraid of exhausting API rate limit of Google Maps, you can use alternative provider as well. All you have to do is to link their appropriate API SDK and set the driver:

$form->addGpsPicker('coords', 'Coordinates:')
	->setDriver(Gps::DRIVER_SEZNAM);

Available providers are:

Google

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Nokia

<script src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all" charset="utf-8"></script>
<script>
	nokia.Settings.set('appId', 'XXX');
	nokia.Settings.set('authenticationToken', 'XXX');
</script>

OpenStreetMap

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Seznam (Mapy.cz)

<script src="http://api4.mapy.cz/loader.js"></script>
<script>Loader.load()</script>