Wednesday 24 September 2014

Return multiple value with Tuple class

      
Create method to return multiple value

  public Tuple<int, string> testMethod()
        {
            return Tuple.Create(10, "Success");
        }
        public Tuple<int, string, bool> testMethod1()
        {
            return Tuple.Create(10, "Success", true);

        }




Call Method :

          Tuple<int, string> tpl = testMethod();
           int i = tpl.Item1;
           string sr = tpl.Item2;

Wednesday 10 September 2014

Create text file using C#




string folderName = AppDomain.CurrentDomain.BaseDirectory + @"Log";
 if (!Directory.Exists(folderName))
 {
    Directory.CreateDirectory(folderName);
 }

 String fileName = folderName + "\\TraceLog " + DateTime.Now.ToString("MMddyyyyHHmmss") + ".txt";
 if (!File.Exists(fileName))
 {
     using (StreamWriter sw = File.CreateText(fileName))
     {
            sw.Write(Message);
            sw.Close();
     }

 }

Friday 5 September 2014

Show Multiple Routes in Google Map API

Add required JS: 
  
    <script src="script/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    <script type="text/javascript">
        var map;
        var RouteCoordinates = [];
        var Routes = [];
        var RouteColor = ["#0094ff", "#479f67", "#3c9a94", "#a17b4b",
                                  "#4ad98a", "#50cfe1", "#8ad3a4", "#40cbf1",
                                  "#5ecf98", "#17c31f"];
        var DrivePath, ResLocInterval;
        var directionsService = new google.maps.DirectionsService();

        $(document).ready(function () {
            var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(40.748492, -73.985496),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            $("#btnGetDirections").click(function () {
                calcRoute($("#txtAddress1").val(), $("#txtAddress2").val(), 'Root1');
            });

            $("#btnGetDirections1").click(function () {
                calcRoute($("#txtAddress11").val(), $("#txtAddress22").val(), 'Root2');
            });
        });

        function calcRoute(start, end, FromRes) {

            for (var i = 0; i < Routes.length; i++) {
                if (Routes[i].Title == FromRes) {
                    if (Routes[i].PolyLine != null || Routes[i].PolyLine != undefined) {
                        Routes[i].PolyLine.setMap(null);
                        Routes[i].PolyLine = null;
                        clearInterval(Routes[i].Interval);
                        Routes[i].Direction.setMap(null);
                    }
                    Routes.splice(i, 1);
                    break;
                }
            }

            var directionsDisplay = new google.maps.DirectionsRenderer({
                draggable: true,
                map: map,
                polylineOptions: { strokeColor: "#6666FF", strokeOpacity: 0.4, strokeWeight: 5 },
                markerOptions: { title: FromRes }
               
            });

            var objRoute = new Object();
            objRoute.Title = FromRes;
            objRoute.PolyLine = null;
            objRoute.Interval = null;
            objRoute.OffSetCnt = 0;
            objRoute.Direction = directionsDisplay;
            Routes.push(objRoute);

            google.maps.event.addListener(directionsDisplay, 'directions_changed', function (e) {
                ShowPolyLine(directionsDisplay.getDirections(), directionsDisplay.markerOptions.title);
            });

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING,
                provideRouteAlternatives: true
            };

            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                }
            });
        }


        function ShowPolyLine(result, Title) {
            RouteCoordinates = [];
            for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                RouteCoordinates.push(new google.maps.LatLng(result.routes[0].overview_path[i].lat(), result.routes[0].overview_path[i].lng()))
            }

            var Filter = $(Routes).filter(function () {
                return this.Title == Title;
            });

            if (Filter.length > 0) {

                var lineSymbol = {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    scale: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.7,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.7,
                    strokeWeight: 4
                };

                if (Filter[0].PolyLine != null || Filter[0].PolyLine != undefined) {
                    Filter[0].PolyLine.setPath(RouteCoordinates);
                    clearInterval(Filter[0].Interval);
                }
                else {
                    Filter[0].PolyLine = new google.maps.Polyline({
                        map: map,
                        path: RouteCoordinates,
                        icons: [{
                            icon: lineSymbol,
                            offset: '100%'
                        }],
                        geodesic: true,
                        strokeColor: RouteColor[Math.random().toString().substr(5, 1)],
                        strokeOpacity: 1.0,
                        strokeWeight: 5
                    });
                }

                Filter[0].Interval = window.setInterval(function () {
                    Filter[0].OffSetCnt = (Filter[0].OffSetCnt + 1) % 4000;
                    var icons = Filter[0].PolyLine.get('icons');
                    icons[0].offset = (Filter[0].OffSetCnt / 40) + '%';
                    Filter[0].PolyLine.set('icons', icons);
                }, 100);
            }
        }

    </script>
    <style>
        html, body, form {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        #map_canvas {
            width: 80%;
            height: 100%;
            float: left;
        }
    </style>

HTML

<div id="map_canvas"></div>
        <div style="width: 20%; float: right;">
            <input type="text" placeholder="From" id="txtAddress1" value="23.026126, 72.547248" /><br />
            <input type="text" placeholder="To" id="txtAddress2" value="23.039496, 72.554963" /><br />
            <input type="button" value="Get" id="btnGetDirections" /><br />

            <input type="text" placeholder="From" id="txtAddress11" value="23.027054, 72.544780" /><br />
            <input type="text" placeholder="To" id="txtAddress22" value="23.029088, 72.551282" /><br />
            <input type="button" value="Get" id="btnGetDirections1" />

        </div>

Check Result

Marker Clusterer for Google MAP API


CSS :
<style>
        html, body, form {
            margin: 0;
            font-family: Arial;
            font-size: 16px;
            height: 100%;
            width: 100%;
        }


        #map {
            height: 90%;
            width: 100%;
        }
    </style>


Add google MAp API link here and also Markerdata.JS

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="script/data.js"></script>
<script src="script/markerdata.js"></script>


Write Below JS code in your Page

var markers = [];
        var markerCluster
        function initialize() {
            var center = new google.maps.LatLng(37.4419, -122.1419);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });


            for (var i = 0; i < data.length; i++) {
                var latLng = new google.maps.LatLng(data[i].latitude, data[i].longitude);
                var marker = new google.maps.Marker({
                    position: latLng
                });
                markers.push(marker);
            }
            markerCluster = new MarkerClusterer(map, markers, { gridSize: 20 });
        }
        google.maps.event.addDomListener(window, 'load', initialize);


        function RemoveMarker() {
            var temp = '1'; // Will remove first marker from Array
            if (markerCluster != undefined) {
                if (markerCluster.removeMarker(markers[parseInt(temp.value)]))
                    markers.splice(parseInt(temp.value), 1);

            }

        }

        function AddMarker() {
            var latLng = new google.maps.LatLng(37.4419, -122.1419);
            var marker = new google.maps.Marker({
                position: latLng
            });
            if (markerCluster.addMarker(marker))
                markers.push(marker)
        }



Add Below HTML

  <div id="map"></div>
   <div>
            <input type="text" id="txt" />
            <input type="button" value="remove" id="btn" onclick="RemoveMarker();" />

   </div>




Download sample from Here
Output will like below.