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 name="robots" content="noindex, nofollow" />
    <meta charset="utf-8" />
    <link href="/css/p8.css?version=14" 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 iconWidth = 41;
        var iconHeight = 50;
        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: [iconWidth, iconHeight],
                    iconAnchor: [iconWidth, iconHeight],
                    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);
                    document.getElementById('poet').innerHTML = '';

                    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: [iconWidth, iconHeight],
                            iconAnchor: [iconWidth, iconHeight],
                            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="map" >
        <div id="map-guide">
            <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>
                <p>
                    این نقشه بر اساس زادگاه سخنوران ساخته شده است. با انتخاب نشان نخستین سخنورِ شهرهایی مثل «شیراز» که زادگاه سخنوران متعددی است می‌توانید نشان سخنوران دیگر آن شهر را هم ببینید. با لمس یا انتخاب نام هر سخن‌سرا به صفحهٔ متناظر او در گنجور هدایت می‌شوید.
                </p>
            </div>
        </div>
    </div>
</body>
</html>