XKCD 1608 Hoverboard zoomable

Developer
KyleDavidE
Size
7,038 Kb
Views
40,480
  1. XKCD 1608 Hoverboard zoomable Previews
  2. XKCD 1608 Hoverboard zoomable HTML Codes
  3. XKCD 1608 Hoverboard zoomable CSS Codes
  4. XKCD 1608 Hoverboard zoomable JS Codes

How do I make an xkcd 1608 hoverboard zoomable?

What is a xkcd 1608 hoverboard zoomable? How do you make a xkcd 1608 hoverboard zoomable? This script and codes were developed by KyleDavidE on 02 July 2022, Saturday.

XKCD 1608 Hoverboard zoomable Previews
IQ Test

XKCD 1608 Hoverboard zoomable - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>XKCD 1608 Hoverboard zoomable</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.0.0/Control.FullScreen.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.0.0/Control.FullScreen.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

XKCD 1608 Hoverboard zoomable - Script Codes CSS Codes

#map{ width:100vw; height:100vh;
}
body{ margin:0;
}
.leaflet-tile[src$="#xkcd-ray"]{ -webkit-filter:brightness(12800%) invert() !important; filter:brightness(12800%) invert() !important;
}

XKCD 1608 Hoverboard zoomable - Script Codes JS Codes

