Build a Mobile App to Geo Locate Nearby Places with Drupal

Category: 

In this tutorial (for DrupalCamp Ohio 2014) we'll explore how to build a mobile application and website that can geo locate places near our current position. The nearby location results will be displayed on a map, and will allow us to click on a result item to view its complete details.

The website will be powered by Drupal 7. The mobile application will be built using DrupalGap, which is powered by PhoneGap and jQuery Mobile. Let's get started!

1. Download and Install Drupal 7

2. Download and Enable the DrupalGap Module

3. Download and Enable the Address Field Module

4. Download and Enable the Geofield Module

4.a Enable the Geofield Map Module

This module comes packaged with the Geofield module, enable it as well.

5. Download and Enable the Geocoder Module

6. Create a Content Type called "Location"

Let's create a content type called "Location" at admin/structure/types/add.

6a. Add an Existing Image Field to the Content Type

  1. Go to admin/structure/types/manage/location/fields
  2. In the "Add existing field" section, select "Image: field_image (Image)", or select your own existing image field, or create a new one
  3. Click the "Save" button
  4. Keep all the default settings (optional), then click the "Save settings" button

7. Add an Address Field to the Content Type

In Drupal, go to admin/structure/types/manage/location/fields and add a new field with these values:

  • Label: Address
  • Machine Name: field_address
  • Field Type: Postal address
  • Widget: Dynamic address form

Click the "Save" button, then click the "Save field settings" button, and finally click the "Save settings" button at the bottom of the form. We'll just use all the default values provided for this tutorial, but feel free to adjust them.

8. Add a Geofield to the Content Type

In Drupal, go to admin/structure/types/manage/location/fields and add a new field with these values:

  • Label: Position
  • Machine Name: field_position
  • Field Type: Geofield
  • Widget: Geocode from another field

Click the "Save" button, then...

  1. Set the "Geocode from field" select list to "Address"
  2. Set the "Geocoder" select list to "Google geocoder"
  3. Click the "Save settings" button at the bottom of the form

We'll just use all the default values provided for this tutorial, but feel free to adjust them.

9. Adjust the "Manage Display" Settings for the Content Type for each Display Mode

  1. Go to admin/structure/types/manage/location/display
  2. Change the "Format" for "Position" to "Geofield Map"
  3. Click the "Save" button.
  4. Optional, repeat this for other fields and display modes (i.e. DrupalGap display mode)

10 Create some Locations with Addresses and Images

If you haven't already, go ahead and create some location nodes with addresses and images:

node/add/location

The geocoder will automatically fetch the latitude and longitude coordinates and store them within field_position. I'd recommend creating location nodes with addresses nearby your current position.

11. Create a Views JSON Page Display to Retrieve Nearby Results

Now that we've got some location nodes with address and coordinate data, we're ready to build a View. For this example our center location will be:

Nationwide and Ohio Farm Bureau 4-H Center
2201 Fred Taylor Dr.
Columbus, OH 43210

Which has latitude and longitude coordinates of 40.008078, -83.028636. The View  will return to us JSON data about the location nodes that are within a given coordinates' radius.

11.1 Create the View

  1. In Drupal, go to: admin/structure/views/add, then input these values:
  2. View name: Nearby Locations
  3. Machine name: nearby_locations
  4. Show Content of type Location sorted by Unsorted
  5. Check the "Create a page" box
  6. Path: nearby-locations.json
  7. Display format: JSON data document
  8. Items to display: 5
  9. Click "Continue & Edit"

