vojtech-dobes / nette-forms-gpspicker
Google Maps based picker of coordinates for Nette Framework.
Installs: 52 686
Dependents: 0
Suggesters: 0
Security: 0
Stars: 23
Watchers: 10
Forks: 19
Open Issues: 14
Requires
- php: >=5.3.2
- nette/nette: >=2.1.0,<2.4
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
- Get the source code from Github or via Composer (
vojtech-dobes/nette-forms-gpspicker
). - Register
VojtechDobes\NetteForms\GpsPickerExtension
as extension. - Link appropriate maps API SDK and
client/nette.gpsPicker.js
inapp/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:
<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>