vojtech-dobes / nette-forms-gpspicker

Form control for picking coordinates (for Nette Framework)

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>

nette-forms-gpspicker's Issues

Adding setRequired() causes an error on submit

When I add GpsPicker and set it required, validation fails with the message:

Object of class VojtechDobes\NetteForms\GpsPoint could not be converted to string

$form->addGpsPicker(...)->setRequired();

Problem is in BaseControl::isFilled() where typecast to string is used.

Not sure if this behavior is currently supported?

Add option to let user enter GPS by himself

It'd be cool to let uset enter GPS by himself - sometimes you may have an exact GPS coordinate written somewhere on paper and entering it directly would save time (and through browsing map).

• check for typing/paste into lat/lng inputs
• try to update map according to typed values

Manual rendering for non-JS/offline

• custom macroset?

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

Get address from currently position of picker after send form

Is posible to add a feature to get currently address, if user change possition of picker manualy and send the form without field the address?

I mean something like below:

public function formValidate(Form $form)
{
  $values  = $form->getValues();

  if($values->coordinates->address==null)
  {
    $adress = $form["coordinates"]->getPickerAddress(); 
    ....

Support for Open Street Maps based search

Problem with install to Nette 2.3.6

Hello I am trying install GPS component to my app but I get error from composer

Installation request for nette/application (locked at v2.3.13, required as ^2.3.6) -> satisfiable by nette/application[v2.3.13].

Exception is thrown if value not set, on Nette 2.1

If you include GpsPicker in form, without setting any value, InvalidArgumentException is thrown while rendering control. This is because in Nette 2.1 there is NULL set as a default value.

Crossdomain stylesheets

Hello,

when first css style in page is from another domain, then JS fails on:

var stylesheet = window.document.styleSheets[0];
var method = stylesheet.cssRules ? 'insertRule' : 'addRule';
for (var i = 0; i < rules.length; i++) {
    stylesheet[method].call(stylesheet,  rules[i], 0);

because JS in Firefox can't modify cross domain css.

I'm suggesting as solution add this code into loop, try+catch and if try was successful, then break loop. If is caught exception, then do next loop iteration with next styleSheets.

Do you agree with this solution, so I can prepare commit?

client side

riadok 55 options.search = new google.maps.places.Autocomplete($search[0], {});

chyba: TypeError: google.maps.places is undefined

options.search = new google.maps.places.Autocomplete($search[0], {});

Add possibility to leave the GPS picker not filled

Currently the GPS picker is always filled, if you don't change anything then the value is the hardcoded default position, so it's not really possible to have GPS picker as optional field in form.
I think the default position should be used only for setting initial map center and on backend the GPS picker should return NULL if not filled in by user. Also, it would be nice to be able to change the default position.

Mobile friendliness

When using the picker on smartphone, UI could be improved:

• when dragging the marker, it should be twice as big to remain visible under the finger
• when setting the marker by one touch, it should blink twice as big to confirm the change

It might also detect <meta name="viewport" content="width=device-width"> and set its width to 100%, but I am not sure about this one.

Provide non-Google driver (e.g. OpenStreetMap etc.)

Google Maps API is limited in usage. GpsPicker might be implemented in other mapping services to let developer choose.

get address associated with point

would it be possible to get also the address that belongs to the point selected?

Add support for Nette 2.3

Dependency for Nette in composer.json is restricted to version <2.3.

Automatic compatibility with Twitter Bootstrap

[data-nette-gpspicker] img {
    max-width: none;
}

• popovers
• issue with max-width

Rectangle & Circle picker

Add Mapbox.js provider

Add way to center current marker (if it gets lost while searching map)

Also could be method for setting marker into center of current view.

Retrieving more data about searched place

When search is used, much more could be moved to server. But this should be implemented together with serverside.

Not working in version 2.2.3

Nette throws exception:

User Warning

Class Nette\Latte\Compiler has been renamed to Latte\Compiler

GpsPoint must accept latitude AND longitude, or array with "lat" and "lng" keys.

when adding gps picker to form like this, latest version

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

shouldn't this work out of the box?

Add visual helpers based on validation rules

instalation via composer

Imposible install the addon via composer for nette 2.2.3

Custom "gps-based" validation

nette 2.2 compatibility

GpsPickerExtension.php

line 37
from
$latte->addSetup('VojtechDobes\NetteForms\GpsPickerMacros::install(?->compiler)', array('@self'));
to
$latte->addSetup('VojtechDobes\NetteForms\GpsPickerMacros::install(?->getCompiler())', array('@self'));

Incompatible with Nette 2.4