dnomd343
/
echoIP
mirror of https://github.com/dnomd343/echoIP
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: display wrong location on map 

Merge pull request #5 from ShevonKuan/main
master
Dnomd343 5 years ago
committed by GitHub
parent
052968291d 93d97a0a7e
commit
8c19aebe16
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 123 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 244
      assets/js/main.js
  2. 2
      assets/js/main.min.js

244
assets/js/main.js
View File

@ -1,123 +1,123 @@
$(document).ready(function () { $(document).ready(function () {
$.get("/ip", function (data) { $.get("/ip", function (data) {
$("#ip_default").val(data); $("#ip_default").val(data);
ajax_process(); ajax_process();
}); });
$("table").hide(); $("table").hide();
$("button").click(function () { $("button").click(function () {
$("button").text("Searching..."); $("button").text("Searching...");
$("table").hide(); $("table").hide();
ajax_process(); ajax_process();
}); });
}); });
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg'; mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg';
function draw(x, y) { function draw(x, y) {
var map = new mapboxgl.Map({ var map = new mapboxgl.Map({
container: 'map', container: 'map',
style: 'mapbox://styles/mapbox/streets-v11', style: 'mapbox://styles/mapbox/streets-v11',
center: [y, x], center: [y, x],
zoom: 3 zoom: 3
}); });
var size = 100; var size = 100;
var pulsingDot = { var pulsingDot = {
width: size, width: size,
height: size, height: size,
data: new Uint8Array(size * size * 4), data: new Uint8Array(size * size * 4),
onAdd: function () { onAdd: function () {
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
canvas.width = this.width; canvas.width = this.width;
canvas.height = this.height; canvas.height = this.height;
this.context = canvas.getContext('2d'); this.context = canvas.getContext('2d');
}, },
render: function () { render: function () {
var duration = 1000; var duration = 1000;
var t = (performance.now() % duration) / duration; var t = (performance.now() % duration) / duration;
var radius = size / 2 * 0.3; var radius = size / 2 * 0.3;
var outerRadius = size / 2 * 0.7 * t + radius; var outerRadius = size / 2 * 0.7 * t + radius;
var context = this.context; var context = this.context;
// draw outer circle // draw outer circle
context.clearRect(0, 0, this.width, this.height); context.clearRect(0, 0, this.width, this.height);
context.beginPath(); context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')'; context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
context.fill(); context.fill();
// draw inner circle // draw inner circle
context.beginPath(); context.beginPath();
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2); context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = 'rgba(255, 100, 100, 1)'; context.fillStyle = 'rgba(255, 100, 100, 1)';
context.strokeStyle = 'white'; context.strokeStyle = 'white';
context.lineWidth = 2 + 4 * (1 - t); context.lineWidth = 2 + 4 * (1 - t);
context.fill(); context.fill();
context.stroke(); context.stroke();
// update this image's data with data from the canvas // update this image's data with data from the canvas
this.data = context.getImageData(0, 0, this.width, this.height).data; this.data = context.getImageData(0, 0, this.width, this.height).data;
// keep the map repainting // keep the map repainting
map.triggerRepaint(); map.triggerRepaint();
// return `true` to let the map know that the image was updated // return `true` to let the map know that the image was updated
return true; return true;
} }
}; };
map.on('load', function () { map.on('load', function () {
map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 }); map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
map.addLayer({ map.addLayer({
"id": "points", "id": "points",
"type": "symbol", "type": "symbol",
"source": { "source": {
"type": "geojson", "type": "geojson",
"data": { "data": {
"type": "FeatureCollection", "type": "FeatureCollection",
"features": [{ "features": [{
"type": "Feature", "type": "Feature",
"geometry": { "geometry": {
"type": "Point", "type": "Point",
"coordinates": [y, x] "coordinates": [y, x]
} }
}] }]
} }
}, },
"layout": { "layout": {
"icon-image": "pulsing-dot" "icon-image": "pulsing-dot"
} }
}); });
}); });
}; };
function ajax_process() { function ajax_process() {
$.get("/info/" + $("input").val(), function (data) { $.get("/info/" + $("input").val(), function (data) {
console.log(data); console.log(data);
$("button").text("Search"); $("button").text("Search");
$("table").show(); $("table").show();
$("#ip").text(data.ip); $("#ip").text(data.ip);
$("#as").text(data.as); $("#as").text(data.as);
$("#city").text(data.city); $("#city").text(data.city);
$("#region").text(data.region); $("#region").text(data.region);
$("#country").text(data.country); $("#country").text(data.country);
$("#timezone").text(data.timezone); $("#timezone").text(data.timezone);
$("#loc").text(data.loc); $("#loc").text(data.loc);
$("#isp").text(data.isp); $("#isp").text(data.isp);
$("#scope").text(data.scope); $("#scope").text(data.scope);
$("#detail").text(data.detail); $("#detail").text(data.detail);
draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[0])); draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1]));
}); });
} }

2
assets/js/main.min.js
View File

@ -1 +1 @@
function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}function ajax_process(){$.get("/info/"+$("input").val(),(function(data){console.log(data),$("button").text("Search"),$("table").show(),$("#ip").text(data.ip),$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#loc").text(data.loc),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[0]))}))}$(document).ready((function(){$.get("/ip",(function(data){$("#ip_default").val(data),ajax_process()})),$("table").hide(),$("button").click((function(){$("button").text("Searching..."),$("table").hide(),ajax_process()}))})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}function ajax_process(){$.get("/info/"+$("input").val(),(function(data){console.log(data),$("button").text("Search"),$("table").show(),$("#ip").text(data.ip),$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#loc").text(data.loc),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}))}$(document).ready((function(){$.get("/ip",(function(data){$("#ip_default").val(data),ajax_process()})),$("table").hide(),$("button").click((function(){$("button").text("Searching..."),$("table").hide(),ajax_process()}))})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg";
Write Preview
Loading…
Cancel
Save