venca-x/nettegmap

Nette/forms addon. Viewer, picker and new layer for Google maps

1.3.6 2024-01-12 21:04 UTC

README

Test Coding Style Coverage Status Total Downloads Latest Stable Version Latest Unstable Version License

Nette addon. Viewer and picker for Google maps

This branch is for Nette 3.0

Installation

Install with composer:

composer require venca-x/nettegmap:dev-master

You need use jQuery.

Configuration

bootstrap.php add register line OR add line in config.neon

Nette\Forms\NetteGMapPicker::register();//require only form picker

OR add line to config.neon:

extensions:
    nettegmap: Nette\Forms\NetteGMapPicker
<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/netteGMap.css">
  
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY" type="text/javascript"></script>
<script type="text/javascript" src="{$basePath}/js/jquery.netteGMap.js"></script>
<script type="text/javascript" src="{$basePath}/js/main.js"></script>

You must generate YOUR_API_KEY in https://console.developers.google.com/?hl=cs (Credentials -> API key)

Enable Maps JavaScript API in https://console.developers.google.com/?hl=cs

For search by address in maps enable Places API for Web in https://console.developers.google.com/?hl=cs

Usage with Bower

concat: {
    js: {
        src: ['bower_components/jquery/dist/jquery.min.js',
            'vendor/nette/forms/src/assets/netteForms.js',
            'bower_components/bootstrap/dist/js/bootstrap.min.js',
            'vendor/venca-x/nettegmap/client/js/jquery.netteGMap.js',
            'www/js/main.js'
        ],
        dest: 'www/js/compiled.min.js'
    }
},
cssmin: {
    target: {
        files: {
            'www/css/main.min.css': ['www/css/main.css','vendor/venca-x/nettegmap/client/css/netteGMap.css']
        }
    }
}

Simple usage viewer marker

This example show how to view map with marker:

viewer simple

protected function createComponentNetteGMapSimpleViewer() {
    $markers = array();
    $markers[] = new \Marker("home", "description", "49.1695254488", "14.2521617334");
    
    //$netteGMapViewer->setCenterMap(new \GpsPoint(49.1695254488,14.2521617334));
    //$netteGMapViewer->setScrollWheel(true);
    //$netteGMapViewer->setZoom(12);
    $netteGMapViewer = new \NetteGMapViewer($markers);
          
    return $netteGMapViewer;
}
{control netteGMapSimpleViewer}

Usage viewer marker with polyline

This example show how to show map with marker: viewer polyline

protected function createComponentNetteGMapViewerPolyline() {
    $markers = array();
    $markers[] = new \Marker("home", "description", "49.1695254488", "14.2521617334");
    
    //$netteGMapViewer->setCenterMap(new \GpsPoint(49.1695254488,14.2521617334));
    //$netteGMapViewer->setScrollwheel(TRUE);
    //$netteGMapViewer->setZoom(12);
    $netteGMapViewer = new \NetteGMapViewer($markers);    
    
    //add polyline to map
    $coordinates = array(
        new \GpsPoint(49.169669, 14.252152),
        new \GpsPoint(49.169399, 14.252175),
        new \GpsPoint(49.169532, 14.251842),
        new \GpsPoint(49.169669, 14.252152)
    );
    $polyLine = new \PolyLine($coordinates);
    $netteGMapViewer->setPolyLine($polyLine);
          
    return $netteGMapViewer;
}
{control netteGMapViewerPolyline}

Usage picker in form

This example show how to set GPS position on map: picker

protected function createComponentGMapForm() {

    $form = new Nette\Application\UI\Form;
    
    $form->addGMap('position', 'Position:')
        ->setWidth("500")
        ->setHeight("500");
        //->showMyActualPositionButton();
        //->setScrollwheel(TRUE);
    
    $form->addSubmit('send', 'Save');
    
    $form->onSuccess[] = [$this, 'gMapFormSucceeded'];
    return $form;
}

public function gMapFormSucceeded($form) {
    $values = $form->getValues();
    
    dump($values);
    exit();
} 

Set default position value for picker:

$form->setDefaults(array(
    'position' => array(
        'latitude' => "49.1695254488",
        'longitude' => "14.2521617334",
    ),
));

Latte:

{control gMapForm}

After send form:

Nette\ArrayHash #f110
    position => array (2)
        latitude => "50.0923932109" (13)
        longitude => "14.4580078125" (13)

Usage layer

This example show how to add own picture on map as a new layer: layer

protected function createComponentNetteGMapLayer() {
    $netteGMapViewer = new \NetteGMapLayer();
    //$netteGMapViewer->setCenterMap(new \GpsPoint("48.977153", "14.454486"));
    $netteGMapViewer->setHeight("600px");
    $netteGMapViewer->setScrollwheel(TRUE);
    $netteGMapViewer->setZoom(18);
    
    $netteGMapViewer->setLayerUrlImage("http://www.barcampjc.cz/pictures/parkoviste.jpg");
    
    $netteGMapViewer->setLayerLeftDownCorner(new \GpsPoint(48.97685376928403, 14.453693823169715));
    $netteGMapViewer->setLayerRightTopCorner(new \GpsPoint(48.97771464665134, 14.45583921230309));
    
    return $netteGMapViewer;
}

Latte:

{control netteGMapLayer}

Get coordinates from address

\GMapUtils::getCoordinatesFromAddress("Prague, Czech Republic")

return

array( "gps_lat" => 50.0755381, "gps_lon" => 14.4378005)

Get address from coordinates

\GMapUtils::getAddressFromCoordinates( 50.0755381, 14.4378005 )

return

Náměstí Míru 820/9, 120 00 Praha-Praha 2, Czech Republic

Set marker position from out script (JS)

$( "#my-div-map div.nettegmap-canvas" ).setMarkerPosition( 14.1111, 48.2222 );

Limits looking coordinates

Users of the free API: 2,500 requests per 24 hour period. 5 requests per second.

Callback after change position marker in main.js

When you want call your code after marker position chaged, you can be inspired by this code. main.js

$( function() {
    $( 'body' ).netteGMapPicker( {
    
        //my callback marker change position
        changePositionMarker: function( results ) {    
            var district = results[4].formatted_address.split(",");
            //alert( district[0] );
            $("select#frm-addCompetitionForm-district_id option").each(function() { this.selected = ( this.text === district[0] ); });
            $("select#frm-editCompetitionForm-district_id option").each(function() { this.selected = ( this.text === district[0] ); });
            //alert('changePositionMarker');
        }
    
    } );	
} );