src/RedisGeo/wwwroot/default.html

﻿<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="description" content="1">
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: "Trebuchet MS", Helvetica, sans-serif;
        }
        #map {
            height: 100%;
            width: 70%;
        }
        #sidebar {
            width: 30%;
            float: right;
        }
        #sidebar h3 {
            margin-bottom: 125px;
        }
        #sidebar .inner {
            padding: 0 20px;
        }
        #km {
            width: 50px;
        }
        #info {
            display: none;
        }
        #live-demos {
            position: absolute; 
            bottom: 10px; 
            right: 5px;
            color: #428bca;
            text-decoration: none;
            font-size: 13px;
        }
        #live-demos:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<a href="https://github.com/NetCoreApps/redis-geo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

<div id="sidebar">
    <div class="inner">
        <h3>Redis GEO Example</h3>

        <div id="instructions">
            Click on Map to find nearest cities using
            <a href="https://redis.io/commands/georadius">Redis GEO</a>
        </div>

        <div id="info">
            Find cities in <b id="state"></b> within <input id="km" type="text" value="20" /> km
        </div>

        <ol id="results"></ol>
    </div>
</div>
<div id="map"></div>
    
<a id="live-demos" href="https://github.com/NetCoreApps/LiveDemos">live demos</a>

<script>
    var map;
    console.log('foooo');
    function initMap() {
        map = L.map('map').setView([37.09024, -95.7128917], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        var lastMarker, lastRadius;

        map.on('click', (e) => {
            $.getJSON("https://nominatim.openstreetmap.org/reverse?lat=" + e.latlng.lat + "&lon=" + e.latlng.lng + "&zoom=8&format=json&addressdetails=1", (data) => {
                let pos = [e.latlng.lat, e.latlng.lng];
                map.setView(pos);

                if(lastMarker != null) {
                    lastMarker.remove()
                }

                lastMarker = L.marker(pos)
                lastMarker.addTo(map);

                var km = parseInt($("#km").val());
                if(lastRadius != null) {
                    lastRadius.remove();
                }
                lastRadius = L.circle(pos, km*1000).addTo(map);
                var state = getStateAbbr(data);
                if(state == null)
                {
                    $("#state").html("No state found");
                    return;
                }
                $("#state").html(state);
                $("#instructions").hide();
                $("#info").show();

                
                $.getJSON("/georesults/" + state,
                    { lat: e.latlng.lat, lng: e.latlng.lng, withinKm: km },
                    function (r) {
                        var html = $.map(r, function (x) {
                            return "<li>" + x.member + " (" + x.distance.toFixed(2) + "km)</li>";
                        }).join('');
                        $("#results").html(html);
                    });
            })
        })
        
        function getStateAbbr(results) {
            return results.address.territory != null ? results.address.territory : results.address.state;
        }
    }
    initMap();
</script>
<script src="/js/jquery-2.2.3.min.js"></script>
</body>
</html>