'use strict';
var map = L.map('map', { crs: L.CRS.Simple, fullscreenControl: true, fullscreenControlOptions: { position: 'topleft' }
}).setView([0, 0], 1);
var t = L.Util.template;
L.Util.template = function (str, data) { if (str == 'xkcd' || str == 'xkcd-ray') return 'http://xkcd.com/1608/' + (data.x + 1000) + ':' + -(data.y + 1075) + '+s.png#' + str; return t.apply(this, arguments);
};
var opts = { attribution: '<a href="http://xkcd.com/1608/" target="_blank">xkcd 1608</a> | right-click for x/y | options have moved to the layers menu ', tileSize: 512 / 8, minZoom: 1, maxNativeZoom: 1, maxZoom: 4, zoomReverse: true, continuousWorld: true, noWrap: true, tms: true
};
var world = L.tileLayer('xkcd', opts);
var xrayWorld = L.tileLayer('xkcd-ray', opts);
console.log("foo");
var coins = [[537014, -560262], [525676, -560629], [526064, -560629], [526151, -559304], [531481, -559543], [531890, -559567], [532157, -560877], [555117, -562417], [503211, -552407], [503509, -551062], [542468, -560050], [542693, -559655], [550760, -560054], [553063, -567125], [553090, -567164], [553119, -567196], [553160, -565369], [553195, -567197], [553275, -567162], [553316, -567121], [554230, -565862], [554230, -565793], [557899, -558150], [526680, -560221], [526982, -559148], [527073, -559795], [528015, -561069], [528185, -560238], [527048, -557267], [483587, -551988], [483654, -551990], [553332, -563820], [519623, -549109], [522036, -553208], [490111, -554999], [552807, -560070], [520594, -549060], [521379, -549034], [538137, -550908], [560554, -549988], [528605, -549442], [553724, -550117], [529651, -558489], [556356, -556839], [523445, -549116], [548193, -561800], [548258, -561800], [542928, -562357], [475194, -553696], [475244, -553697], [475300, -553697], [475354, -553693], [518156, -560350], [519076, -561143], [519916, -559557], [525293, -561672], [535569, -561320], [535862, -562519], [535887, -563101], [534140, -559632], [508237, -567591], [551573, -563959], [552580, -563810], [486595, -554822], [516578, -560334], [517833, -559194], [517955, -559872], [518028, -561075], [548469, -549813], [546731, -559605], [567050, -550435], [567052, -550516], [567073, -550477], [567073, -550553], [567098, -550516], [567098, -550435], [567117, -550553], [567121, -550477], [567139, -550516], [567141, -550435], [539247, -562977], [540024, -562360], [540289, -562990], [540367, -562360], [558119, -563871], [507141, -568874], [541742, -563037], [542582, -562601], [542582, -562519], [518669, -551671], [519428, -552242], [530778, -558951], [531469, -558711], [479521, -554945], [501977, -549120], [481844, -554539], [481996, -554509], [539592, -558927], [542755, -564513], [543809, -563327], [544508, -564738], [544607, -563903], [512069, -549763], [512080, -549914], [512086, -550075], [512194, -549894], [512196, -550235], [512204, -549753], [512210, -549660], [512245, -549753], [512259, -550054], [512283, -549752], [512310, -549896], [512335, -550227], [512336, -549655], [512372, -549899], [512383, -549614], [512401, -550074], [512404, -549801], [549219, -565188], [549818, -563273], [550474, -564570], [477741, -554502], [522728, -551471], [497584, -551755], [525570, -549260], [547898, -560444], [492134, -553619], [556832, -567104], [523803, -560641], [524065, -560641], [524066, -560395], [552092, -568501], [527026, -549232], [528062, -549724], [537776, -558020], [539511, -559923], [540316, -560406], [483536, -549430], [485081, -549160], [551282, -565298], [551488, -566400], [551533, -566778], [552208, -566189], [523735, -561446], [523765, -561448], [523797, -561450], [547905, -555127], [548013, -556875], [541722, -559066], [541831, -557608], [542005, -558016], [542598, -557555], [541190, -563865], [541628, -563865], [542063, -563865], [545077, -562010], [545511, -562352], [546299, -562853], [546299, -562745], [546587, -562858], [546594, -562745], [513095, -560682], [513725, -559690], [549495, -558824], [549830, -558029], [550139, -558029], [528660, -559761], [529287, -560300]].map(tp);
var ns = 512;
var rs = 512 / 8;
function tp(v) { var x = v[0], y = v[1]; var o = L.CRS.Simple.pointToLatLng(L.point(((x + 25 / 2) / 512 - 1000) * 512 / 8, ((y + 25 / 2) / 512 + 1075 - 1) * 512 / 8), 1); o.ld = v; return o;
}
function demap(v) { var p = L.CRS.Simple.latLngToPoint(v, 1); return [(p.x / rs + 1000) * ns - 25 / 2, (p.y / rs - 1075 + 1) * ns - 25 / 2];
}
var icon = L.icon({ iconUrl: 'https://xkcd.com/1608/coin.png', iconSize: [25, 25]
});
var markers = L.markerClusterGroup({ disableClusteringAtZoom: 3
});
coins = coins.map(function (c) { var ci = L.marker(c, { icon: icon, title: c.ld.join(',') }); ci.on('click', function () { teleportUI({ latlng: c }); }); markers.addLayer(ci); return ci;
});
/*var showCoins = false;
window.tc = function(){ showCoins = !showCoins; //coins.forEach(function(e){ markers.setOpacity(showCoins ? 1 : 0); //});
}*/
map.addLayer(world);
L.control.layers({ normal: world, "x-ray": xrayWorld
}, { coins: markers
}).addTo(map);
window.xray = function () { document.body.classList.toggle('xray');
};
var popup = L.popup();
var base = '<h1><img src="http://xkcd.com/1608/wizard-hat.png" style="float:left"></img> {x}, {y}</h1><h3>Paste this into the js console on the actual comic</h3><textarea readonly autofocus>[[\'x\',{x}],[\'y\',{y}],[\'yv\',1]].forEach(function(e){explorer.pos[e[0]]=e[1]});explorer.tick();</textarea><h3>wiki format: </h3><textarea readonly>- (x: {x}, y: {y})</textarea><h3><a target="_blank" href="http://xkcd.com/1608/{ix}:{iy}+s.png">image link</a></h3>';
map.on("contextmenu", function (e) { teleportUI(e);
});
function teleportUI(e) { console.log(e); popup.setLatLng(e.latlng); var p = demap(e.latlng); popup.setContent(L.Util.template(base, { x: p[0] | 0, y: p[1] | 0, ix: p[0] / 512 | 0, iy: p[1] / 512 - 1 | 0 })); popup.openOn(map); var m = popup._contentNode.querySelector('textarea'); m.setSelectionRange(0, m.value.length);
}
XKCD 1608 Hoverboard zoomable - Script Codes
XKCD 1608 Hoverboard zoomable - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded July 02, 2022
Rating 4
Size 7,038 Kb
Views 40,480
Do you need developer help for XKCD 1608 Hoverboard zoomable?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KyleDavidE (KyleDavidE) Script Codes
Name
Stars
A Pen by KyleDavidE
SCSS function graphing
A lonely pixel rag
Abstract shape 3d
A Pen by KyleDavidE
A cube
Android 4.4 kitkat time picker
Flexbox Dna Helix by Joe Ski
Sunshades
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!