Toying with Maps

dialmapSo at my day job I wanted to create a virtual show of whom all we call on our dialer and exactly where we call. I import all the dialer data into a SQL DB and it usually is around 100k+ numbers a day. The data that is exported contains address, name, account info, ect.. While I can build reports around this showing connect rates and results of the calls like no answer, answering machines, ect.. It is often hard for people to grasp how ineffective some strategies can be.

If they can see it visually then it you see their face fill with wonder as they see thousands of calls go to no answer or answering machines or even hang up within 3 seconds of an answer of “This is a attempt to collect a debt”. My idea was to show the dials on a google map as they happen. Here is how I did it.

First off you need a google api key and a reference to the api which is all gotten on google through your account. I am using C#, Javascript, ajax, SQL, and of course googles api, with a little mix of jquery and bootstrap. First off I needed to grab the data from the database.

A simple Ajax query to a web service makes this easy and possible. Upon the loading of the body I call a function

 function getData(Campaign)
        {
            $.ajax({
                type: "POST",
                url: "ajaxscripts/MapService.aspx/GetAddress",
                //data: "{'Campaign':'" + Campaign + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg)
                {
                   SplitZipCodes(msg.d);
                }
            });
        }

The webservice then does its thing on the server. Now some of this might make you go wtf but it is some “hacks” I have to do for a .net 2.0 server…don’t ask…

   [WebMethod]
        public static string GetAddress()
        {
            string javascript = "";
            string Yesterday = DateTime.Now.AddDays(-1).ToShortDateString();
            string YesterdayMorn = Yesterday + " 00:00:01";
            string YesterdayNight = Yesterday + " 23:00:00";
            SqlConnection thisConnection = myconnection;
            thisConnection.Open();
            SqlCommand thisCommand = thisConnection.CreateCommand();
            thisCommand.CommandText =  myquery
            SqlDataReader thisReader = thisCommand.ExecuteReader();
            DispositionParser DispoParser = new DispositionParser();
            while (thisReader.Read())
            {
                string ZipCode = thisReader["ZipCode"].ToString().Replace(" " , "");
                if (ZipCode != "")
                {
                    javascript = javascript + ZipCode + "," + DispoParser.ConvertDispo(thisReader["DialerDispo"].ToString()) + ";";
                }
            }
            thisReader.Close();
            thisConnection.Close();
            return javascript;
        }

basically this grabs all the zipcodes of the accounts we dialed and builds a string out of them. Sorry no json serialization on this server :(

this returns back in the form of an object but is one string that can be grabbed with msg.d. we then send that to the next function that needs to get geocords of the zip code. Here is where it gets tricky. Google only allows a few thousand conversions a day so I have to use Mapquest open api to grab the rest as it allows for an unlimited amount of calls. Remember I am grabbing 100k. I also do not want to hit the serve to much and want a good visual representation so I serve the mapquest server every half second to exchange the zipcode to geocords. I then send the map the geocords and add an animation and BAM, we got a live map of dials.

  function doClick(SAMPLE_POST)
        {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = SAMPLE_POST;
            document.body.appendChild(script);
        };

        function renderGeocode(response)
        {
            var i = 0;
            var j = 0;
            if (response.results[0].locations[0])
            {
                AddMarker(response.results[0].locations[0].latLng.lat + ", " + response.results[0].locations[0].latLng.lng)
            }
        }

 ///////Split Zips and Call GeoCodes
        function SplitZipCodes(Zips)
        {
            ZipSplits = Zips.split(";");
            IntervalRun = setInterval(function () { PlaceMarkerInterval(); }, 500);
        }

        function PlaceMarkerInterval()
        {
            if (ZipSplits.length > 1)
            {
                if (i > ZipSplits.length)
                {
                    clearInterval(IntervalRun);
                }
                else {
                    var Results = ZipSplits[i].split(",");
                    var local = Results[0];
                    if (Results[0] != "10")
                    {
                         var SAMPLE_POST = "http://open.mapquestapi.com/geocoding/v1/address?key=myKey&location=" + local + "&callback=renderGeocode";
                        doClick(SAMPLE_POST);
                    }
                    i = i + 1;
                }
            }
        }
        ///////////////Add marker to the map
        function AddMarker(Location)
        {
            var Results = ZipSplits[i].split(",");
            var Cords = Location.split(",");
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(Cords[0],Cords[1]),
                map: map,
                icon: 'images/flagIcons/' + Results[1] + '.png',
                animation: google.maps.Animation.DROP
            });
        }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>