Mr.Combet Webshell 🔥

Edit File Name : Index.cshtml

@model RER_Project.BusinessLayer.ViewModel.MapVM
@{
    ViewBag.Title = "MAP Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

</head>

.leaflet-popup-content-wrapper .table {
            border: 1px solid #ccc;
            border-top: none;
            margin-bottom: 0;
        }

.leaflet-popup-content-wrapper .table > tbody > tr > td {
                border-top: none;
            }

.leaflet-popup-content {
        width: auto !important;
    }

.leaflet-popup-content .tab-content {
            border: 1px solid #ccc;
            border-top: none;
            padding: 15px;
        }

.tab-sub-content .list-style2 li span {
        color: #777777;
    }

.leaflet-popup-tip-container {
        display: none;
    }

.leaflet-popup {
        left: -265px !important;
        bottom: -60px !important;
    }

.legend {
        text-align: left;
        line-height: 18px;
        color: #555;
    }

.legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }

.legend1 {
        text-align: left;
        line-height: 18px;
        color: #555;
    }

.legend1 i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }

.image-block {
        background-size: cover;
        background-position: center;
    }

.visibility .popupLink {
        display: none;
    }

.popupLink {
        border: 8px solid #eae9e9 !important;
        padding: 10px !important;
        height: 100%;
        min-height: 200px;
        color: #ffffff;
        cursor: pointer;
    }

.popupLink .centered-block {
            position: absolute;
            bottom: 5px;
            right: 10px;
            left: auto;
        }

.popupLink label {
            position: absolute;
            text-shadow: 0 0px 2px rgba(0,0,0,0.9);
        }

.list-style1 li, .list-style2 li {
        margin-bottom: 10px;
    }

.list-style2 b {
        display: inline-block;
        padding-right: 5px;
    }

.info {
        padding: 6px 8px;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        font-size: 12px;
        font-weight:800;
    }

.info2 {
        padding: 6px 8px;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        font-size: 14px;
    }

.btn {
        border-radius: 0px;
    }

.column {
        float: left;
        width: 49%;
        margin: 5px;
    }

/* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form id="CreateUserForm">
                        <div id="eror_msg"></div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label><strong>Commodity</strong></label>
                                <select type="text" class="form-control required" name="CommodityId" id="CommodityId" data-api="/commodity/select"></select>

</div>
                            <div class="col-md-1">
                                <label class="align-label-btm">&nbsp;&nbsp;</label>
                                <button type="button" id="search" name="search" class="btn btn-primary center-orientation"><i class="fa fa-search" aria-hidden="true"></i></button>

</div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="column">
                                <label ><b>Province 1</b></label>
                                <div id="map1" style="height:650px;">
                                </div>
                            </div>
                            <div class="column">
                                <label><b>Province 2</b></label>
                                <div id="map2" style="height:650px;"></div>
                            </div>
                            
                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="infoTemplate" type="text/x-jQuery-tmpl">
    <div class="pull-left">

<ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#general-info" data-toggle="tab" aria-expanded="true"><b>Member Details</b></a></li>

</ul>
        <div id="myTabContent" class="tab-content tab-sub-content">

<div class="tab-pane fade active in" id="general-info">
                <div class="row-wrap row">
                    <div class="col-sm-6 col-xs-12">
                        <ul class="list-style2">
                            <li><b>Province:</b><span>${province_name}</span></li>
                            <li><b>District:</b><span>${district_name}</span></li>

<li><b>Commodity Type:</b><span>${commodity_type}</span></li>
                            <li><b>Full Name:</b><span>${full_name}</span></li>

</ul>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <ul class="list-style2">
                            <li><b>Age:</b><span>${(age)}</span></li>
                            <li><b>Origin:</b><span>${(origin)}</span></li>
                            <li><b>Gender:</b><span>${(gender)}</span></li>
                            <li><b>Latitude:</b><span>${(latitude)}</span></li>
                            <li><b>Longitude:</b><span>${(longitude)}</span></li>

</ul>
                    </div>

</div>
            </div>

</div>
    </div>
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

},
            error: function (xhr) {
                alert("Error has occurred..");
            }
        })
     });
    var markers1;
    var markers2;
    var labels = [];
    var geojson;
    var geojson2;
    var maptitle = "";
    var map;
    var info;
    var legend;
    var map2;
    var info2;
    var legend2;
    var mIcon = L.icon({
            iconUrl: '../Images/dot.png',
            iconSize: [15, 15], // size of the icon
        });

function initMap1() {

map = L.map('map1', {}).setView([27.19, 87.09], 9);
        map._layersMaxZoom=15
        
        // control that shows state info on hover
        info = L.control();

info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };

info.update = function (props) {
            this._div.innerHTML = (props ? '<b>' + props.name + '</b><br />' + objMap.data[props.id - 1] + ' ' + objMap.unit : 'Hover over a district');
        };

info.addTo(map);

for (var i = 1; i <= 75; i++) {
            $("#d" + i).val(objMap.data[i - 1]);
        }
        var province1=objMap.member.filter(x => x.province_id == parseInt(1));
        marker(province1);

geojson = L.geoJson(districtData.features.filter(x => x.properties.pcode == parseInt(1)), {
            //pointToLayer:  marker(province1),
            style: style,
            onEachFeature: onEachFeature
        }).addTo(map);

// DATA ATTRIBUTION
        map.attributionControl.addAttribution('&copy; <a style="font-size:10px;font-weight: bold;" href="http://ptas.com.np/">Pathway Technologies</a>');
        $('.leaflet-control-attribution').css('background', 'transparent');
        legend = L.control({ position: 'bottomleft' });

legend.onAdd = function (map) {
            var div = L.DomUtil.create("div", "info legend"),
                grades = [0, 10, 20],
                labels = [],
                from,
                to;

for (var i = 0; i < grades.length; i++) {
                from = grades[i];
                to = grades[i + 1];

labels.push(
                    '<i style="background:' +
                    getColor(from + 1) +
                    '"></i> ' +
                    from +
                    (to ? "&ndash;" + to : "+")
                );
            }

div.innerHTML = labels.join("<br>");
            return div;
        };

//classifyData(objMap.data, objMap.classes, objMap.classType);
        legend.addTo(map);
        geojson.setStyle(style);
    }
    function initMap2() {

map2 = L.map('map2', {}).setView([27.19,85.96], 9);
        map2._layersMaxZoom=15
        
        // control that shows state info on hover
        info2 = L.control();

info2.onAdd = function (map2) {
            this._div1 = L.DomUtil.create('div', 'info2');
            this.update();
            return this._div1;
        };

info2.update = function (props) {
            this._div1.innerHTML = (props ? '<b>' + props.name + '</b><br />' + objMap.data[props.id - 1] + ' ' + objMap.unit : 'Hover over a district');
        };

info2.addTo(map2);

for (var i = 1; i <= 75; i++) {
            $("#d" + i).val(objMap.data[i - 1]);
        }
        var province2 = objMap.member.filter(x => x.province_id == parseInt(2));

marker2(province2);
        geojson2 = L.geoJson(districtData.features.filter(x => x.properties.pcode == parseInt(2)), {
            //pointToLayer: marker2(province2),
            style: style,
            onEachFeature: onEachFeature
        }).addTo(map2);

// DATA ATTRIBUTION
        map2.attributionControl.addAttribution('&copy; <a style="font-size:10px;font-weight: bold;" href="http://ptas.com.np/">Pathway Technologies</a>');
        $('.leaflet-control-attribution').css('background', 'transparent');
        legend2 = L.control({ position: 'bottomleft' });

legend2.onAdd = function (map2) {
            var div1 = L.DomUtil.create("div", "info legend"),
                grades = [0, 10, 20],
                labels = [],
                from,
                to;

for (var i = 0; i < grades.length; i++) {
                from = grades[i];
                to = grades[i + 1];
                debugger;
                labels.push(
                    '<i style="background:' +
                    getColor(from + 1) +
                    '"></i> ' +
                    from +
                    (to ? "&ndash;" + to : "+")
                );
            }

div1.innerHTML = labels.join("<br>");
            return div1;
        };

//classifyData(objMap.data, objMap.classes, objMap.classType);
        legend2.addTo(map2);
        geojson2.setStyle(style);
    }
    function getColor(d) {
        return d > 20
            ? "#00008b"
            : d > 10
                ? "#add8e6" : "#FFEDA0";
    };
    function style(feature) {
        return {
            weight: 1,
            opacity: 1,
            color: '#000',
            dashArray: '3',
            fillOpacity: 0.9,
            fillColor: getColor(objMap.data[feature.properties.id - 1])
        };
    };
    function highlightFeature(e) {
        var layer = e.target;
        layer.setStyle({
            weight: 0,
            color: '#000',
            dashArray: '3',
            fillOpacity: 0.9
        });

if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
        info.update(layer.feature.properties);
        info2.update(layer.feature.properties);
    };
    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
        geojson2.resetStyle(e.target);
        info2.update();
    };
    function zoomToFeature(e) {
        debugger
        map.fitBounds(e.target.getBounds());
        map2.fitBounds(e.target.getBounds());
    };
    function onEachFeature(feature, layer) {
        debugger
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
        layer.bindPopup(feature.properties.name, { noHide: true });
    };

function updatedata() {
        classifyData(objMap.data,objMap.member, objMap.classes, objMap.classType);
        legend.addTo(map);
        legend2.addTo(map2);
        geojson.setStyle(style);
        geojson2.setStyle(style);
    };
    //Equal Interval OR Quantile OR Natural Break
    function classifyData(ref_Data,ref_Member, No_Of_Classes, method) {

};
    function marker(data) {
        markers1 = L.markerClusterGroup();
        var mIcon = L.icon({
            iconUrl: '../Images/dot.png',
            iconSize: [15, 15], // size of the icon
        });
        $(".leaflet-marker-icon").remove();
        $(".leaflet-popup").remove();
        //for (var i = 0; i < data.length; ++i) {
        //    if (data[i].latitude && data[i].longitude) {
        //        var popup = template.tmpl(data[i]).html();
        //         L.marker([data[i].latitude, data[i].longitude], { icon: mIcon })
        //            .bindPopup(popup)
        //            .addTo(map);

//    }
        //}
        for (var i = 0; i < data.length; i++) {
            var popup = template.tmpl(data[i]).html();
            var a = data[i];
            var marker = L.marker([a.latitude, a.longitude], {
                icon: mIcon
            });
            marker.bindPopup(popup);
            markers1.addLayer(marker);
        }
        map.addLayer(markers1);
        //refreshMap1();
    };