Mr.Combet Webshell 🔥

View File Name : _maps.cshtml

@model RER_Project.BusinessLayer.ViewModel.MapVM
@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    serializer.MaxJsonLength = Int32.MaxValue;
    var jsonModel = serializer.Serialize(Model);
}
<script id="infoTemplate" type="text/x-jQuery-tmpl">
    <div class="pull-left">
        <div class="pull-left" style="background: white;">

            <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" style="padding: 25px;">

                <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>Atoll:</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>
                                <li><b>Age:</b><span>${(age)}</span></li>
                            </ul>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <ul class="list-style2">

                                @*<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>
                                <li><b>IFF:</b><span>${(group_name)}</span></li>
                            </ul>
                        </div>

                    </div>
                    <div class="row pull-right">
                        <a href="#" onclick="callGoogldMap(${(latitude)},${(longitude)})"><i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;Google Map</a> &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="/maps/memberDetail/${(id)}" target="_blank">View Details</a>
                    </div>
                </div>


            </div>
        </div>
    </div>
</script>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
@*<script type="text/javascript" src="Leaflet.GoogleMutant.js"></script>*@
<script src="~/Scripts/map/province12.js"></script>
<script src="~/Scripts/map/Map12.js"></script>
<script src="~/Scripts/map/colors.js"></script>
<script type="text/javascript">

  @*  var viewbagData =@Html.Raw(Json.Encode(Model));*@

    var viewbagData =@Html.Raw(jsonModel);
    console.log(viewbagData);

     var template = $("#infoTemplate");
    var objMap = {};
    objMap["data"] =viewbagData.CommodityData;
    objMap["member"] = viewbagData.MembersList;
    objMap["grades"] = [];//viewbagData.CommodityData.sort(function(a, b){return a-b});
    objMap["mapId"] = "";
    objMap["title"] = "Untitled Map";
    objMap["desc"] = "";
    objMap["tags"] = [];
    objMap["classType"] = "natural break";
    objMap["classes"] = 3;
    objMap["color"] = 0;
    objMap["colorrange"] = [];
    objMap["unit"] = "";
    objMap["categories"] = [];

    var currentLatitude, currentLongitude;
