Adding location awareness to Ushahidi

This post is for site admins who want to add location awareness to their ushahidi deployment. Location awareness allows ushahidi to know where the visitor is coming from and display them a map local to them. It requires the user to have an ip v4 address. It is not the best solution for this problem but for now it works…

First things first, visit your application/controllers/main.php and comment out these lines

$this->themes->js->latitude = Kohana::config('settings.default_lat');
$this->themes->js->longitude = Kohana::config('settings.default_lon');

Paste this below the lines you have commented out:

include_once 'DetectLocation.php'; // this isn't the best way but it works..
$this->themes->js->latitude = $lat;
$this->themes->js->longitude = $lng;

Next visit ipinfodb.com and grab their mysql database, extract it then import it into your mysql deployment, I used the database name ipinfo.

Create a new php file called DetectLocation.php in the root of your Ushahidi deployment.

Paste this into it

<?php
// Using data from http://ipinfodb.com/ -- this should be in the ipinfo database
// Code by John McLear, all free licenses attached.  Please re-use, modify & redistribute 

$dbuser = 'ipinfo';
// using a psuedo/differnet user because I'm cool like that.
$dbpass = '';
$dbhost = 'localhost';
$dbname = 'ipinfo';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die                      ('Error connecting to mysql');

mysql_select_db($dbname) or die('Could not select database');

$ipAddress = mysql_real_escape_string($_SERVER['REMOTE_ADDR']);
// Get IP Addr of visitor

$query = "SELECT * FROM `ip_group_city` " .
         "WHERE `ip_start` <= INET_ATON( '$ipAddress' ) " .
         "ORDER BY ip_start DESC " .
         "LIMIT 1";

$resultLocation = mysql_query($query);

while ($row = mysql_fetch_array($resultLocation))
{
        $lat = $row['latitude'];
        $lng = $row['longitude'];
}
?>

Test it by visiting your Ushahidi deployment, your map should be centred on your location.

So quick recap. We are using a local mysql database to lookup locations by IP. This is fast, fast is good. It isn’t perfect. Perfect would be better. Feel free to improve upon, change/correct..

Note: You probably also want to do the same changes on reports.php and alerts.php

Only display this months data in Ushahidi

This is a simple hack to make Ushahidi display only the current months worth of data. This is useful if you have a large dataset with no real need to display historical data to your users.

Modify application/controllers/main.php lines 327 onwards.

                /* Commented out by John McLear */
                // $first_month = 1;
                // $last_month = 12;

                /* Added by John McLear as to only show the current month of data */
                $first_month = date('m');
                $last_month = date('m');
                /* End of new code */

                $i = 0;

                foreach ($query as $data)
                {
                        $date = explode('-',$data->dates);

                        $year = $date[0];
                        $month = $date[1];

                        /* Added by John McLear */
                        // Only includes from the month we are in now, yes this sucks but it works
                        if ($month == $first_month){

                                // Set first year
                                if($i == 0)
                                {
                                        $first_year = $year;
                                        $first_month = $month;
                                }

                                // Set last dates
                                $last_year = $year;
                                $last_month = $month;
                        }

                        $i++;
                }

Hide images from div if they don’t fit

The title of this article is horribly lame but it’s what (after a few beers) I appear to have Google’d for..  Basically you have a div, 800px wide and you have 16 images, all 100px wide and you want to only leave 8 images in the active dom.  I bet you are thinking..  Yea just use

overflow:hidden

..  Sure..  But you can still tab to the images and that sucks if you are making a TV website where the users may be using a remote control…

So here’s how I did it..  Using javascript..

  1. Set an incremental id value on each image, IE img
    id=image1

    …  image2, image3 etc.

  2. Get width of div
  3. Divide width by amount of px.
  4. Now you have total amount of objects you can show
  5. For each of the 16 images if the amount of images available is less than 16 then set it to
    display:inline;

    else set it to

    display:none;

Display none stops the object from existing on the screen what so ever..  It’s not hidden so you can’t tab to it..  This also works with divs that can be resized..  What you do is listen for resize, when a resize event is triggered get the new div width and run the function to hide/display the images..

If you know a better/cleaner way of doing this then please let me know 🙂

3 font APIs and a font stack generator

So you want to change the font on your website and you want it to be a funkier font? Google appears to lower their competitors in Google search results so I figured I would give them a fighting chance.

PrimaryBlogger has the Google Font API plugin enabled by default.  You can install the plugin from the “Add New” tab under the plugins section of your WordPress admin. Or, upload the plugin folder to your server and do it the old fashioned way.

Here are 3 font APIs you could use:

TypeKit

Free for 2 fonts, slightly fussy to deploy, requires sign up, requires a badge on your website.


Fonts.Com Developer Font API

Thousands of fonts, slightly fussy to deploy, requires sign up, requires a badge on your website.


Google Fonts API

Google Font API is probably the easiest of the 3 to deploy and doesn’t require a badge or sign up. It is the most limited as far as # of fonts to chose from.



Awesome Font stack

A super slick font selector/generator that gives you the files and CSS to go ahead and get started. I like it because you can try multiple fonts together before downloading them.

Find our more about webfonts

Enhanced by Zemanta