11.2 Create a Contextual Filter for the Geofield's Proximity

  1. In the "Contextual Filters" section, Click the "Add" button
  2. Type the word "Position" into the Search box, to locate your field
  3. In the search results, check the box next to "Content: Position (field_position) - proximity"
  4. Click the "Apply (All Displays)" button
  5. In the "When the Filter Value is not in the URL" section, select the 'Display contents of "No Results Found"' radio button
  6. Expand the "Exceptions" field set, and clear out the "Exception value" text field
  7. Scroll down to the "Unit of Distance" selection list and choose your preferred option (we'll use Miles for this example)
  8. Click the "Apply (All Displays)" button

Why miles? Well you see, here in America we don't like units of 10, and instead prefer to make our lives, and the rest of the world's, difficult.

11.3 Sort by Closest Location (Proximity)

  1. In the "Sort criteria" section, Click the "Add" button
  2. Type the word "Position" into the Search box, to locate your field
  3. In the search results, check the box next to "Content: Position (field_position) - proximity"
  4. Click the "Apply (All Displays)" button
  5. Select the "Sort ascending" radio button
  6. Under the "Source of Origin Point" select list, choose the "Contextual Geofield Proximity Filter" option
  7. Click the "Apply (All Displays)" button

11.4 Change the Label on the Title Field, and Add 3 Fields: nid, proximity/latitude and proximity/longitude

We'll adjust the label on the title field, and add 2 more fields to our View:

  1. In the "Fields" section, click on the "Title" field, and change the label to: title
  2. Click the "Apply (All Displays)" button
  3. Click the "Add" button to add a new field
  4. Type the word "Nid" into the Search box, to locate the "Content: Nid" checkbox
  5. Click the "Apply (All Displays)" button
  6. Change the label to: nid
  7. Click the "Apply (All Displays)" button
  8. Click the "Add" button to add another field
  9. Type the word "Position" into the Search box, to locate your field
  10. In the search results, check the box next to "Content: Position (field_position) - proximity"
  11. Click the "Apply (All Displays)" button
  12. Uncheck the "Create a label" checkbox
  13. Set the "Round" to 2 decimal points
  14. Select the "Miles" option on the "Unit of Measure" select list
  15. Under the "Source of Origin Point" select list, choose the "Contextual Geofield Proximity Filter" option
  16. Click the "Apply (All Displays)" button

11.4a Add a Latitude and Longitude Field to the View

  1. In the "Fields" section, click the "Add" button
  2. Type the word "Position" into the Search box, to locate your field
  3. In the search results, check the box next to "Content: Position"
  4. Click the "Apply (All Displays)" button
  5. Change the label to: latitude
  6. Change the "Formatter" to "Latitude Only"
  7. Click the "Apply (All Displays)" button
  8. Repeat steps 1-7 for Longitude

11.4 b Add an Image Field to the View

  1. In the "Fields" section, click the "Add" button
  2. Type the word "Image" into the Search box, to locate your field
  3. In the search results, check the box next to "Content: Image"
  4. Click the "Apply (All Displays)" button
  5. Uncheck the "Create a label" checkbox
  6. Change the "Image style" to "Thumbnail 100x100"
  7. Click the "Apply (All Displays)" button

11.5 Preview the Results

  1. Scroll down to the "Preview with contextual filters" text field
  2. Enter your latitude and longitude separated by comma (with no spaces), then add an underscore followed by the radius to search within. For example, 40.008078,-83.028636_4
  3. Click the "Update preview" button
  4. Observe the results

What this means is, given a latitude and longitude center point, find content within a 4 mile radius. Adjust the coordinates and radius to simulate a position near you and your content. Here's what the result set will look similar to:

{
  "nodes" : [
    {
      "node" : {
        "title" : "Ohio Stadium Football Field",
        "field_geofield_distance" : "0.6",
        "nid" : "1",
        "latitude" : "40.003680400000",
        "latitude" : "-83.019381800000",
        "field_image" : {
          "src": "http://example.com/sites/default/files/...",
          "alt": ""
      }
    },
    {
      "node" : {
        "title" : "The Ohio Statehouse",
        "field_geofield_distance" : "3.6",
        "nid" : "5",
        "latitude" : "39.961333000000",
        "latitude" : "-82.998887300000",
        "field_image" : {
          "src": "http://example.com/sites/default/files/...",
          "alt": ""
        }
      }
    },
    {
      "node" : {
        "title" : "Columbus Museum of Art",
        "field_geofield_distance" : "3.7",
        "nid" : "3",
        "latitude" : "39.964359000000",
        "latitude" : "-82.987958000000",
        "field_image" : {
          "src": "http://example.com/sites/default/files/...",
          "alt": ""
        }
      }
    }
  ]
}

12. Download and Install the DrupalGap Mobile Application Development Kit

During the installation process, it is recommended to use a mobile device with Option 2 when setting up the PhoneGap environment. If this is your first time building a DrupalGap app, it is recommended to go with Option 1 instead.

Option 2, will allow us to compile the app directly to our mobile device. Chances are our mobile device has a GPS feature, so we can use it to locate nearby locations.

Once installed, DrupalGap will look something like the screen shot to the right, when it is running on the mobile device.

13. Enable the Address Field and Geofield Modules in the App

Download the modules and extract them into the app/modules directory:

Then enable them inside the settings.js file:

Drupal.modules.contrib['addressfield'] = {};
Drupal.modules.contrib['geofield'] = {};

14. Create a Page in the App to Display a Map

Next, let's follow the DrupalGap Google Map example documentation, which will create a simple page in the app that displays a map.

15. Set the App's Front Page to the Map

In our app's settings.js file, we'll set the front page of our app to the map:

drupalgap.settings.front = 'map';

Once loaded, the app will try to lookup our current position and display it on a map:

16. Add a Button and an Empty List, to Find and Display Nearby Locations

In my_module_map() (the page_callback function for the map), let's add a button above the map:

content['find_nearby_locations'] = {
  theme: 'button',
  text: 'Find Nearby Locations',
  attributes: {
    onclick: "_my_module_map_button_click()",
    'data-theme': 'b'
  }
};

and an empty list below the map:

content['location_results'] = {
  theme: 'jqm_item_list',
  items: [],
  attributes: {
    id: 'location_results_list'
  }
};

When the button is clicked, it will call the Drupal website (the Views JSON Page) and pass along our current position to it (as a contextual filter):

/**
 * The "Find Nearby Locations" click handler.
 */
function _my_module_map_button_click() {
  try {
    // Build the path to the view to retrieve the results.
    var range = 4; // Search within a 4 mile radius, for illustration purposes.
    var path = 'nearby-locations.json/' +
      _my_module_user_latitude + ',' + _my_module_user_longitude + '_' + range;
      
    // Call the server.
    views_datasource_get_view_result(path, {
        success: function(data) {
          
          if (data.nodes.length == 0) {
            drupalgap_alert('Sorry, we did not find any nearby locations!');
            return;
          }

          // Iterate over each spot, add it to the list and place a marker on the map.
          var items = [];
          $.each(data.nodes, function(index, object) {
              
              // Render a nearby location, and add it to the item list.
              var row = object.node;
              var image_html = theme('image', { path: row.field_image.src });
              var distance =
                row.field_geofield_distance + ' ' +
                drupalgap_format_plural(row.field_geofield_distance, 'mile', 'miles');
              var description =
                '<h2>' + distance + '</h2>' +
                '<p>' + row.title + '</p>';
              var link = l(image_html + description, 'node/' + row.nid);
              items.push(link);
              
              // Add a marker on the map for the location.
              var locationLatlng = new google.maps.LatLng(row.latitude, row.longitude);
              var marker = new google.maps.Marker({
                  position: locationLatlng,
                  map: _my_module_map,
                  data: row
              });
              
          });
          drupalgap_item_list_populate("#location_results_list", items);

        }
    });
  }
  catch (error) { console.log('_my_module_map_button_click - ' + error); }
}

The server will respond with some JSON data about the nearby locations, and we'll display them on the map and inject them into the empty list:

And if we scroll down we can see the result list:

17. Click on a Result List Item to View a Location Node

Provided we adjusted the DrupalGap Display Mode for our content type, we can now click on a list item result to view the actual node automatically!

This is because DrupalGap has built in support for many common Drupal paths, such as:

node/123
node/123/edit
user/456
user/456/edit
user/login
user/register
etc...

18. Conclusion

Thank you to DrupalCamp Ohio for the opportunity to present this tutorial!

I hope you enjoyed the tutorial. This would not be possible without Drupal, PhoneGap, jQuery Mobile and the countless other open source projects involved. Cheers to open source software!

Comments

Thanks - what a great intro app to DrupalGap!

One small thing I noticed - in section "11.5a Add a Latitude and Longitude Field to the View", adding:

8. Repeat for Longitude

...or similar would make it a little clearer - I know the section title says two fields ;)

 

Thanks again, looking forward to playing more!

tyler's picture

Thank you for pointing this out Steve, I've updated the article accordingly. When presenting this at DrupalCamp Ohio, that was the exact step that I messed up when it came time to show the map, the location markers didn't show up, and I didn't want to debug it on stage ;)

Great article Tyler.

Couple of things I had to add to a fresh VM.

Needed geophp as a dependency of geofield and geocoder; ctools for views; geophp for geofield; services and libraries for DrupalGap; views_datasource for views. 

I spent some time reading about DrupalGap and this is a great warm up.

Peter

 

tyler's picture

Correct Peter. Those are all dependencies needed. I hope it wasn't confusing. I tend to use Drush and it auto lets me know about the dependencies. Good luck and happy coding!

Thanks Tyler, 

This is a great example to understand the capabilities of Drupalgap, 

I was trying to work on a similar set up and Things were going quite okay until step 15, and when I try to implement the 16th step, drupal gap started sending "failed to load module "My module " errors, which is the module that I used to insert the google map,  Where could I have missed it???

Thanks

 

 

tyler's picture

99% of the time that means you have a syntax error in your module (missing semi colon, extra comma, missing comma, etc).

Thanks Tyler for this great demo,

I got it working.

I did have some problems with the necessary view. I had to install another Drupal module to get the image_field output correct. The images were not shown in the listings on the app.

I suppose you are also using this module. It is called the image url formatter. It prevents image output with unwanted 'scr' and 'alt' info.

        "field_image" : {
          "src" : "http://www....",
          "alt" : ""
        }

After installing the module you can select 'Image Url' as formatter in the view while setting 'field_image'.

I am looking forward trying more of your examples. DrupalGap is great. The combination of Drupal and mobile native apps hardware opens great new possibilities.

 

tyler's picture

Eric, thank you for pointing this out. I believe the recent stable recommended version of the Views Datasource module brought about this change. At the time of writing this article, the image URL was available in the field_image value, but now (as you've pointed out), it is buried one level deeper and now available at field_image.src.

This was a very recent change (I think), and is catching quite a few folks (including myself) off guard. Thanks for the kind words about DrupalGap!

NOTE: I've updated the article to reflect this change.

Hello Tyler,

There is something weird going on when showing the geofield map from the listed content. In 98 percent of the cases the marker is positioned top left. I am using responsive design on my Drupal website but switching to a nonresponsive Drupal theme does not help. In Eclipse a message is showing that the NavigationBar is causing an error (something wrong with the backgroundcolor). In 5 percent of the cases the opening map is also wrong centered (my location is top left).

I have also noticed that the changes I make in the Drupal Geofield field (using the DrupalGap tab) are in no way reflected in the app. Any idea what could be causing this and how I could force a recenter of the maps from the content shown in the list?

Perhaps some code ensuring that the page is built completely before the google.maps.api starts might do the trick. This means changing the geofield.js module. I hope however there is a simple explanation.

Kind regards,

Eric

tyler's picture

The geofield.js file probably needs to be patched to call setCenter() on the map after it puts the marker on it. I've had similar problems recently with a map (non geofield map though).

If changes aren't showing up in your app, you'll need to restart/refresh the app (since pages are stored in the DOM), or you need to turn of caching in the settings.js file. Look at reloading page options too: http://drupalgap.org/node/134

The problems were indeed solved by updating the geofield.js file with the following lines just after the initialization of the map:

    // Correct possible problems with the marker not being centered.
    setTimeout(function() {
      google.maps.event.trigger(geofield_map, 'resize');
      geofield_map.setCenter(myLatlng);
    }, 500);

I also added the following in the hook_menu of my map.js following your suggestion. Thanks.

      options:{
          reloadPage:true
        }

The only minor issue left is that the settings of the geofield maps as defined by the settings under the DrupalGap tab of the location contenttype have no effect in my App. It's a minor problem as I was able to adjust these settings in the geofield.js.

 

How is the latitude and longitide set in this guide? I'm looking at this tutorial and it is a good guide: http://www.drupalgap.org/node/257, but I'm not seeing calls to the navigation object to get the latitude and longitide on this page.

I'm wondering if it is possible to get and set the latitude and longitide when the app loads.

Thanks!

tyler's picture

In step #14 there is a link to the DrupalGap documentation for creating a Google Map: http://drupalgap.org/node/497

There you'll find the call to the navigator in the pageshow event.

It's possible to get the lat/lon when the app loads. I've found the easiest way is to do it with a pageshow event handler on your app's front page: http://www.drupalgap.org/node/154

My homepage was making a call to a view that depended on a latitude and longitide context. Unfortanately, pageshow, and even before pageshow would fire after the page made the request to my JSON view.

However, I added a hook_deviceready in my custom module and was able to populate the location and my global latitude and longitide vars before the front page loaded.

Thanks!

Great Tutorial Tyler, 

I've created the page and displays well. How ever I wanted the lists for the contentypes and other contents like taxonomies to appear with Images through out the whole application same as the near by content list..... How can I over ride the default listing in drupal gap to include the image field...

Thanks

 

tyler's picture

Hi Sandy, you'll want to look into using Views within DrupalGap: http://drupalgap.org/views

Tyler,

Thanks so much for the many tutorials.  

I have a lot of experience building Oracle apps, but very recently started working with Drupal and PHP.  You have really helped my learning curve.  I have successfully built your nearby locations map example and am now trying to extend it.  On my play site I built a survey using webform.  I also have some example records in a custom table that display in a view.  In the view setup I used the rewrite results field to output the name field as a link and pass in the name and id into my survey as parameters like this: http://drupalmaptest.gdmdrupalplay.com/starr_mason1?voter_id=[pid]&perso....  It works great.  Now I would like to do the same on my mobile web app.  My aim is to develop a mobile geolocated survey tool.  I edited the JSON view in your tutorial to include the rewrite.  However, I don't know how to get your list code to show the row.title as a link.  I am also interested in building the web form survey directly into the mobile app, but I am taking a step by step approach to exploring the tool.

Any advice would be very helpful.  

Thanks in advance.

Hello,

 

Thanks for this very helpful outline. Could you please specify exactly where the code you mention should be placed, in the settings.js and index files?

(Ie before/ after which other lines of code)? also where/how do I get the ripple.index.html file mentioned in the option2 for using Ripple? Thanks

tyler's picture

All of your custom code will live in a DrupalGap module's .js file(s). You'll then enable the module in your settings.js file, both topics are covered in complete detail via the Hello World on drupalgap.org/hello-world. Please refer there for the most up to date instructions, and information about Ripple.

Thank you,

I am new to this, and very much appreciate this tutorial.

I have read and created the custom/my_module folder and custom/my_module/my_module.js file in the Hello World example.

In these instructions, point 15 mentions about the settings.js file - so I put that in the app/settings.js file. 

Could you clarify then about point 16:  "In my_module_map() (the page_callback function for the map), let's add a button above the map::"

I have followed everything else fine but now am confused about adding/finding this 'my_map_map()'

Where is 'my_module_map()'?  I didn't see any instructions mentioning that, or find 'my_module_map() in the existing code. Does this code in point 16 get written in the settings.js file, or do I add it to the my_module.js file (instead of the code in the Hello World example, or as additional code in this same page?) or eg am I meant to create a new file custom/my_module/my_module_map.js and add it in there?

Thank you for your help.

 

 

 

 

tyler's picture

Yes, any mention of settings.js refers to the app/settings.js file. For your remaining questions, take a closer look at step #14. All the code will live in my_module.js.

Hi Tyler,

This is very helpful, 

Can I get some help to trigger the find nearby locations button automatically when the page loads? 

tyler's picture

Use a pageshow handler to retrieve the user's position from PhoneGap, then send it to Drupal as a contextual filter, then dynamically inject the results into a waiting div container: http://www.drupalgap.org/node/154

i tried to  re create  the function _my_module_map_button_click() as a pageload event, but this doesnt pass the location contextual filter therefore on the console only gives null value to the drupal... ?q=places.json/null,null_10 , can you please clarify how to handle this? Thanks

tyler's picture

Hi,

I'm do not get the map displayed at step 15.

No error message.

Any suggestion where could have gone wrong?

Thanks.

Regards,

GC

tyler's picture

Closely follow step #14 and make sure you've included the gmaps JS file in your index.html file, flush browser caches, etc.

Hi,

It appears that I am not even able to view the map even when I edit the Location content from mobile device. It looks ok from my pc's browser. I've also checked that I've change the format to Geofield Map in the "DrupalGap" tab in "Manage Display". I've also added the GM JS in the index.html. Any other suggestion? Thanks.

Regards, GC

I managed to resolve the issue by adding "<access origin="*" />" to config.xml. Thanks.

Adding .json at end of the view path like nearby-locations.json is it mandotory or just a convention/practice. (Some of the articles at drupalgap.org is having normal path without .json at the end.)

Also I am bit confused about why views_datasource_get_view_result is used explicitly rather than render array method (ref http://drupalgap.org/comment/116#comment-116).
 

BTW nice article and presentation.

Thanks

Nthin

tyler's picture

Adding the .json isn't mandatory, but I am now recommending it as it makes it really easy to spot which Views output JSON when visiting the admin/structure/views page(s).

Since we need to use a pageshow handler to retrieve the current lat/lon, a Views Render array can't be used (with improvements to DrupalGap core, this would be possible). For now, Views Render arrays can only be used in page_callback functions.

Hi tyler,

I have a issue. The value of user current position variables do not pass to other function.



// Create global variables to hold onto the coordinates and the map.

var _dashboard_user_latitude = null;

var _dashboard_user_longitude = null;

 

 

My hook menu

 

      page_callback: 'dashboard_map',

      pageshow: 'dashboard_map_pageshow'

 

 

in pageshow event

 

    navigator.geolocation.getCurrentPosition(

      // Success

      function (position) {

        // Set aside the user's position.

        _dashboard_user_latitude = position.coords.latitude;

        _dashboard_user_longitude = position.coords.longitude;

});

 

 

in page_callback, i use views to render

 

    content['myorders'] = {

      theme: 'view',

      pager_pos: 'bottom',

      format: 'ul',

      path: 'orders-nearby-locations.json/' + _dashboard_user_latitude + ',' + _dashboard_user_longitude', /* the path to the view in Drupal */

      row_callback: 'dashboard_page_row',

      empty_callback: 'dashboard_page_empty',

      attributes: {

        id: 'myorders_view'

      }

    };

 

the result is empty page error, because the variable _dashboard_user_latitude and _dashboard_user_longitude are null

 

I was trried follow your tutorial in this page and http://drupalgap.org/node/497 also those variables are null either. 

 

When I change to fix value, the views working properly, so I guess that those variables are not pasing and keep after events triggered.

 

    content['myorders'] = {

      theme: 'view',

      pager_pos: 'bottom',

      format: 'ul',

      path: 'orders-nearby-locations.json/-7.2574719,112.75208829999997', /* the path to the view in Drupal */

      row_callback: 'dashboard_page_row',

      empty_callback: 'dashboard_page_empty',

      attributes: {

        id: 'myorders_view'

      }

    };

 

Please let me know how to making those longitude and latitude variable can be use in other function

tyler's picture

The page_callback runs when building the page, the pageshow runs when the page is presented to the user. So the coordinates are not yet available in the page_callback. You'll have to retrieve the coordinates before hand.

Excellent guide Tyler!  I was able to get the map displayed, and the button produced; however, I am still not able to get the coordinates to pass to the contextual filter.  You mentioned in this post we need to retrieve the coordinates before hand.  How do we do that?

tyler's picture

That's strange, I'm surprised I left that part out. Thank you for bringing that to my attention. This docs page will show you how to obtain the coordinates: http://docs.drupalgap.org/7/Geo_Location/Get_Current_Latitude_and_Longitude

Great tutorial, I want to ask how to show direction to the selected location from my current location? is their is a way to open the selected location in other maping applicaiotion ex: "google maps" to get directions? 

 

thanks in advance 

Great tutorial! Followed the given steps and got everything working exept no markers are shown on the map for the nearby locations. As within the tutorial there are only links to the nodes displayed below the map.

tyler's picture

The snippet that adds markers to the map for each node is in the "_my_module_map_button_click" function. Review that, and double check your code, it *should* work just fine, I helped a client or two with this just this week.

Hi!

Thanks for your tutorial and great work on the drupalgap module.

Is it posibble to display my own position in the nearby location results nodes?

I have no problem to view my postition on the main screen but when i load some of the results i dont know how to alter the code to insert my position and (eventually get directions to the location).

10x in advance for any help.

 

 

tyler's picture

Since you already have the user's position set aside, you'd then have to pay attention to each Views JSON result as you iterate over them, paying close attention to when you should insert an item onto the array for your position. Tricky, but doable. 

Really great intro. I knew nothing about DrupalGap before and after a small effort I feel connected. I've got so many cool things I want to do with mobile and Drupalgap seems to be the winner for me. Thanks again.

how can i make it to many nearby places for example :: three button one for nearby coffee one for nearby banks one for nearby hospitals

tyler's picture

Use contextual filters on your View. I'd recommend using a Vocabulary for the e.g. Place Categories. Then each button would query for the results using the contextual filter.

in step 10  what images should i uploaded ????

10 Create some Locations with Addresses and Images

If you haven't already, go ahead and create some location nodes with addresses and images:

tyler's picture

Any images you want to use is OK. Just make sure you have permission to use them.

i have  problem give me The requested page "/drupal/mobile-application/index.html" could not be found when i attempted to add page in drupalgap
i do that : as http://www.tylerfrankenstein.com/sites/default/files/DrupalGap.pdf
first create C:\xampp\htdocs\drupal\mobile_application\app\modules\custom\my_module\my_module.js
put this code inside my_module.js:
alert('hello');
/**
* Implements hook_menu().
*/
function my_module_menu() {
var items = {
my_custom_page:{
title:”My Custom App”,
page_callback:”my_module_custom_page”
}
};
return items;
}
function my_module_custom_page() {
return {
my_welcome_text:{
markup:”

Hello World


}
};
}

and change this in setting.js:
1-Drupal.modules.custom['my_module'] = {};
2-App Front Pagedrupalgap.settings.front = 'my_custom_page';

what's wrong with my code
make my sitepath as Drupal.settings.site_path = 'node/3 as i tried to make my site as mobile app and i setup drupal at C:\xampp\htdocs\drupal\ so i choose node inside it as site path ???

tyler's picture

Your Drupal.settings.site_path should be equal to the URL to your Drupal website:

Drupal.settings.site_path = 'http://example.com';

Watch the Console Log messages in your browser's developer tools for more hints as to what is going on. Make sure the app/modules/custom/my_module folder and files have permission to be read by your localhost webserver.

Hi, 

first of all thank you for this excelent tutorial. 

I have many questions about DrupalGap. But I will address the most urgent: 

I could manage to show the map ONLY by updating my Drupal website to use HTTPS. Otherwise the map module showed error: unsecure locations are not allowed. Then I set Drupal.settings.site_path = 'https://example.com'; accordingly. I couldn't make it work on http.

Everything worked then, except for one thing. The pictures disapeared. Not completely, they have broken paths. It's as if the app doesn't know where they are now. I can still create an article adding a picture and when I save it, the picture is not shown, but there's just the icon for a lost picture instead. However on my drupal website the picture uploaded via the app is shown correctly. My guess is that my https protocole is self signed. Browsers like firefox and chrome show warnings not to go to my website because the protocole is not verified. It's ok, it's in developpment state. But I would expect the app not to load anything at all. 

The ripple emulator still shows correctly the images.

Do you have an idea how to tackle this issue? 

And as I'm  writting this already, another question which is a bit off topic. When the image file is being uploaded is it possible to show a progress bar or at least a spinner? If the connection is slow a 3-4MB image freezes the app and it's not clear if there's a problem or if the article is being created normally.

Thanks

Add new comment