Creating more complex Google Map module

virshu

So, I think I figured out how to do little tinkering here and there, and now I want to do develop something more sophisticated. The ultimate goal is to solve the following business use case: when user is visiting a customer he wants to schedule several other service calls in the same neighborhood (the business is piano service; so he is visiting the clients on a regular basis, and if he is stuck for several hours in Southern California traffic, he'd rather make it worth the trip).

My design is to have a button on a contact detail page that would bring a Google map with a red pin for the current contact, and 5 or 10 closest contacts. There could be other logic, but let's keep things simple. As part of module install I created a table with two columns: id and location. id is a foreign key to id in contact_data table; and location is a spatial POINT. I prepopulated this table by getting latitude and longitude from contacts' addresses (Google allows only 2500 lookups per day, so it will take me a few days to go through all contacts). This will allow me to calculate the distance quickly and with a very simple SQL statement.

Now I am ready for epesi development. I read the tutorial - I think very thoroughly. Since it goes into details how to create a module, I decided to have a standalone module first. I have a menu item, and I can show simple output, but I can't output a map. On a standalone HTML page I would have something like this:



<html>

  <head>

    <style type="text/css">

      #map_canvas { height: 100% }

    </style>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">

    </script>

    <script type="text/javascript">

      function initialize() {

        var myOptions = {

          center: new google.maps.LatLng(-34.397, 150.644),

          zoom: 8,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),

            myOptions);

      }

    </script>

  </head>

  <body onload="initialize()">

    <div id="map_canvas" style="width:100%; height:100%"></div>

  </body>

</html>

