Displays website visitors on Maps – Blog Xlinesoft

Our goal is to display website visitors on the map, similar to the screenshots below.

We will convert their IP address to the LAT/LNG coordinates and display the marker on the OpenStreetMap map. To convert the IP address to the LAT/LNG pair, we will use geololization data from IP2Location.com.

We will display active users in the last ten minutes. If the user has several activities in the last 60 seconds, their point will throb.

There are also YouTube videos that provide more details from this project.

1. Database structure.

We will need two tables, ‘users’ and ‘IP2Location’. The following is a script for the MySQL database.

CREATE TABLE `ip2location`(`id` int NOT NULL AUTO_INCREMENT, `ip_start` decimal(20,6) NULL, `ip_end` decimal(20,6) NULL, `STATE` varchar(50) NULL, `COUNTRY` varchar(50) NULL, `REGION` varchar(50) NULL, `CITY` varchar(100) NULL, `LATITUDE` double NULL, `LONGITUDE` double NULL, PRIMARY KEY (`id`))CHARACTER SET utf8;
CREATE TABLE `users`(`id` int NOT NULL AUTO_INCREMENT, `ip` varchar(50) NOT NULL DEFAULT '0', `lat` double NOT NULL DEFAULT 0, `lng` double NOT NULL DEFAULT 0, `last_activity` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (`id`))CHARACTER SET utf8;

Please note that this SQL script only makes ‘IP2Location’ but does not come with data. The data collection itself is around 300MB and you can download it for free

2. Enter the code snippet into the page where you want to display the map. In our case it will be the menu page. The code itself is very simple, only issuing a div with a ‘map’ id.

PHP Code:

3. After AppplayInitialized Event

PHP Code:

// convert IP address to a decimal number in order to perform a database search
function ip_to_decimal($ip_address) {
    $parts = explode('.', $ip_address);
    $decimal_ip = 0;
    foreach ($parts as $part) {
        $decimal_ip = $decimal_ip * 256 + (int) $part;
    }
    return $decimal_ip;
}

function saveCurrentUserData(){
		$ip = $_SERVER["REMOTE_ADDR"];
		if( empty($ip) )
			return false;
		$userRs = DB::Select("users",array("ip" => $ip));
		$user = $userRs->fetchAssoc();
		if( $user ){
			DB::Update("users", array("last_activity" => date("Y-m-d H:i:s")) ,array("ip" => $ip));
		}
		else{
			$decimalip = ip_to_decimal($ip);
			$coordsRs = DB::Query("select * from ip2location where ".$decimalip." BETWEEN ip_start and ip_end");

			$coords = $coordsRs->fetchAssoc();
			if( $coords ){
				$userData = array("ip" => $ip,
                                            "lat" => $coords["LATITUDE"], 
                                            "lng" =>  $coords["LONGITUDE"],
                                             "last_activity" => date("Y-m-d H:i:s"));
				DB::Insert("users",$userData);
			}
		}
}
if( postvalue("getActiveUsers") ){
	$interval = 10;  
        // we only display on the map users that accessed any page in the last ten minutes

	saveCurrentUserData();
	$dateCondition = date("Y-m-d H:i:s",time() - ($interval*60));
	$userRs = DB::Query("select * from users where last_activity > '".$dateCondition."'");
	$latLng = array();

        $userData = $userRs->fetchAssoc();
	while( $userData ){
		$coordsInfo = array("id" => $userData['id'], 
                              "lat" => $userData['lat'],
                              "lng" => $userData['lng'],
                               "active" => false);

		if( ( time() - strtotime($userData["last_activity"]) ) <=60 ) {
		    $coordsInfo['active'] = true;
                }
		$latLng[] = $coordsInfo;
                $userData = $userRs->fetchAssoc();
	}
	echo my_json_encode($latLng);
	exit();
}

4. Custom_function.js

The following Javascript code goes to the Event Editor -> Custom_Function.js section.

$(document).ready(function() {

    $("#map").width($(".r-fluid").width());
    var height = $(window).height() - $("#map").offset().top - 30;
    $("#map").height(height);

    window.mapObj = new OpenLayers.Map("map", {
        controls: [
            new OpenLayers.Control.PanZoomBar(),

            new OpenLayers.Control.Navigation()
        ],
    });

    var layer = new OpenLayers.Layer.OSM();

    mapObj.addLayer(layer);

    window.markersList = new OpenLayers.Layer.Markers("Markers");
    mapObj.addLayer(markersList);
    mapObj.zoomToMaxExtent();

    updateMarkers();
    setInterval(updateMarkers, 5000);

    function updateMarkers() {

        $.post("", {
            getActiveUsers: true
        }, function(response) {

            var coordsArr = JSON.parse(response),
                activeIds = coordsArr.map(function(coords) {
                    return coords.id;
                }),
                allIds = markersList.markers.map(function(marker) {
                    return marker.id;
                });


            $.each(coordsArr, function(i, latLon) {

                if (!allIds.includes(latLon.id)) {
                    addMarker(latLon.id, latLon.lat, latLon.lng, latLon.active);
                } else {
                    var curMarker = markersList.markers.find(function(marker) {
                        return marker.id == latLon.id
                    });
                    if (curMarker.active != latLon.active) {
                        $(curMarker.icon.imageDiv).toggleClass("active", latLon.active);
                    }
                }
            });
            allIds = markersList.markers.map(function(marker) {
                return marker.id;
            });

            for (var i = 0; i < allIds.length; i++) {

                if (allIds[i] != undefined && !activeIds.includes(allIds[i])) {

                    var markerToRemove = markersList.markers.find(function(marker) {
                        return marker.id == allIds[i]
                    });
                    markersList.removeMarker(markerToRemove);
                }

            }

            function addMarker(id, lat, lng, active) {

                var lonLat = new OpenLayers.LonLat(lng, lat)
                    .transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        mapObj.getProjectionObject() // to Spherical Mercator Projection
                    );
                var icon = new OpenLayers.Icon("", new OpenLayers.Size(15, 15));
                var marker = new OpenLayers.Marker(lonLat, icon);
                if (active) {
                    $(marker.icon.imageDiv).addClass("active");
                }

                marker.id = id;
                marker.active = active;
                markersList.addMarker(marker);

                return marker;
            }
        });


    }
    updateMarkers();


});

5. CSS Code (Style Editor -> Modification of CSS)

We use this CSS code to adjust and confirm the default display of the OSM map.

.olTileImage {
    filter: brightness(48%) contrast(256%);
}

[id^="OL_Icon"] .olAlphaImg {
    background: white;
    cursor: pointer;
    border-radius: 100%;
  }
  [id^="OL_Icon"].active .olAlphaImg {
    animation: pulse 2s infinite;
    box-shadow: 10px 10px 10px rgba(255,255,255, 0.7);
    width:20px !important;
    height: 20px !important;
  }

  @-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 10px 10px 10px rgba(255,255,255, 0.7);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
    }
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
      box-shadow: 0 0 0 0 rgba(255,255,255, 0.7);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0);
    }
  }