Last active
August 2, 2022 15:10
-
-
Save mapsmania/0eea552ba0cb1bf67a5d4982df0a39b2 to your computer and use it in GitHub Desktop.
Random USA
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ramdom USA</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script> | |
| <style> | |
| html, body, #map { margin: 0; height: 100%; } | |
| .leaflet-control-attribution { | |
| font-size: 15px; | |
| line-height: 40px; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| font-family: 'Orienta', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script type="text/javascript"> | |
| var WhateverTileLayer = L.TileLayer.extend({ | |
| _tileUrls: {}, | |
| getTileUrl: function (coords) { | |
| var data = { | |
| r: L.Browser.retina ? '@2x' : '', | |
| s: this._getSubdomain(coords), | |
| x: coords.x, | |
| y: coords.y, | |
| z: this._getZoomForUrl() | |
| }; | |
| if (this._map && !this._map.options.crs.infinite) { | |
| var invertedY = this._globalTileRange.max.y - coords.y; | |
| if (this.options.tms) { | |
| data['y'] = invertedY; | |
| } | |
| data['-y'] = invertedY; | |
| } | |
| var i = -1; | |
| while (i < 0 || (this._url[i].length >= 5 && this._url[i][4] < data.z)) | |
| i = Math.floor(Math.random() * this._url.length); | |
| this._tileUrls[data.x+','+data.y+','+data.z] = i; | |
| return L.Util.template(this._url[i][0], L.Util.extend(data, this.options)); | |
| }, | |
| getTileData: function(latlng) { | |
| var zoom = this._getZoomForUrl(); | |
| // make sure lat/long values are constrained to +-90,+-180 so that a popup is displayed when users pan across the entire world | |
| var wrappedLatLng = latlng.wrap(); | |
| var pixel = map.project(wrappedLatLng, zoom).floor(); | |
| var tileSize = this.getTileSize(); | |
| var coords = pixel.unscaleBy(tileSize).floor(); | |
| var i = this._tileUrls[coords.x+','+coords.y+','+zoom]; | |
| return this._url[i]; | |
| } | |
| }); | |
| var map = L.map('map', { minZoom: 3, maxZoom: 18 }).setView([37.0873822,-95.649250], 4); | |
| map.attributionControl.setPrefix(""); | |
| var whateverLayer = new WhateverTileLayer([ | |
| ['https://maps.georeferencer.com/georeferences/549d6d4b-a965-5cdf-b46c-b71db2efc928/2022-07-18T22:52:22.617229Z/map/{z}/{x}/{y}.png?key=DzlRmpsjLYAYwet7EU5O', 'A Pictorial Map of the United States of America.', 'David Rumsey Map Collection', 'https://davidrumsey.georeferencer.com/maps/11618522-0418-5042-87f5-61e59cec63a3/'], | |
| ['http://maps.nypl.org/warper/maps/tile/30508/{z}/{x}/{y}.png', 'United States base map / compiled by Henry Gannett ; engraved by U.S.G.S.', 'New York Public Library', 'http://maps.nypl.org/warper/maps/30508#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/29744/{z}/{x}/{y}.png', 'The United States of America 1853', 'New York Public Library', 'http://maps.nypl.org/warper/maps/29744#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/31252/{z}/{x}/{y}.png', 'United States relief map / compiled by Henry Gannett', 'New York Public Library', 'http://maps.nypl.org/warper/maps/31252#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/31311/{z}/{x}/{y}.png', 'Rand McNally', 'New York Public Library', 'http://maps.nypl.org/warper/maps/31311#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/31317/{z}/{x}/{y}.png', 'Topographical map of the United States', 'New York Public Library', 'http://maps.nypl.org/warper/maps/31317#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/33017/{z}/{x}/{y}.png', 'Rand McNally & Co.\'s new official railroad map', 'New York Public Library', 'http://maps.nypl.org/warper/maps/33017#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/29733/{z}/{x}/{y}.png', 'Map of the United States of North America', 'New York Public Library', 'http://maps.nypl.org/warper/maps/29733#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/27562/{z}/{x}/{y}.png', 'Railroad Map of the United States', 'New York Public Library', 'http://maps.nypl.org/warper/maps/27562#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/29660/{z}/{x}/{y}.png', 'The United States from the latest authorities', 'New York Public Library', 'http://maps.nypl.org/warper/maps/27562#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/11471/{z}/{x}/{y}.png', 'Map of The United States - D.G.Beers', 'New York Public Library', 'http://maps.nypl.org/warper/maps/11471#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/13321/{z}/{x}/{y}.png', 'Map of the United States and Mexico : including Oregon, Texas and the Californias', 'New York Public Library', 'http://maps.nypl.org/warper/maps/13321#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/10599/{z}/{x}/{y}.png', 'Map of the United States from Atlas of Madison County, New York', 'New York Public Library', 'http://maps.nypl.org/warper/maps/10599#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/8353/{z}/{x}/{y}.png', 'Map showing the location of the Indian reservations', 'New York Public Library', 'http://maps.nypl.org/warper/maps/8353#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/11626/{z}/{x}/{y}.png', 'Map of The United States of America from Atlas of Steuben County, New York ', 'New York Public Library', 'http://maps.nypl.org/warper/maps/11626#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/27558/{z}/{x}/{y}.png', 'Map of the United States of America, the British provinces, Mexico ...', 'New York Public Library', 'http://maps.nypl.org/warper/maps/27558#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/11366/{z}/{x}/{y}.png', 'Map of The United States, and Territories. Together with Canada, the British provinces, Mexico ...', 'New York Public Library', 'http://maps.nypl.org/warper/maps/11366#Show_tab'], | |
| ['http://maps.nypl.org/warper/maps/tile/10243/{z}/{x}/{y}.png', 'Map of the United States from County atlas of Cayuga, New York', 'New York Public Library', 'http://maps.nypl.org/warper/maps/10243#Show_tab'], | |
| ], { | |
| attribution: 'Inspired by <a href="http://openwhatevermap.xyz/#4/46.77/37.97">OpenWhateverMap</a></div> | All the vintage map tiles used here come from the <a href="https://digitalcollections.nypl.org/">NYPL Digital Collections</a></div>.', | |
| // Please do not steal my API keys! | |
| }).addTo(map); | |
| lastUrl = ''; | |
| map.on('click', function(e) { | |
| var data = whateverLayer.getTileData(e.latlng); | |
| if (!data) | |
| return; | |
| if (lastUrl == data[0]) { | |
| map.closePopup(); | |
| lastUrl = ''; | |
| } else { | |
| lastUrl = data[0]; | |
| map.openPopup('<b>'+data[1]+'</b><br>© <a target="owm" href="'+data[3]+'">'+data[2]+'</a><br><br>To use the layer, copy this template URL and the attribution above:<br>'+data[0], e.latlng); | |
| } | |
| }); | |
| map.on('zoomstart', function() { map.closePopup(); lastUrl = ''; }); | |
| </script> | |
| </body> | |
| </html> | |
| <head> | |
| <title>Untitled Document</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | |
| </head> | |
| <body bgcolor="#FFFFFF" text="#000000"> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A random Leaflet.js map of the USA using random map tiles from different vintage maps in the New York Public Library map collection.