divan/GanjooRazor/Pages/Map.cshtml

@page 
@model GanjooRazor.Pages.MapModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
    <title>نقشهٔ گنجور</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <link href="/css/p8.css?version=13" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/leaflet.css" />
    <style>
        .leaflet-container {
            background-color: #c5e8ff;
        }
        .leaflet-popup-content{
            font-family: 'Vazir'
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="~/js/leaflet.js"></script>
    <script src="~/js/leaflet-providers.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
    <script>
        var poetsgroups = [];
        var poetGroupIndex = 0;
        var map;
        var oms;
        var layerGroup;
        var myGeoJSONPath = '/json/world.json';
        var myCustomStyle = {
            stroke: true,
            weight: 1,
            color: '#300',
        }

        $.getJSON(myGeoJSONPath, function (data) {
            var map = L.map('map').setView([34, 53.6880], 5);



            L.geoJson(data, {
                clickable: false,
                style: myCustomStyle
            }).addTo(map);

            L.tileLayer.provider('Stamen.Watercolor').addTo(map);

            oms = new OverlappingMarkerSpiderfier(map, { keepSpiderfied: true });

            poetsgroups = @(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.PoetGroupsWithBirthPlaces, Newtonsoft.Json.Formatting.Indented)));

            var popup = new L.Popup();
            oms.addListener('click', function (marker) {
                
                var poetDesc = marker.desc;
                var index = $('#rangeInput').val();
                for (var i = 0; i < poetsgroups[index].Poets.length; i++) {
                    if (poetsgroups[index].Poets[i].Name == marker.desc) {
                        poetDesc = '<a target="_blank" href="' + poetsgroups[index].Poets[i].FullUrl+'">' + poetsgroups[index].Poets[i].Name + '</a>'
                        document.getElementById('poet').innerHTML = poetDesc;
                        break;
                    }
                }

                popup.setContent(poetDesc);
                popup.setLatLng(marker.getLatLng());
                map.openPopup(popup);
            });

            var rangeValues = [];

            for (var i = 0; i < poetsgroups.length; i++) {
                rangeValues.push(poetsgroups[i].Name);
            }

            $('#rangeText').text(poetsgroups[0].Name);

            layerGroup = L.layerGroup().addTo(map);

            var poets = poetsgroups[0].Poets;
            for (var i = 0; i < poets.length; i++) {
                var poet = poets[i];
                var icon = L.icon({
                    iconUrl: poet.ImageUrl,
                    iconSize: [82, 100],
                    iconAnchor: [82, 100],
                    popupAnchor: [0, -28]
                });

                marker = L.marker([poet.BirthPlaceLatitude, poet.BirthPlaceLongitude], { icon: icon });

                marker.desc = poet.Name;

                marker.addTo(layerGroup);
                oms.addMarker(marker);
            }
        });

        $(function () {
            $('#rangeInput').on('input change', function () {
                var val = $(this).val();
                if (val >= 0 && val < poetsgroups.length) {
                    $('#rangeText').text(poetsgroups[val].Name);

                    var index = $(this).val();
                    layerGroup.clearLayers();
                    var poets = poetsgroups[index].Poets;
                    for (var i = 0; i < poets.length; i++) {
                        var poet = poets[i];
                        var icon = L.icon({
                            iconUrl: poet.ImageUrl,
                            iconSize: [82, 100],
                            iconAnchor: [82, 100],
                            popupAnchor: [0, -28]
                        });

                        var marker = L.marker([poet.BirthPlaceLatitude, poet.BirthPlaceLongitude], { icon: icon });

                        marker.desc = poet.Name;

                        marker.addTo(layerGroup);
                        oms.addMarker(marker);
                    }
                }
                
            });

        });
    </script>
</head>

<body>
    <div id="fa" style="position:absolute;top:0px;bottom:0px;width:100%">
        <div id="map" style="height: 550px"></div>
        <input type="range" id="rangeInput" name="rangeInput" step="1" min="0" max="@(Model.PoetGroupsWithBirthPlaces.Count-1)" value="0">
        <div class="century" id="rangeText"></div>
        <div id="poet"></div>
        <div id="maincnt">
            <p>
                این نقشه بر اساس زادگاه سخنوران ساخته شده است. زادگاه برخی از آنان محل مناقشه است که قول مشهور برای انتخاب زادگاهشان مورد مراجعه قرار گرفته است. با انتخاب نشان نخستین سخنورِ شهرهایی مثل «شیراز» که زادگاه سخنوران متعددی است می‌توانید نشان سخنوران دیگر آن شهر را هم ببینید. با لمس یا انتخاب نام هر سخن‌سرا به صفحهٔ متناظر او در گنجور هدایت می‌شوید.
            </p>
        </div>
    </div>
</body>
</html>