(API Key is provided by Google). Couldn't figure out how to put CSS and javascript into HEAD section; so I put it in the body. I can see in DOM inspector that everything is there. I also removed call to initialize() from "onload" (since I don't have body tag anyway) and put it into the script. So, now I print the following:



    <style type="text/css">

        #map_canvas { height: 100% }

    </style>

    <script type="text/javascript"

      src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">

    </script>

    <script type="text/javascript">

      function initialize() {

        var myOptions = {

          center: new google.maps.LatLng(-34.397, 150.644),

          zoom: 8,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),

            myOptions);

      }

      initialize();

    </script>

    <div id="map_canvas" style="width:100%; height:100%">Map should be here :(</div>

And I get my sad message instead of the map.

To confirm, I put alert() or console.log() between the script tags, and nothing happened. So, my first question - how do I invoke JavaScript from the page?

Any suggestions would be welcome!
Thanks

ethnar

There are two ways you can tackle this problem - iframe or display through EPESI.

The iframe solution is much easier and while it may not be ideal I'd still recommend that approach.
First you need to print the iframe from the module level:

<iframe style="width: 100%; height:400px; border: 0px" src="'.$this->get_module_dir().'/map.php?'.http_build_query('cid'=>CID).'"></iframe>

Now the script:



<?php

if(!isset($_REQUEST['cid'])) die('Invalid usage');

$cid = $_REQUEST['cid'];

define('CID', $cid);

define('READ_ONLY_SESSION',true);

require_once('../../../include.php'); // adjust the path depending on your module location

ModuleManager::load_modules();

(...) // your code

?>

The CID variable is Client ID - the ID of the frame the user has currently opened. Depending on how exactly you'll be extracting the data, it may not be necessary and you can supply 'false' as a value in the map script.
If you want to pass additional information (like contact/client ID) you can do that by extending the http_build_query(). You can use all the Common methods of all modules installed in EPESI, you can use the Utils_RecordBrowserCommon::get_records() to retrieve data, as well as the DB class.
Please make sure that the script checks whether or not the user has sufficient rights to access whatever data you'll be extracting (at the very least check Acl::is_user()).

In that iframe you can place any tags, JS, etc. just like you'd be displaying a regular web page.

The other approach is to print the map directly on module level. The standard print('<script>') will not work here, because of the way the the HTML in placed by the EPESI on the website. Instead, you can use the methods:
- eval_js($js); - execute Javascript. Every time the module is displayed the code will be executed
- eval_js_once($js); - execute Javascript, but only once for a full EPESI refresh. Leaving and going back to the module will not execute the code again
- load_js($js_file); - load JS file. Only works for local files, you may not load remote file that way
There's also a method for loading css files:
- load_css($js);
That way however, there's no easy, straight-forward method of including external JS files required by google maps API. Workarounds are possible of course.

Hope this posts helps you with your work.

Kind regards,
Arek

virshu

Thank you! As much as I am suspicious of iframes, I got it working fairly easily, thanks to your guidance. I am still debugging it in a standalone module, as opposed to having it embedded in the contact page. I am sure I'll have more questions as I move along.

virshu

OK, I am happy to report that this thing works really nice as a standalone module. Frankly, it didn't give me a lot of epesi understanding, since it is running in its own iframe. But at least I am using DB::Execute, rather than mysqli->query 😛

I am still not clear how to put JavaScript into <head> section, or how to invoke it in the "onload" manner. I am not familiar with scriptaculous - JQuery is pretty much the only library that I've used in the last 5 years.... So, as a workaround, I put <div> before javascript function that loads the map. It's kinda outdated style, but it works!

Anyway, now I need some help to integrate this into CRM page. I imagine it would look nice as another tab, along with Notes, emails, etc. I am somewhat confused between modules/CRM/Contacts/theme/Contact.tpl and data/Base_Theme/templates/default/CRM/Contacts/Contact.tpl - what controls the layout of the screen, and what's the difference between the two.

Second question is how to hook into Contact save procedure - so that when contact information (namely, address) is saved - I can update coordinates accordingly.

ethnar

[quote="virshu":1a6q7fu3]I am still not clear how to put JavaScript into <head> section, or how to invoke it in the "onload" manner. I am not familiar with scriptaculous - JQuery is pretty much the only library that I've used in the last 5 years.... So, as a workaround, I put <div> before javascript function that loads the map. It's kinda outdated style, but it works![/quote:1a6q7fu3]
In my previous post you find the description of eval_js() method. That's exactly what you need here. 🙂

[quote="virshu":1a6q7fu3]Anyway, now I need some help to integrate this into CRM page. I imagine it would look nice as another tab, along with Notes, emails, etc. I am somewhat confused between modules/CRM/Contacts/theme/Contact.tpl and data/Base_Theme/templates/default/CRM/Contacts/Contact.tpl - what controls the layout of the screen, and what's the difference between the two.[/quote:1a6q7fu3]

Ok, let me explain it bit by bit.
First of all, you have the file modules/<module>/theme/<name>.tpl (for instance the modules/CRM/Contacts/theme/Contact.tpl). That file is coming with the module to provide a way to separate the view layer (interface) from the controller layer (the logic).
Now, that file is copied, during installation, to data/Base_Theme/templates/default/<module>/<name>.tpl (in this eample data/Base_Theme/templates/default/CRM/Contacts/Contact.tpl). This is done to further separate the view and controller. That way, all the *.tpl file end in one place and they can be modified and copied to create new templates.
When EPESI is asking to use one of the *.tpl files, it's using the one in /data folder. Please remember that at certain times (updates) the contents of files in data/Base_Theme/templates/default/ folder will be overwritten, so if you change the contents of that folder, make sure to back up your changes.

The next thing you should know is what this particular tpl contains. RecordBrowser displays a record in 3 major parts:
- the main part of the record (what you see in the top part of the screen)
- the additional fields in the record (the fields that you see in "tabs" at the bottom part of the screen)
- the addons (again - displayed as tabs, but they display data that is not strictly linked with the record, i.e. the entry in the database)
The difference between the last two parts may be a bit blur at first, but simply put - the fields are what's displayed when adding/editing the records, addons are not displayed at this time.

So now that we have 3 parts we're back to our tpl. The tpl provided by Contacts is used to overwrite the way the main part of the record is displayed (the top part). It's useful if you want to re-position some of the fields, like the "Create new company" checkbox and text field. It's also useful to alter the layout like in Meetings or Contacts with Photo module installed.

Assuming that you don't necessarily want to add the map to the top section of the screen, the tpl is of no interest to you. As you said yourself, you'd see that map displayed in a tab in contacts and I should say that's much easier to achieve.
To do so, simply add another "addon" through your module installation routine:

Utils_RecordBrowserCommon::new_addon('contact', 'Your/Module', 'maps_addon', 'Map');

Arguments are:
- RecordSet that you want to create addon for
- your module main class
- method name
- label to be used on the "Tab"
Your method needs only to accept one parameter - it will be the currently displayed record (associative array). And it's that method that you should place your iframe print in. 🙂

[quote="virshu":1a6q7fu3]Second question is how to hook into Contact save procedure - so that when contact information (namely, address) is saved - I can update coordinates accordingly.[/quote:1a6q7fu3]

For that you will need to use the method

Utils_RecordBrowserCommon::register_processing_callback('contact', array('Your_ModuleCommon', 'process_contacts'));

More details available here: http://www.epesi.org/index.php?title=Ut ... riggers.29

Hope this helps,
Arek

jasiek

Sorry, we encountered an error while displaying this content. If you're a user, please try again later. If you're an administrator, take a look in your Flarum log files for more information.

virshu

Guys,
This is awesome explanation... I am very familiar with Smarty templates; so it makes perfect sense to me. I hope it will make its way to developer tutorial and will be helpful to others as well - it's now just cut and paste 😉
Overall, I find the framework very easy to understand and work with - but without documentation it's hard to understand the architecture and high-level design decisions behind it. But hopefully, I am helping you write such documentation with my questions 😃

virshu

Quick note about documentation on triggers ( http://www.epesi.org/index.php?title=Ut ... riggers.29 )
[quote:1am67a5d]Each call will pass to your method 3 arguments[/quote:1am67a5d]
You meant 2. Specifics list two arguments, and only 2 are actually passed.

The table of actions is missing edit_changes that is sent when edited record is committed to the database.

There is also "display" action, don't know how is it different from "view" - but it is not relevant to my stuff.

Overall, it works beautiful!

virshu

Just wanted to share the result. Works well. I am planning to have the list of neighbors to the left of the map, and be able to link and go to the contact record of the neighbor, but that's already gold-plating...

jasiek

Excellent results and congratulations.

How would you rate your experience in creating a module and extending functionality of EPESI? Is it easy?

BTW - every address field in EPESI can be made a link to open Google Maps with this address shown in a new window. There is also a module - in early beta stage - that shows on a map let's say locations of job site visits to plan your route the best way.

moodino

I apologize if I open this old thread but I would be interested in viewing the module to geo-reference works. thank you

ajb

Hi,
as far as I know we don't have any general usage module basing on maps. We've got some client specific extension to show some points on the map. (I haven't read all the thread, because it seems too long and too old ?)

Maybe describe what you'd like to have, maybe we've got some solution or we can do something.

Best regards,
Adam

Epesi ENS | Epesi Academy | epesi.cloud PaaS | GitHub

Help Me! | Download from SourceForge