×
Embed Code
<![CDATA[
<div>
<script src="https://widget.bikeindex.org/stolen-widget.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
html,
body {
background-color: black;
}
.ip {
background-color: darkgray;
font-size: medium;
color: rgb(186, 23, 219);
outline: 2px ridge rgba(49, 216, 7, 0.6);
border-radius: 0.5rem;
margin: 1px;
width: fit-content;
}
.ip2 {
font-size: medium;
color: rgb(57, 4, 94);
outline: 2px ridge rgba(236, 7, 210, 0.6);
border-radius: 0.5rem;
margin: 1px;
width: fit-content;
}
</style>
<div id="geolocation-data" class="ip">
<p><span id="country"></span>
<span id="state"></span>
<span id="city"></span> -
<span id="latitude" class="ip2"></span>,
<span id="longitude" class="ip2"></span>
</p>
</div>
<div id="binx-stolen-widget"></div>
<script>
$(document).ready(function () {
$.getJSON('https://ipapi.co/json/')
.done(function (location) {
console.log("Location:", location);
$('#country').text(location.country_name);
$('#state').text(location.region);
$('#city').text(location.city);
$('#latitude').text(location.latitude);
$('#longitude').text(location.longitude);
const latitude = parseFloat(location.latitude);
const longitude = parseFloat(location.longitude);
const radius = 200; // in kilometers
var script = document.createElement('script');
script.src = "https://widget.bikeindex.org/stolen-widget.js";
script.onload = function () {
console.log('BikeIndex Widget Loaded');
BikeIndexWidget.init({
height: 400,
cacheResults: true,
recentResults: true,
location: latitude + ',' + longitude,
radius: radius,
element: 'binx-stolen-widget'
});
};
document.body.appendChild(script);
})
.fail(function (jqxhr, textStatus, error) {
console.error("Error fetching location:", textStatus, error);
});
});</script>
</div>
]]>