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:
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--%>
// 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>
<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 .. :)
Google Maps C# - How to Animate Symbol on Multiple Polylines
Reviewed by Ravi Kumar
on
2:09 PM
Rating:
Reviewed by Ravi Kumar
on
2:09 PM
Rating:
No comments: