Welcome, Guest

TOPIC: J-Cook and Google-Map Fields [in condensed form]

J-Cook and Google-Map Fields [in condensed form] 12 Jun 2016 20:32 #14035

vlemos
Online
Elite Member
Posts: 295
Thank you received: 41
Karma: 21

Have you ever wanted to add a map to your condensed j-cook page? Here is a quick way to do just that.

Edit the form file components\com_map\models\forms\addressitem.xml and add the following lines:

<field name="map"
	alias="map"
	label="MAP_FIELD_MAP"
	type="ckmap"/>

Add the file "ckmap" from the attached zip to:
administrator\components\com_map\models\fields\ckmap.php. this tells your component where to find the map object in JDom.

In libraries\jdom\html\form\input and libraries\jdom\html\fly add the files "map.php" for the respective folders found in the attached zip.

In the form view, define the field and pass the parameters to size map as below:

$fieldSet['jform_map']->jdomOptions = array(
	'domClass' => 'map-canvas',
	'height' => 300,
	'width' => 420
);

In the fly view, define the field and pass the parameters to size the map as below:

<?php echo JDom::_('html.fly.map', array(
	'domId' => 'jfly_map',
	'height' => '300',
	'width' => '420'
));?>

[img size=672, 556]s33.postimg.org/55gj82dlb/fly.png[/img]

And of course you will also need the google map api somewhere on that page:

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

In my case, I needed to get the lat/lon and address so the attached example component only captures these parameters. Note: the component doesn't reload the marker position from the stored data.

Hope this is helpful to someone trying to work with j-cook and google maps. Would love to see a basic map-wizard in the builder sometime in the future.

Example component "com_map.zip" would not upload due to its size but available on request.

Attachments:

...hed.zip (7KB)

Last Edit: 13 Jun 2016 05:25 by vlemos.

The administrator has disabled public write access.

The following user(s) said Thank You: admin, MorganL, jonathanbell

J-Cook and Google-Map Fields [in condensed form] 13 Jun 2016 08:23 #14038

Romkabouter Offline Elite Member Posts: 310 Thank you received: 131 Karma: 48	Nice!
	The administrator has disabled public write access. The following user(s) said Thank You: vlemos

J-Cook and Google-Map Fields [in condensed form] 13 Jun 2016 11:16 #14041

MorganL
Offline
Platinum Member
Posts: 438
Thank you received: 53
Karma: 16

Brilliant, well done!

With regards to updating the map if you change the fields, could you not have the map script look for the existance of $this->item->longtitude / latitude and if exists default the map to those locations on load

Also, you could have on the long / lat / address an onChange -> fire a script that redraws the map with the new settings

Could you not create a public GIT of your component and then people can fork it and use it as a base for improvement as this is a really great piece of work

Morgan Leecy MCSE

Novell / Linux
PHP. MYSQL, Apache, node.js
Coldfusion, JQuery, HTML5
Joomla

The administrator has disabled public write access.

The following user(s) said Thank You: vlemos

J-Cook and Google-Map Fields [in condensed form] 13 Jun 2016 13:59 #14050

vlemos
Online
Elite Member
Posts: 295
Thank you received: 41
Karma: 21

Thank you all for your feedback

With regards to updating the map if you change the fields, could you not have the map script look for the existance of $this->item->longtitude / latitude and if exists default the map to those locations on load

Also, you could have on the long / lat / address an onChange -> fire a script that redraws the map with the new settings

Yes, did this in my final product; however, left some fun in for other cooks

Could you not create a public GIT of your component and then people can fork it and use it as a base for improvement as this is a really great piece of work

Yes, but time and support would be my challenge. Can send it to anyone who wants to make it available online or just wants to see a working solution.

Warm regards
vlemos

The administrator has disabled public write access.

The following user(s) said Thank You: MorganL

J-Cook and Google-Map Fields [in condensed form] 13 Jun 2016 14:54 #14052

MorganL Offline Platinum Member Posts: 438 Thank you received: 53 Karma: 16	Well I would personally love to see the final work. A map selector is something I have suggested a couple of times on a 'wishlist' for J-Cook. Can you maybe create a short term weupload or dropbox link to share it or you can send to temp[at]moledesign[dot]biz With regards to Git, I just meant open source so others can fork it, not necessarily come to you for support
	Morgan Leecy MCSE Novell / Linux PHP. MYSQL, Apache, node.js Coldfusion, JQuery, HTML5 Joomla The administrator has disabled public write access.

