forked from IST402GroupB/ip-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
LocationFromIP.js
90 lines (82 loc) · 2.5 KB
/
LocationFromIP.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* eslint-disable import/no-extraneous-dependencies */
// dependencies / things imported
import { LitElement, html, css } from 'lit';
import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';
import { UserIP } from './UserIP.js';
export class LocationFromIP extends LitElement {
static get tag() {
return 'location-from-ip';
}
constructor() {
super();
this.UserIpInstance = new UserIP();
this.locationEndpoint = 'https://freegeoip.app/json/';
this.long = null;
this.lat = null;
}
static get properties() {
return {
long: { type: Number, reflect: true },
lat: { type: Number, reflect: true },
city: { type: String, reflect: true },
region_name: { type: String, reflect: true },
};
}
firstUpdated(changedProperties) {
if (super.firstUpdated) {
super.firstUpdated(changedProperties);
}
this.getGEOIPData();
}
async getGEOIPData() {
const IPClass = new UserIP();
const userIPData = await IPClass.updateUserIP();
return fetch(this.locationEndpoint + userIPData.ip)
.then(resp => {
if (resp.ok) {
return resp.json();
}
return false;
})
.then(data => {
console.log(data);
this.lat = data.latitude;
this.long = data.longitude;
this.city = data.city;
this.state = data.region_name;
return data;
});
}
static get styles() {
return [
css`
:host {
display: block;
}
iframe {
height: 500px;
width: 500px;
}
`,
];
}
render() {
// this function runs every time a properties() declared variable changes
// this means you can make new variables and then bind them this way if you like
const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
return html`<iframe title="Where you are" src="${url}"></iframe>
<ul>
<a href="https://www.google.com/maps/@${this.lat},${this.long},14z">
Open in Google Maps
</a>
</ul>
<script>
window.__appCDN = 'https://cdn.webcomponents.psu.edu/cdn/';
</script>
<script src="https://cdn.webcomponents.psu.edu/cdn/build.js"></script>
<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
<wikipedia-query search="${this.city}"></wikipedia-query>
<wikipedia-query search="${this.state}"></wikipedia-query> `;
}
}
customElements.define(LocationFromIP.tag, LocationFromIP);