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="description" content="سخنوران و نویسندگان گنجور روی نقشهٔ جغرافیایی" />
    <meta charset="utf-8" />
    <link href="/css/p8.css?version=64" 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="/js/bk.js?version=44"></script>
    <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('OpenStreetMap').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><br /><a class="actionlink" onclick = "viewLocation(' + poetsgroups[index].Poets[i].BirthPlaceLatitude + ', ' + poetsgroups[index].Poets[i].BirthPlaceLongitude + ')"> ' + poetsgroups[index].Poets[i].BirthPlace + ' </a>'
                        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);

                    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>

    @if (!string.IsNullOrEmpty(Model.LastError))
    {
        <p>@Model.LastError</p>
    }
    else
    {
        <div id="map"></div>
        <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>
                <p>
                    نقشهٔ خاستگاه سخن‌سرایان <a href="/" style="text-decoration:none">گنجور</a>
                </p>
            </div>
        </div>
        @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
        {
            <!-- Global site tag (gtag.js) - Google Analytics -->
            <script async src="https://www.googletagmanager.com/gtag/js?id=@(ViewData["GoogleAnalyticsCode"])"></script>
            <script>
                window.dataLayer = window.dataLayer || [];
                function gtag() { dataLayer.push(arguments); }
                gtag('js', new Date());

                gtag('config', '@ViewData["GoogleAnalyticsCode"]');
            </script>
        }
    }

</body>
</html>