Latest

random

Google Maps C# - How to Animate Symbol on Multiple Polylines

Javascript Code - Animate Google maps Polyline


In my previous post I explained how to Draw interactive polyline path from source to destination in Google Maps v3. In this example I will show how to animate symbol on multiple polylines using Google Maps API v3. Find the source code below:


How to draw, polyline, location, route, using API Google Maps, v3, ASP .Net

Defaul.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Google Maps C#- How to animate symbol on multiple polylines</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>

    <style type="text/css">
        html, body, #map-canvas
        {
            margin: 0;
            padding: 0;
            height: 500px;
            width: auto;
        }
    </style>

    <%--Google Maps API--%>
    <script type="text/javascript">
        // Loading google map on web page
        var map;
        var icon = '';
        google.maps.visualRefresh = true;
        function initialize() {
            var mapOptions = {
                zoom: 14,                                    // Set Zoom Level
                center: new google.maps.LatLng(28.682155, 77.4543),     // Set the Latitude and longitude of the location
                mapTypeId: google.maps.MapTypeId.ROADMAP  // Set Map Type Here ROADMAP, TERRAIN, SATELLITE
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),      // Creating the map object to desplay
                mapOptions);
        }
       
         // Create Lat/Lon object
        function CreateLatLngObject(Latitude, Longitude) {
            var latlng = new google.maps.LatLng(parseFloat(Latitude), parseFloat(Longitude));
            return latlng;
        }

        // Fetching latitude and longitude from the database
        function GetData() {
            Removeroute();
            var respons = $.ajax({
                url: "Handler.ashx?Analysis=getInfo",
                type: "post",
                async: false,
                data: {},
                success: function (data) {
                },
                error: function () {
                    alert("failure");
                }
            }).done(function (resp) {
                if (resp != '') {

                    var jresp = $.parseJSON(resp);resetMap();
                    DrawLocationOnMap(jresp);
                }
                else {
                    alert('No data found.');
                }
            });
        }
              
        var arrCoordinates = []; var lPath = '';

        function animateCircle() {
            var count = 0;
            window.setInterval(function () {
                count = (count + 1) % 200;

                var icons = line.get('icons');
                icons[0].offset = (count / 2) + '%';
                line.set('icons', icons);
            }, 20);
        }
       
        var lineCoordinates = []; var line='';
        function DrawLocationOnMap(jresp) {           
            var lineSymbol = {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 8,
                fillColor: '#FF0000',
                fillOpacity: 1,

                strokeColor: 'white',
                strokeWeight: .5
            };
           
            for (var i = 0; i < jresp.data.columns.length; i++) {
                var ClmnVal = jresp.data.rows[i];
                lineCoordinates.push(new google.maps.LatLng(ClmnVal.split(',')[0], ClmnVal.split(',')[1])); // dynamic array
            }
           
            // drawing polyline
            line = new google.maps.Polyline({
                path: lineCoordinates,
                icons: [{
                    icon: lineSymbol,
                    offset: '100%'
                }],
                map: map
            });

            line.setOptions({ strokeColor: '#00FF00' }); // changing polyline color dynamically
            animateCircle();
        }

        function RemoveLocationOnMap() {
            if (arrCoordinates) {
                arrCoordinates.length = 0;
                lPath.setMap(null)
            }
            arrCoordinates = [];

        }

        function Removeroute() {
            if (lineCoordinates) {
                lineCoordinates.length = 0;
                if(line)
                {
                    line.setMap(null)
                }
            }
            lineCoordinates = [];
            resetMap();
        }       
       
        function resetMap() {
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            map.setZoom(14);
            map.setCenter(new google.maps.LatLng(28.682155, 77.4543));
        }
       
    </script>

</head>
<body onload="initialize();">
    <form id="form1" runat="server">
    <h2>Google Maps C#- How to animate symbol on multiple polylines</h2>
         <a href="#" style="text-decoration: none;" onclick="GetData();">Run</a>&nbsp;&nbsp;&nbsp;&nbsp;
         <a href="#" style="text-decoration: none;" onclick="Removeroute();">Clear Map</a>
        <br />
        <br />
        <div id="map-canvas">
        </div>
    </form>
</body>

</html>

Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Data;
using System.Text;

public class Handler : IHttpHandler, System.Web.SessionState.IRequiresSessionState{
   
    public void ProcessRequest (HttpContext context) {
        if (context.Request.QueryString.Count > 0)
        {
            if (context.Request.QueryString["Analysis"].Trim().Equals("getInfo"))
            {
                getLayerinfo(context);
            }
        }
    }

    private void getLayerinfo(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string featureInfo = getFeatureinfo(context);
        context.Response.Write(featureInfo);
        context.Response.End();
    }

    private string getFeatureinfo(HttpContext context)
    {
        string featurefetail =string.Empty;
       
        DataTable dt = new DataTable();
        dt.Columns.Add("Latitude", typeof(string));
        dt.Columns.Add("Longitude", typeof(string));

        //
        // Here we add DataRows.
        //
        dt.Rows.Add("28.675453", "77.412758");
        dt.Rows.Add("28.67598", "77.414989");
        dt.Rows.Add("28.678465", "77.419195");
        dt.Rows.Add("28.687651", "77.432499");
        dt.Rows.Add("28.689534", "77.433701");
        dt.Rows.Add("28.688385", "77.434537");
        dt.Rows.Add("28.688545", "77.434784");
        dt.Rows.Add("28.688602", "77.434559");

        if (dt.Rows.Count > 0)
        {
            featurefetail = "{\"status\":true,\"data\":{";
            string colarr = "", rowArr = "";

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string colName = dt.Columns[0].ColumnName + "," + dt.Rows[i][1].ToString() + "";
                string rowVal = dt.Rows[i][0].ToString() + "," + dt.Rows[i][1].ToString()+"";
               
                if (rowVal != "")
                {
                    colarr += (colarr == "") ? "\"" + colName + "\"" : ",\"" + colName + "\"";
                    rowArr += (rowArr == "") ? "\"" + rowVal + "\"" : ",\"" + rowVal + "\"";
                }
            }

            colarr = "\"columns\":[" + colarr + "]";
            rowArr = ",\"rows\":[" + rowArr + "]";

            featurefetail += colarr + rowArr + "}}";
        }
        else
        {
            featurefetail = "{\"status\":false,\"data\":\"\"}";
        }
        return featurefetail;
    }
   
    public bool IsReusable {
        get {
            return false;
        }
    }

}
Download the source code click here ..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading .. :)

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.