thepcn3rd - Passion for Infosec: July 2014

Friday, July 25, 2014

Working with Google Maps Javascript API

Here is a not quite final attempt at using Google Maps Javascript API. Intent is to make the plotLines funtion that is called be dynamic based on the latitude and longitude being called from a database.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps API</title>
<style>
html, body, #map-canvas {
height: 100%;
width: 92%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
// This example adds an animated symbol to a polyline.

var line;

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.7608333,-111.8902778),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var vlc = { "lat" : "50.7608333", "long" : "-111.8902778" };

plotLines(map, vlc.lat, vlc.long, "42.8333015442","12.8332996368");
plotLines(map, vlc.lat, vlc.long, "30.6667003632","104.066703796");
plotLines(map, vlc.lat, vlc.long, "39.6734008789","-75.7052001953");
plotLines(map, vlc.lat, vlc.long, "13.7539997101","100.501403809");
plotLines(map, vlc.lat, vlc.long, "18.9750003815","72.8257980347");
plotLines(map, vlc.lat, vlc.long, "14.5666999817","121.033302307");
//plotLines(map, vlc.lat, vlc.long, "");

}

function plotLines(map, vlcLat, vlcLong, coorLat, coorLong) {

var lineCoordinates = [
new google.maps.LatLng(coorLat,coorLong),
new google.maps.LatLng(vlcLat,vlcLong)
];

var randColor = randomColor(150)

// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 1.0,
//strokeColor: '#630903'
strokeColor: randColor
};

// Create the polyline and add the symbol to it via the 'icons' property.
line = new google.maps.Polyline({
path: lineCoordinates,
geodesic: true,
strokeColor: '#FF5555',
strokeOpacity: 1.0,
strokeWeight: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});

animateCircle(line);
}

function randomColor(brightness){
function randomChannel(brightness){
var r = 255-brightness;
var n = 0|((Math.random() * r) + brightness);
var s = n.toString(16);
return (s.length==1) ? '0'+s : s;
}
return '#' + randomChannel(brightness) + '55' + '55';
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;

var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 40);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Friday, July 25, 2014

Working with Google Maps Javascript API

Test Authentication from Linux Console using python3 pexpect