J-Cook and Google-Map Fields [in condensed form] 13 Jun 2016 16:05 #14056

admin
Offline
Administrator
Chef
Posts: 3711
Thank you received: 984
Karma: 140

Thank you very much for your code !
K++

There was also a piece submitted by @Tomasselli, long time ago, for JDom :
github.com/Cook-Self-Service/JDom/commit...9c572731072ddae4540e

But it needs to be improved a little bit.
I would prefer the namespaces :
- html.form.map.google (for edit)
- html.fly.map.google (for viewing)

In this way JDom abstract it all, such as a plugin. it automatically load the google API located in :
- framework.google.map

I just giv the names of the expected namespaces for JDom.
This feature is VERY nice and I would like to integrate it in Cook since a long time.

Let's see if I can release that during the summer, or maybe very soon.
The most difficult part for me is the javascript in the builder, I need to code a little bit.

The expected values for Google map (or other... OpenStreetMap, ...), would be :
- Address : composed by a freedom of choice from the table fields AND Foreign Keys (ex: City > Name, Country > name, ...)
- Latitude : Can be autopopulated by the map
- Longitude : idem
- other idea ?

For the moment, I refuse the others more complex ideas such as polygons, circles, paths... Because I would like to make it simple. But I already created a component with cook that was including such map and circles for a vegetables delivery shop. So everything is possible in future.

All you submissions are very welcome, and remember you can Pull Request in JDom because it is much easier to test and separated form Cook Builder, so it is more safe. Then until the builder is able to propose it, you still have JDom ready for use and only few lines of code and you get it.
That's the power of abstraction.

PS : For the beginners with Github, I suggest to use the "Source Tree" program, wich is just amazing.
www.sourcetreeapp.com/

Coding is now a piece of cake

The administrator has disabled public write access.

The following user(s) said Thank You: vlemos

J-Cook and Google-Map Fields [in condensed form] 04 Jul 2016 09:36 #14123

admin Offline Administrator Chef Posts: 3711 Thank you received: 984 Karma: 140	Exclusivity for this Monday. You will love this one: www.j-cook.pro/index.php/demo It is a beta, and I need to finish it properly. The component is available in the samples (v1.3) Sure you will love it.
	Coding is now a piece of cake The administrator has disabled public write access. The following user(s) said Thank You: vlemos

J-Cook and Google-Map Fields [in condensed form] 05 Jul 2016 04:37 #14134

vlemos Online Elite Member Posts: 295 Thank you received: 41 Karma: 21	Great Admin! Are you planning to add it as a wizard to allow the builder to bind the lat, lng and address values to table fields? Warm regards vlemos
	The administrator has disabled public write access.

J-Cook and Google-Map Fields [in condensed form] 05 Jul 2016 21:54 #14152

admin
Offline
Administrator
Chef
Posts: 3711
Thank you received: 984
Karma: 140

It will come. As well as many related features.
As a Joomla field, as a wizard in the builder...

I already have written the code to auto-populate Lat/lng with their JSON web service, but I can't find the proper way in Joomla to make a good request.
So I implemented UniREST for that (using curl base), but I don't like to include a third library in your component.

I am search how is the best way. In case I will implement this lib in your components until I get a better alternative.
At the moment I don't find the proper way. It is a lightweight lib, But WTF, why is it missing in Joomla ?

Then about the maps, a lot more to come, but not in these weeks. Bit later.

Coding is now a piece of cake

The administrator has disabled public write access.

The following user(s) said Thank You: vlemos

J-Cook and Google-Map Fields [in condensed form] 06 Jul 2016 02:04 #14153

vlemos
Online
Elite Member
Posts: 295
Thank you received: 41
Karma: 21

Sounds great Admin

It may be good to leave it up to the cooks to add most of the functionality; you never know what a given task will require. Having lots of example snippets is a great idea and you have done this in your "hello my world" demo.

So without overthinking it, you can consider simply using JavaScript [see basic code below] and bind the selected fields in the wizard [see image]: jform_latitude - 'float 10,6', jform_longitude - 'float 10,6' and jform_address - 'string'. Lat, lng and zoom allow repositioning of the map on reload.

