xxxxxxxxxx
280
//This is a geotracking code that takes the user's IP address, which is then put into an API request at "ipapi.co", this returns the user's location including their latitude and longitude. The google maps integration takes that lat and long and instantiates a map centered on that location. This started as a way to visualize the amount and type of sensitive data you release about yourself online.
//This code is also a great way to see if a VPN is working as advertised, just connect to a VPN and you should see your location change when you run the code again
let Mymap;
let dataURL = "https://ipapi.co/json";
function setup() {
// canvas and map can't overlap
createCanvas(500, 200);
initMap();
}
async function preload() {
json= await loadJSON(dataURL, loadData);
}
//ip api
function loadData(json) {
city = json.city;
region = json.region_code;
lat = json.latitude;
long = json.longitude;
tz = json.timezone;
ip = json.ip;
zip = json.postal;
ISP = json.org;
}
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
//https://mapstyle.withgoogle.com/
const customMapStyle = [
{
elementType: "geometry",
stylers: [
{
color: "#f5f5f5",
},
],
},
{
elementType: "labels.icon",
stylers: [
{
visibility: "off",
},
],
},
{
elementType: "labels.text.fill",
stylers: [
{
color: "#616161",
},
],
},
{
elementType: "labels.text.stroke",
stylers: [
{
color: "#f5f5f5",
},
],
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [
{
color: "#bdbdbd",
},
],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#eeeeee",
},
],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575",
},
],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5",
},
],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
],
},
{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{
color: "#4c87f1",
},
],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575",
},
],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{
color: "#dadada",
},
],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{
color: "#4c87f1",
},
],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [
{
color: "#616161",
},
],
},
{
featureType: "road.highway.controlled_access",
elementType: "geometry.fill",
stylers: [
{
color: "#4c87f1",
},
],
},
{
featureType: "road.local",
elementType: "geometry.fill",
stylers: [
{
color: "#4c87f1",
},
],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5",
},
],
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [
{
color: "#eeeeee",
},
],
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#c9c9c9",
},
],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
];
//map options
Mymap = new Map(document.getElementById("map"), {
center: { lat: lat, lng: long },
zoom: 14.6,
gestureHandling: "greedy",
mapTypeId: "roadmap", //terrain, hybrid, roadmap, satellite
styles: customMapStyle,
disableDefaultUI: true,
});
}
function draw() {
//background
background(240);
fill("#4c87f1");
textFont("Bebas Neue");
//City and State
textAlign(CENTER);
textSize(50);
text(city + ", " + region, 105, 10, 300, 500);
//ZIP
textAlign(CENTER);
textSize(20);
text("Postal Code: " + zip, -45, 55, 600, 600);
//Lat and Long
textAlign(CENTER);
textSize(20);
text("Latitude: " + lat, 100, 80, 300, 500);
text("Longitude: " + long, 100, 97, 300, 500);
//Timezone and Time
textAlign(CENTER);
textSize(20);
text("Timezone: " + tz, 105, 120, 300, 500);
//IP Addy
fill(0, 70);
textAlign(CENTER);
textSize(24);
text("IP: " + ip, -45, 152, 600, 600);
//Internet Service Provider or Organizational affiliation
textAlign(CENTER);
textSize(24);
text("ISP / ORG: " + ISP, -40, 175, 600, 600);
}