Address fields, geocoding, map

[fliwatuet]

Hello!

I want to build a page with these fields:

Street, Postal Code, City

Call it an address Then I want to take this address, geocode it and display it on a map.

How can I achieve this? I started with Map Marker (Google Maps) and Leaflet Map Marker but I am not able to get them working. Is there any other possibility? I am not a php programmer, I can't code a module for that.

[fliwatuet]

Ok, Map Marker is working right now, but it is still not the way, I want to set it up, because the address is in on field an not divided in Street, Postal Code, City.

Any ideas how to do this?

[AndZyk]

Hello @fliwatuet,

the easiest way I can think of, is creating three extra fields:

• Street: Text
• Postal Code: Integer
• City: Text

And use the existing Map Marker field for storing the geocode. That way you would have to enter the address twice, but you could easily access them with the API.

Another approach would be to explode the address of the Map Marker field into an array:

$address = explode(",", $page->map->address);

echo $address[0]; // Street
echo $address[1]; // Postal Code
echo $address[2]; // City

But that would of course require you to always provide those three values separated by commas.

Regards, Andreas

[adrian]

I think there are a couple of approaches - you could concatenate the separate fields and save that to the map marker field when the page is saved, or you could parse the address from the map marker into the separate chunks to output in your template file.

Do you have an idea which you might prefer?

[fliwatuet]

Thanks @AndZyk and @adrian!

For the end user it will be easier to use the map marker field but then there is a chance that they forget the commas to separate the values. Three or more different fields are not that comfortable to use, copy and paste is not possible.

Which way do you think is the best solution?

Or is it possible to sort and filter a "view" (Drupal background ) by e.g. City or postal code out of the map marker field when retrieving all location pages? I looked at the skyscraper demo but it is hard to understand.

[AndZyk]

In my opinion, three separated fields would be the best solution. If you are not sure, wether your users will enter the right values into an field, you can always point them into the right direction using the description or notes for each field. Even though it might not be the most comfortable way, if used you can do all sorts of sorting and filtering in the front end with this data. 

Another approach @adrian was pointing to, is using a hook to save the extra fields combined in the map marker field.

[fliwatuet]

Thanks @AndZyk! This hook-stuff looks a bit complicated at first glance. Is there a tutorial for that?

[AndZyk]

Yes, hooks is a little more advanced topic. In fact I never really used them myself until recently. 

The link on my previous post is the official documentation of hooks, but if you want a more tutorial-like article, this one could be useful:

http://www.flamingruby.com/blog/using-hooks-to-alter-default-behavior-of-processwire/

Also have a read, where and when you can put hooks:

https://processwire.com/blog/posts/processwire-2.6.7-core-updates-and-more/#new-core-files-for-site-hooks

[adrian]

Another, maybe better, approach would be to use AdminCustomFiles (http://modules.processwire.com/modules/admin-custom-files/) to add some custom JS to do this on-the-fly.

Then use jQuery to grab the contents of your street and city fields, concatenate them, insert them into the map address field and then blur so that google maps triggers a geocode.

Maybe something like this:

$('#Inputfield_city').on( "blur", function() {
    var address = $('#Inputfield_street_address').val() + ' ' + $('#Inputfield_city').val();
    $('#Inputfield_map').val(address);
    $('#Inputfield_map').blur();
});

On limited testing here it seems to work just fine. Of course it assumes the address field is named "street_address" and the city field is "city" and the mapmarker field is simply "map".

Let me know if that works for you.

Don't forget that you can test via your dev console so you know it's working before adding via Admin Custom Files.

PS - of course you can always add commas, and even state and country elements to the address that goes into the map address field for geocoding.

[fliwatuet]

Thanks @AndZyk and @adrian I will give it a try, AdminCustomFiles look easier to me to understand and implement than hooks. Maybe I use just a dropdown for city and the map marker field for the address.

[fliwatuet]

@adrian here is what I did:

1. Install the module and set Enable for process to  ProcessPageEdit, (Page Edit)
2. Create two fields: street, city
3. Add these two fields to the template basic-page and arrange them ahead the map marker field
4. Create a file called basic-page.js in /site/templates/AdminCustomFiles/

Content of the file:

$('#Inputfield_city').on( "blur", function() {
    var address = $('#Inputfield_street').val() + ', ' + $('#Inputfield_city').val();
    $('#Inputfield_location').val(address);
    $('#Inputfield_location').blur();
});

I checked in the source code while editing the content, the file basic-page.js is loaded. But nothing happens. Where is the mistake?

[adrian]

If everything works with that JS entered into your browser dev tools console, and the basic-page.js is loaded, then it's likely that the script is being called before the page's input fields are ready. Try wrapping it so it looks like this:

(function ($) {
    $('#Inputfield_city').on( "blur", function() {
        var address = $('#Inputfield_street').val() + ', ' + $('#Inputfield_city').val();
        $('#Inputfield_location').val(address);
        $('#Inputfield_location').blur();
    });
}(jQuery));

 

[fliwatuet]

Both scripts are working in the console but none is working in the edit form. Strange...

The header, when editing content:

<script type='text/javascript' src='/site/templates/AdminCustomFiles/basic-page.js'></script>

Edit: tried a different browser, nothing happens when editing...

[fliwatuet]

This is working:

(function ($) {
    window.onload = function() {
		alert('LOAD LOAD');
    };
}(jQuery));

The alert window shows up.

[adrian]

Any chance your map and address fields are in a fieldsettab?

I have a setup like that and just tested with AdminCustomFiles and this works:

$(document).on('wiretabclick', function () {

Of course that will only work if the tab that the map is on is not the one initially loaded. 

Sorry, I don't have time to investigate right now, but keep in mind that you'll need to deal with the scenario when the tab is loaded open first, like after a page save.

Maybe you are not using tabs, but it certainly shows the issue of that jquery being applied before the form elements exist.

[fliwatuet]

Thanks for your help @adrian it is working now!

Solution:

(function ($) {
    $( document ).ready(function() {
        $('#Inputfield_city').on( 'blur', function() {
            var address = $('#Inputfield_street').val() + ', ' + $('#Inputfield_city').val();
            $('#Inputfield_location').val(address);
            $('#Inputfield_location').blur();
        });
    });
}(jQuery));