Warm regards
vlemos

var lat	=  <?php echo $this->item->latitude; ?>;
var lng	=  <?php echo $this->item->longitude; ?>;
var zoom	=  <?php echo $this->item->zoom; ?>;

function init_map(){
	var form_name = null;
	var myOptions = {
		zoom: zoom,
		center:new google.maps.LatLng(lat, lng),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(
		document.getElementById('jform_map'), myOptions
	);

	marker = new google.maps.Marker({
		map: map,
		draggable: true,
		position: new google.maps.LatLng(lat, lng)
	});

	google.maps.event.addListener(map,'zoom_changed',function(){
		document.getElementById("jform_zoom").value = map.getZoom();
		map.panTo(marker.getPosition());
	});
	google.maps.event.addListener(marker, 'dragend', function(event){
		var point = marker.getPosition();
		map.panTo(point);
		document.getElementById("jform_latitude").value = point.lat().toFixed(5);
		document.getElementById("jform_longitude").value  = point.lng().toFixed(5);

		var geocoder = new google.maps.Geocoder();
		geocoder.geocode({"location": point}, function (results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				document.getElementById("jform_address").value  = results[1].formatted_address;
				if (!form_name || 0 === str.length) {
					document.getElementById("jform_name").value  = results[1].formatted_address;
				}
			}
		});
	});

	var input = document.getElementById('jform_address');
	var autocomplete = new google.maps.places.Autocomplete(input);
	google.maps.event.addListener(autocomplete, 'place_changed', function () {
		var place = autocomplete.getPlace();
		document.getElementById('jform_latitude').value = place.geometry.location.lat();
		document.getElementById('jform_longitude').value = place.geometry.location.lng();
	});
}
google.maps.event.addDomListener(window, 'load', init_map);

The administrator has disabled public write access.

J-Cook and Google-Map Fields [in condensed form] 06 Jul 2016 12:11 #14159

admin
Offline
Administrator
Chef
Posts: 3711
Thank you received: 984
Karma: 140

For the wizard, it is exactly how I think to do for the interface.
Adding latitude / longitude fields.
Adding multiple fields in the address (I will call it "search")
But also it will implement bounds (north / south / est / west). Because the geocoding returns those informations as well. At the moment it is not done, but see how it would be great. See the "Country" map, it is buggy if you choose a big country (Russia, USA, Brazil), the zoom is too close. If you choose Andorra, you don't see the country.

So improvements to come, but later. That was a first draft for tests. Also there is no way I integrate it in the builder without Open street implementation. Because we are in Open source mentality, so Google will NOT be released BEFORE Open Street.
Be patient. I have myself waited 5 years because to dedicate the time for the maps, and not so much people are asking believe me.

Uses manually JDom, and this is already a huge step.

About storing latitude and longitude, two ways are possible. This is the 'FORM' version of the plugin.
1. With PHP on the save() method, using the GeoAPI called by a web-service request.
2. With JS as you propose (didn't looked closer). The idea will be to furnish to JDom the fields (possibly hidden) to populate when the marker is moved.

For the field type, I prefer decimal, because the floats are rounding the values, and for our case the decimal point is static (never more than 3 digits left). Use float when you can really varies a lot in the ^10. from 10^-x to 10^x (You know what I mean ?)
So lat/lng are decimal (10,7)

Thank you for your proposals, and be sure that if you want to have it integrated faster, make a pull request.
github.com/Cook-Self-Service/JDom

Source Tree is very simple program to do it. (But always pull JDom before to PR)

Coding is now a piece of cake

The administrator has disabled public write access.

J-Cook and Google-Map Fields [in condensed form] 01 May 2017 01:23 #15082

vlemos Online Elite Member Posts: 295 Thank you received: 41 Karma: 21	Hello Admin anything being done to automate google maps j-cook integration yet?
	The administrator has disabled public write access.

J-Cook and Google-Map Fields [in condensed form] 04 May 2017 09:09 #15110

admin Offline Administrator Chef Posts: 3711 Thank you received: 984 Karma: 140	Nothing yet.
	Coding is now a piece of cake The administrator has disabled public write access.