</script>
<script>

    console.log('mapdata',objMap)
    $(document).ready(function () {
        initializeSelectApis();
        initMap1();
        getCurrentLocation();
        // initMap2();
    });

    function getCurrentLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {

        }
    }

    function showPosition(position) {
        currentLatitude = position.coords.latitude;
        currentLongitude = position.coords.longitude;
    }

    function callGoogldMap(destLat, destLong) {

        let a = document.createElement('a');
        a.target = '_blank';
        a.href = `http://maps.google.com/maps?saddr=${currentLatitude},${currentLongitude}&daddr=${destLat},${destLong}`;
        a.click();
    }

    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() {
        
        if (map != undefined) { map.remove(); }
        map = L.map('map1', {
            zoomDelta: 0.25,
            zoomSnap: 0
        }).setView([3.900512, 72.966201], 7);
        markers1 = L.markerClusterGroup();
        map._layersMaxZoom = 15
        disableZoom(map);
        // 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) {

            console.log('update', props)
            this._div.innerHTML = (props ? '<b>' + props.ADM2_EN + '</b><br />' : 'Hover over a area');
        };

        info.addTo(map);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).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)), {
        //console.log('inside map1', districtData.features)
        console.log('inside maldives', maldivesGeojson)
        geojson = L.geoJson(maldivesGeojson, {
            //pointToLayer:  marker(province1),
            style: style,
            onEachFeature: onEachFeature
        }).addTo(map);

        for (var i = 0; i < province1.length; i++) {
            var popup = template.tmpl(province1[i]).html();
            var a = province1[i];
            var marker = L.marker([a.latitude, a.longitude], {
                icon: mIcon
            });
            marker.bindPopup(popup);
            markers1.addLayer(marker);
        }
        map.addLayer(markers1);
        // 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, 6, 13],
        //        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;
        //};

        //new legend logic start
        legend.onAdd = function (map) {
            var div1;
            flagInt = true;

            if (this.getContainer() != undefined) {
                div1 = this.getContainer();
            }
            else {
                div1 = L.DomUtil.create('div', 'info legend')
            }
            var from, to;
            labels = [];
            console.log(objMap.grades);
            function decimalPlaces(num) {
                var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
                if (!match) { return 0; }
                return Math.max(
                    0,
                    // Number of digits right of decimal point.
                    (match[1] ? match[1].length : 0)
                    // Adjust for scientific notation.
                    - (match[2] ? +match[2] : 0));
            }

            function isInt(n) {//returns true if int
                return n % 1 === 0;
            }
            for (var i = 0; i < objMap.grades.length; i++) {//determines grades is int or float
                if (isInt(objMap.grades[i])) {
                    flagInt = true;
                }
                else {
                    flagInt = false;
                    break;
                }
            }

            //if (gradesLessThanOne) {//for initial legend value
            if ((objMap.grades[0] - objMap.grades[0]) < 1) {//for initial legend value
                labels.push('<i style="background:' + getColor(objMap.grades[0]) + '"></i> ' + objMap.grades[0] + '&ndash;' + objMap.grades[0 + 1] + ' ' + objMap.unit);
            }
            else {
                labels.push('<i style="background:' + getColor(objMap.grades[0] + 1) + '"></i> ' + objMap.grades[0] + '&ndash;' + objMap.grades[0 + 1] + ' ' + objMap.unit);
            }

            for (var i = 1; i < objMap.grades.length - 1; i++) {//for rest of legend value other than initial value

                from = objMap.grades[i];
                to = objMap.grades[i + 1];
                diff = to - from;

                //if (gradesLessThanOne) {
                if (diff < 1) {
                    //if (diff < 0.5)
                    from_final = from + 0.01;
                    //else
                    //    from_final = from + 0.05;
                }
                else {
                    from_final = from + 1;
                }

                // isInt(diff);

                console.log(flagInt);
                if (flagInt) {
                    fromm_ = from + 1;
                    labels.push('<i style="background:' + getColor(from_final) + '"></i> ' + from_final + '&ndash;' + to + ' ' + objMap.unit);
                }
                else {
                    var fromm;
                    var decNum = decimalPlaces(from);
                    var n = "0.";
                    console.log("from: " + from);
                    console.log("decimal places: " + decNum);
                    for (var t = 0; t < decNum - 1; t++) {
                        n = n + "0";
                    }
                    n = n + "1";
                    var nn = parseFloat(n);
                    if (diff < 1) {
                        if (decNum == 0)
                            fromm = from + nn;
                        else
                            fromm = (from + nn).toFixed(decNum);
                    }
                    else {
                        if (decNum == 0)
                            fromm = from + nn;
                        else
                            fromm = (from + nn).toFixed(decNum);
                    }
                    console.log("nn" + nn);
                    labels.push('<i style="background:' + getColor(from_final) + '"></i> ' + fromm + '&ndash;' + to + ' ' + objMap.unit);
                }
            }

            div1.innerHTML = labels.join('<div style="height:5px"></div>');
            return div1;
        };
        //new legend logic end

        classifyData(objMap.data, objMap.member, objMap.classes, objMap.classType);
        legend.addTo(map);
        geojson.setStyle(style);
    }
    function initMap2() {
        if (map2 != undefined) { map2.remove(); }
        map2 = L.map('map2', {
            zoomDelta: 0.25,
            zoomSnap: 0
        }).setView([27.19, 85.96], 8);
        markers2 = L.markerClusterGroup();
        map2._layersMaxZoom = 15
        disableZoom(map2);
        // 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);

        for (var i = 0; i < province2.length; i++) {
            var popup = template.tmpl(province2[i]).html();
            var a = province2[i];
            var marker = L.marker(L.latLng(a.latitude, a.longitude), {
                icon: mIcon
            });
            marker.bindPopup(popup);
            markers2.addLayer(marker);
        }
        map2.addLayer(markers2);

        // 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];

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

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

        //new legend logic start
        legend2.onAdd = function (map2) {
            var div1;
            flagInt = true;

            if (this.getContainer() != undefined) {
                div1 = this.getContainer();
            }
            else {
                div1 = L.DomUtil.create('div', 'info legend')
            }
            var from, to;
            labels = [];
            console.log(objMap.grades);
            function decimalPlaces(num) {
                var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
                if (!match) { return 0; }
                return Math.max(
                    0,
                    // Number of digits right of decimal point.
                    (match[1] ? match[1].length : 0)
                    // Adjust for scientific notation.
                    - (match[2] ? +match[2] : 0));
            }

            function isInt(n) {//returns true if int
                return n % 1 === 0;
            }
            for (var i = 0; i < objMap.grades.length; i++) {//determines grades is int or float
                if (isInt(objMap.grades[i])) {
                    flagInt = true;
                }
                else {
                    flagInt = false;
                    break;
                }
            }

            //if (gradesLessThanOne) {//for initial legend value
            if ((objMap.grades[0] - objMap.grades[0]) < 1) {//for initial legend value
                labels.push('<i style="background:' + getColor(objMap.grades[0]) + '"></i> ' + objMap.grades[0] + '&ndash;' + objMap.grades[0 + 1] + ' ' + objMap.unit);
            }
            else {
                labels.push('<i style="background:' + getColor(objMap.grades[0] + 1) + '"></i> ' + objMap.grades[0] + '&ndash;' + objMap.grades[0 + 1] + ' ' + objMap.unit);
            }

            for (var i = 1; i < objMap.grades.length - 1; i++) {//for rest of legend value other than initial value

                from = objMap.grades[i];
                to = objMap.grades[i + 1];
                diff = to - from;

                //if (gradesLessThanOne) {
                if (diff < 1) {
                    //if (diff < 0.5)
                    from_final = from + 0.01;
                    //else
                    //    from_final = from + 0.05;
                }
                else {
                    from_final = from + 1;
                }

                // isInt(diff);

                console.log(flagInt);
                if (flagInt) {
                    fromm_ = from + 1;
                    labels.push('<i style="background:' + getColor(from_final) + '"></i> ' + from_final + '&ndash;' + to + ' ' + objMap.unit);
                }
                else {
                    var fromm;
                    var decNum = decimalPlaces(from);
                    var n = "0.";
                    console.log("from: " + from);
                    console.log("decimal places: " + decNum);
                    for (var t = 0; t < decNum - 1; t++) {
                        n = n + "0";
                    }
                    n = n + "1";
                    var nn = parseFloat(n);
                    if (diff < 1) {
                        if (decNum == 0)
                            fromm = from + nn;
                        else
                            fromm = (from + nn).toFixed(decNum);
                    }
                    else {
                        if (decNum == 0)
                            fromm = from + nn;
                        else
                            fromm = (from + nn).toFixed(decNum);
                    }
                    console.log("nn" + nn);
                    labels.push('<i style="background:' + getColor(from_final) + '"></i> ' + fromm + '&ndash;' + to + ' ' + objMap.unit);
                }
            }

            div1.innerHTML = labels.join('<br>');
            return div1;
        };
        //new legend logic end

        classifyData(objMap.data, objMap.member, objMap.classes, objMap.classType);
        legend2.addTo(map2);
        geojson2.setStyle(style);
    }

    function disableZoom(map) {
        map.scrollWheelZoom.disable();
        //this.map.on('click', () => { this.map.scrollWheelZoom.enable(); });
        //this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable(); });
    }
    function getColor(d) {
        return d > 12
            ? "#deebf7"
            : d > 6
                ? "#9ecae1" : "#3182bd";
    };

    //function getColor(d/*238*/) {
    //    console.log('color',d)
    //    var idx = 0;
    //    var color_idx = 3;

    //    for (var i = 0; i < objMap.grades.length - 1; i++) {
    //        if (d >= objMap.grades[i] && d <= objMap.grades[i + 1]) {
    //            return colorsch[idx].colors[color_idx].range[i];
    //        }
    //    }
    //}
    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) {
        console.log('highligt')
        var layer = e.target;
        layer.setStyle({
            weight: 1,
            color: '#0f0',
            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) {
        map.fitBounds(e.target.getBounds());
        //map2.fitBounds(e.target.getBounds());
    };
    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
        console.log('property name', feature.properties.name)
        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) {
        var new_Data = [];
        new_Data["data"] = [];
        new_Data["member"] = [];
        for (var i = 0; i < ref_Data.length; i++) {
            new_Data.data.push(ref_Data[i]);
        }
        for (var i = 0; i < ref_Member.length; i++) {
            new_Data.member.push(ref_Member[i]);
        }
        var p1 = new_Data.member.filter(x => x.province_id == parseInt(1));
        var p2 = new_Data.member.filter(x => x.province_id == parseInt(2));
        var s = new_Data.data;
        s.sort(function (a, b) { return a - b }); //sort data in ascending order

        var class_Size = parseInt((s[s.length - 1] - s[0]) / No_Of_Classes);

        objMap.grades = [];
        for (var i = 0; i < No_Of_Classes; i++) {
            objMap.grades.push(new_Data.data[0] + i * class_Size);
        }
        objMap.grades.push(new_Data.data[new_Data.data.length - 1]);
        //marker(p1);
        //marker2(p2);

    };
    //function marker(data) {
    //    debugger
    //    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++) {
    //        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();
    //};

    //function marker2(data) {
    //    markers2 = L.markerClusterGroup();
    //    var mIcon = L.icon({
    //        iconUrl: '../Images/dot.png',
    //        iconSize: [15, 15], // size of the icon
    //    });
    //    for (var i = 0; i < data.length; i++) {
    //        var popup = template.tmpl(data[i]).html();
    //        var a = data[i];
    //        var marker = L.marker(L.latLng(a.latitude, a.longitude), {
    //            icon: mIcon
    //        });
    //        marker.bindPopup(popup);
    //        markers2.addLayer(marker);
    //    }
    //    map2.addLayer(markers2);
    //    //refreshMap2();
    //};
    function refreshMap1() {
        map.setView([27.19, 87.09], 8);
    };
    function refreshMap2() {
        map2.setView([27.19, 85.96], 8);
    };
</script>

<style>
    .leaflet-control {
        width: 100% !important;
    }
</style>