Logic, but in a different way

Daft Logic

Google Maps Split Route Tool

Last Updated 10th November 2013

[Map Height : Small - Medium - Large]

Description

There is a need, when creating routes, to allow a new marker to be inserted into the route between points that have already been input. This can be achieved by splitting a single polyline into two polylines and adding a new marker mid-way between them. From then on the user can then drag each marker to a different location.

How To Use

  1. Draw a route by clicking points sequentially
  2. Once you have 2 or more points you can click the [Make a Split] option to start the split function
  3. Click the first...
  4. ...And second points in between which you wish to make the split. The order in which you click (1,2 or 2,1) is not important
  5. Drag the new marker (if required) to the correct location

How it Works

var map;
var messagediv=document.getElementById('messagediv');
var routePoints=new Array(0);
var routeMarkers=new Array(0);
var routePath;
var temp = new Array();
var markers=[];
var lines=[];
var polygonPoints=[];
var polygon=null;
var lineColor="#ff0000";
var lineWidth=1;

var mode=0;
var splitpoint1;
var splitpoint2;
var listner;

function initialize()
{
messagediv.innerHTML='Loading ...';
var latlng = new google.maps.LatLng(0,0);
var myOptions = {zoom:2,center:latlng,mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},draggableCursor:'crosshair'};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
listner=google.maps.event.addListener(map, 'click', clickmap);
messagediv.innerHTML='Ready';
}

function clickmap(event)
{
if (mode==0)
{
routePoints.push(event.latLng);
messagediv.innerHTML="Adding Point ("+(routePoints.length)+")...";
CheckPointsForSplit(routePoints.length);
var marker=placeMarker(event.latLng,routePoints.length);
routeMarkers.push(marker);

//remove old polyline first
if (!(routePath==undefined))
{
routePath.setMap(null);
}
routePath=getRoutePath();
routePath.setMap(map);

CheckPointsForSplit(routePoints.length);
}
}

function placeMarker(location,number)
{
var iconFile = 'http://www.daftlogic.com/images/gmmarkersv3/stripes.png';
var marker = new google.maps.Marker({position:location,map:map,icon:iconFile,title:number.toString(),draggable:true});

google.maps.event.addListener(marker, 'dragend', function(event)
{
routePoints[number-1]=event.latLng;
//remove polyline
routePath.setMap(null);
//add new polyline
routePath=getRoutePath();
routePath.setMap(map);
});

google.maps.event.addListener(marker, 'click', function(event)
{
if (mode==2)
{
messagediv.innerHTML="Splitting";
splitpoint2=event.latLng;
SplitRoute(splitpoint1,splitpoint2);
mode=0;

}
if (mode==1)
{
messagediv.innerHTML="Click on the second marker";
mode=2;
splitpoint1=event.latLng;
}
});

return marker;
}

function getRoutePath()
{
var routePath = new google.maps.Polyline({
path: routePoints,
strokeColor: lineColor,
strokeOpacity: 1.0,
strokeWeight: lineWidth,
geodesic: true
});
return routePath;
}

function SplitRoute(pnt1,pnt2)
{
var midpoint=geo.math.midpoint(pnt1,pnt2);
var midpoint = new google.maps.LatLng(midpoint.lat(),midpoint.lng());
var tmppoints=[];
var insertpoint=getlowestbetween(getindexofpoint(pnt1),getindexofpoint(pnt2));

for(var i=0;i<routePoints.length;++i)
{
tmppoints.push(routePoints[i]);
if (i==insertpoint)
{
tmppoints.push(midpoint);
}
}

routePoints=tmppoints;
redisply();
messagediv.innerHTML="Split Complete";
}

function redisply()
{
if (routeMarkers)
{
for (i in routeMarkers)
{
routeMarkers[i].setMap(null);
}
}
routeMarkers=new Array(0);
//remove polyline
if (!(routePath==undefined))
{
routePath.setMap(null);
}

routePath=getRoutePath();
routePath.setMap(map);

if (routePoints)
{
var count=1;
for (i in routePoints)
{
var marker=placeMarker(routePoints[i],count);
routeMarkers.push(marker);
count++;
}
}
}

function getlowestbetween(i1,i2)
{
if (i1>i2)
{
return (i2);
}
else
{
return (i1);
}
}

function getindexofpoint(point)
{
var index;
for(var i=0;i<routePoints.length;++i)
{
if ((routePoints[i].lat()==point.lat())&&(routePoints[i].lng()==point.lng()))
{
index=i;
}
}
return (index);
}

function CheckPointsForSplit(nopoints)
{
if (nopoints>1)
{
document.getElementById("btn_split").disabled=false;
}
else
{
document.getElementById("btn_split").disabled=true;
}
}

function MakeSplit()
{
messagediv.innerHTML="Click on the first marker";
mode=1;
}

function ClearMap()
{
if (routeMarkers)
{
for (i in routeMarkers)
{
routeMarkers[i].setMap(null);
}
}

//remove polyline
if (!(routePath==undefined))
{
routePath.setMap(null);
}

routePath=null;
routePoints=new Array(0);
routeMarkers=new Array(0);

CheckPointsForSplit(routePoints.length);
mode=0;
messagediv.innerHTML="Map Cleared";
}

Relevant Links

http://www.google.com/apis/maps/

Further Uses and Ideas

Version History

Previous Comments For This Page

No comments yet, be the first !

Add your own comment below and let others know what you think:

Comments :

Your Name (optional) :