Calculate the Distance Between Two Coordinates in PHP

Sometimes you search the web for some obscure problem you need to solve, like calculating the distance between two points, thinking that you’ll for sure never need this ever again. This, my friends, is not one of those examples. While I thought I’d never need this I have come back to this helpful function time and time again. Below is a helpful function that takes in two coordinates and returns the distance. Let’s break this down.

private function distanceGeoPoints($lat1, $long1, $lat2, $long2) {
    define('EARTH_RADIUS', 3958.75);    // in miles

    $dLat = deg2rad($lat2-$lat1);
    $dLng = deg2rad($long2-$long1);

    $a = sin($dLat/2) * sin($dLat/2) +
         cos(deg2rad($lat1)) * cos(deg2rad($lat2)) *
         sin($dLng/2) * sin($dLng/2);

    $c = 2 * atan2(sqrt($a), sqrt(1-$a));
    $dist = EARTH_RADIUS * $c;

    return $dist;
}

The first line inside this function is defining a constant for the radius of the Earth. This is important for a couple reasons: the Earth radius is (relatively) constant so we don’t want to run the risk of accidentally assigning this some other value, and 2) the units you put for this radius will also tell you what units you’ll get your resulting return in as well. So, if you want miles between points, use miles. If you want feet, use feet (20902231.64). A simple Google conversion should help you here.

Next we need to convert these coordinates which are in degrees into radians. We can see that we’re taking the second latitude and subtracting the first and the same with the longitude.

Note: don’t name your longitude variables as “long” because in many systems that’s a reserved keyword. In general it’s bad practice.

I won’t get into the somewhat complicated math that happens next but basically we’re taking the various conversions and coordinates we already have and performing geometric arithmetic to them in the form of sine and cosine and doing some other additions and multiplications and such. From this we come up with $a.

Next we do some more geometric arithmetic in the form of an arc tangent and some square roots involving $a which gives us $c. Then all we have to do is multiply $c with the EARTH_RADIUS constant we defined before to get our distance.

Pin It
Read More Leave comment

Helpful SASS/LESS Mixins

Mixins are one of the most helpful and powerful features of SASS/SCSS/LESS. Being able to define a block of code like a function in JavaScript and use that over and over again in your stylesheets is awesome. Being able to make changes in just one place or being able to calculate values or pass values to your mixin makes them very extendable. Here are some of the most useful mixins that I use daily.

While these are specifically written for SASS they can easily be adapted to LESS.

border-box

Any time there are multiple vendor-prefixed conditions to be included for one specific property means it’s perfect for a mixin. Using border-box is one of these examples.

@mixin border-box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

border-radius

border-radius is another property that requires several vendor-prefixed properties to accommodate older browsers.

@mixin border-radius($radius) {
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

clearfix

Whenever you’re floating elements on the page you lose that block of height because it’s taken out of the general flow of the page. Therefore you can force the height of the parent element with this mixin.

@mixin clearfix {
    &:before, &:after {
	content: " ";
	display: table;
    }

    &:after {
	clear: both;
    }
}

img-responsive

Today if a site isn’t response in some way the user experience suffers so much they’ll likely leave. Until more browsers can support tags like <picture> we need a way to change the width of images based on screen width. This mixin allows us to always force the picture to be as large as it’s container element while maintaining aspect ratio, making sure not to enlarge the image past it’s 100% width.

@mixin img-responsive {
    height: auto;
    max-width: 100%;
}

list-reset

It’s standard practice to use unordered lists for navigation and other elements on the page. Instead of constantly repeating the same code over and over each time you use a list you can include this into a helpful mixin. This works with both ordered and unordered lists.

@mixin list-reset {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

opacity

There’s a trend with a lot of these mixins where in order to support older browser vendor-prefixed properties are required. This is no exception and will allow you to use the opacity property.

@mixin opacity($opacity) {
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
    opacity: $opacity;
}

There are hundreds of helpful mixins but these are ones I use in every project. Post in the comments below what mixins you can’t live without!

Pin It
Read More Leave comment