Componette

Componette

vojtech-dobes

vojtech-dobes / nette-forms-gpspicker v1.3.0

Form control for picking coordinates (for Nette Framework)

download-cloud-line composer require vojtech-dobes/nette-forms-gpspicker

For Nette Framework

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

Feature Value
Usage default (manually by calling ->setDriver(Gps::DRIVER_GOOGLE))
Search by address yes
Supported types Gps::TYPE_ROADMAP, Gps::TYPE_SATELLITE, Gps::TYPE_HYBRID, Gps::TYPE_TERRAIN
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Nokia

Feature Value
Usage ->setDriver(Gps::DRIVER_NOKIA)
Search by address no
Supported types Gps::TYPE_NORMAL, Gps::TYPE_SATELLITE, Gps::TYPE_TERRAIN
<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

Feature Value
Usage ->setDriver(Gps::DRIVER_OPENSTREETMAP)
Search by address no
Supported types Gps::TYPE_ROADMAP, Gps::TYPE_SATELLITE, Gps::TYPE_HYBRID, Gps::TYPE_TERRAIN
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Seznam (Mapy.cz)

Feature Value
Usage ->setDriver(Gps::DRIVER_SEZNAM)
Search by address no
Supported types Gps::TYPE_BASE, Gps::TYPE_BIKE, Gps::TYPE_HISTORIC, Gps::TYPE_HYBRID,
Gps::TYPE_OPHOTO, Gps::TYPE_TRAIL, Gps::TYPE_TURIST
<script src="http://api4.mapy.cz/loader.js"></script>
<script>Loader.load()</script>
  • v1.3.0 1.3.0 "Fernão de Magalhães"

    • resolved compatibility with Nette 2.3
    • {input} & {label} changed to {gpspicker:input} & {gpspicker:label} (FormMacros cannot be overriden anymore)
  • v1.2.0 1.2.0 "Amerigo Vespucci"

    • resolved compatibility with Nette 2.2
    • address field can be filled serverside as well
    • container element has ID that would normally belong to the element
  • v1.1.0 1.1.0 "Marco Polo"

    • resolved compatibility with Nette 2.1
    • support for Nokia maps and Mapy.cz
    • choose type of map (normal, satellite images, historical... - support depends on chosen provider) - take a look at documentation
    • force allowing manual input ->enableManualInput()
bar-chart-fill

Statistics

download-cloud-fill
48231
star-fill
23
bug-fill
14
flashlight-fill
7.7y
price-tag-2-line

Badges

guide-fill

Dependencies

php (>=5.3.2)
nette/nette (>=2.1.0,<2.4)
Componette Componette felix@nette.org