Last active
September 29, 2022 23:44
-
-
Save pramsey/1d95365f660bebac3ca21ca913b5f9d9 to your computer and use it in GitHub Desktop.
Geonames Heat Map
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Geonames Heat Map</title> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> | |
| <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" | |
| integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" | |
| crossorigin=""/> | |
| <!-- Make sure you put this AFTER Leaflet's CSS --> | |
| <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" | |
| integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" | |
| crossorigin=""></script> | |
| <script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script> | |
| <script src="https://code.jquery.com/jquery-1.12.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> | |
| <script> | |
| var myLayer; | |
| $( function() { | |
| var server = "http://p.fhlzf432a5gmvaj456jql4a4di.db.postgresbridge.com:5435/functions/"; | |
| //var server = "https://crunchy-heatmap-data.netlify.app/.netlify/functions/"; | |
| $( "#tags" ).autocomplete({ | |
| source: function(request, response) { | |
| var url = server + "geonames_stats_query/items.json?q="; | |
| var q = encodeURI(request.term); | |
| $.get(url+q, function(data) { | |
| response(data.map(d => d['value'])); | |
| }); | |
| }, | |
| select: function( event, ui ) { | |
| var url = server + "geonames_query/items.json?q="; | |
| var q = encodeURI(ui.item.value); | |
| $.get(url+q, function(data, status) | |
| { | |
| myLayer.setLatLngs(data.map(p => [p['latitude'], p['longitude']])); | |
| $("#fcount").html(data.length); | |
| }); | |
| } | |
| }); | |
| } ); | |
| </script> | |
| <style> | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| html, body, #mapid { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #mapid { z-index: 1 } | |
| #query { | |
| background: #ffffff99; | |
| padding: 0.5em 1.5em; | |
| position: absolute; | |
| left: 4em; | |
| top: 1em; | |
| z-index: 2; | |
| } | |
| #tags { | |
| font-size: 105%; | |
| padding-left: 0.2em; | |
| } | |
| #query h2 { margin-top: 0.4em; margin-bottom: 0.4em; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="query"> | |
| <h2>Geonames Heat Map</h2> | |
| <p><label for="tags">Name: </label><input id="tags"></p> | |
| <p>Feature count: <span id="fcount"></span></p> | |
| </div> | |
| <div id="mapid"></div> | |
| <script> | |
| var tileurl = 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png'; | |
| // var tileurl = 'https://{s}.basemaps.cartocdn.com/rastertiles/{id}/{z}/{x}/{y}.png'; | |
| var myMap = L.map('mapid').setView([37.38,-102.02], 4); | |
| L.tileLayer(tileurl, { | |
| maxZoom: 18, | |
| id: 'voyager' | |
| }).addTo(myMap); | |
| // Heat map layer | |
| var myLayerOptions = { | |
| minOpacity: 0.4, //the minimum opacity the heat will start at | |
| maxZoom: 11, //zoom level where the points reach maximum intensity | |
| max: 1.0, // maximum point intensity, 1.0 by default | |
| radius: 15, // radius of each "point" of the heatmap, 25 by default | |
| blur: 15, // amount of blur, 15 by default | |
| gradient: {0.4: 'blue', 0.65: 'lime', 0.9: 'red'} | |
| }; | |
| myLayer = L.heatLayer([], myLayerOptions).addTo(myMap); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment