Drive Distance Polygons

1. Drive distance polygon creation

Drive time polygons, provide a dynamic method for generating polygons for drive time or distance. These polygons can be utilized to constrain and filter locations within the map view.

Distance:

Distance can be entered as a single or multiple comma seperated values. When using a value like 5,10,15, the drive polygon service will create 3 rings around the same origin.

Start Location:

The origin of the polygon is a determined centerpoint. End users can use the browser/ device current location (used in mobile), selecting a point on the map, or clicking on any blank point in the map.

Measure

Miles, Kilometers, Meters, Minutes.

While distance is a specific measure that uses road networks to determine distance, time is an an approximation based on assumptions for drive conditions and speed.

Show Points INSIDE 

Checking either of these options will automatically suppress locations that exist inside or outside of bounds. This allows for runtime analysis of locations inside and outside of drive distance bounds.

API Details

Card Markup and CSS

(function(){

 createNamespaceUnderCentigon("ui.DriveDistancePolygonsCard");

 centigon.ui.DriveDistancePolygonsCard = function(){
 
 centigon.ui.Card.call(this);
 
 this._drivePolyLayerIx = -1;
 this._startLocMode = "device";//device || clickmap || clickmarker
 this._filterMode = "none";//inside || outside || none
 this._unitOfMeasure = "mi";
 this._lastClickedMapLatLng = "";
 
 
 this.contentUrl = this.getCardAssetUrl() + "DriveDistancePolygonsCardMarkup.txt";
 this.controlIdToRandomId = {
 txtDriveTimePolygonDistance: this._domUtil.getRandomDivId(),
 btnGetDrivePolygons: this._domUtil.getRandomDivId(),
 btnClearDrivePolygons: this._domUtil.getRandomDivId(),
 btnOriginCurrentlocation: this._domUtil.getRandomDivId(),
 btnOriginClickonmap: this._domUtil.getRandomDivId(),
 btnOriginlickonmarker: this._domUtil.getRandomDivId(),
 btnDistMeasureMi: this._domUtil.getRandomDivId(),
 btnDistMeasureKm: this._domUtil.getRandomDivId(),
 btnDistMeasureMeters: this._domUtil.getRandomDivId(),
 btnDistMeasureClickMinutes: this._domUtil.getRandomDivId(),
 btnFilterPtsNone: this._domUtil.getRandomDivId(),
 btnFilterPtsInsideBnds: this._domUtil.getRandomDivId(),
 btnFilterPtsOutideBnds: this._domUtil.getRandomDivId(),
 drivePolygonsLoadingMsg: this._domUtil.getRandomDivId()
 };
 }
 
 centigon.ui.DriveDistancePolygonsCard.constructor = centigon.ui.Card;
 centigon.ui.DriveDistancePolygonsCard.prototype = new centigon.ui.Card();
 
 centigon.ui.DriveDistancePolygonsCard.prototype.getHtml = function(gotHtml){
 
 this.getRemoteContent({url: this.contentUrl, success: gotHtml});
 }
 
 centigon.ui.DriveDistancePolygonsCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 var strtLocBtnOpts = [ {id: this.controlIdToRandomId["btnOriginCurrentlocation"]},
 {id: this.controlIdToRandomId["btnOriginClickonmap"]},
 {id: this.controlIdToRandomId["btnOriginlickonmarker"]}];
 
 var toggleListStartLoc = new centigon.ui.ToggleListMenu(strtLocBtnOpts);
 toggleListStartLoc.change = function(domElem){
 
 that._startLocMode = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "startloc");
 }
 
 var measBtnOpts = [{id: this.controlIdToRandomId["btnDistMeasureMi"]},
 {id: this.controlIdToRandomId["btnDistMeasureKm"]},
 {id: this.controlIdToRandomId["btnDistMeasureMeters"]},
 {id: this.controlIdToRandomId["btnDistMeasureClickMinutes"]}];
 
 var toggleListMeas = new centigon.ui.ToggleListMenu(measBtnOpts);
 toggleListMeas.change = function(domElem){
 
 that._unitOfMeasure = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "unitofmeasure");
 }
 
 var fltrModeBtnOpts = [{id: this.controlIdToRandomId["btnFilterPtsNone"]},
 {id: this.controlIdToRandomId["btnFilterPtsInsideBnds"]},
 {id: this.controlIdToRandomId["btnFilterPtsOutideBnds"]}];
 
 var toggleListFilter = new centigon.ui.ToggleListMenu(fltrModeBtnOpts);
 toggleListFilter.change = function(domElem){
 
 that._filterMode = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "pointsfiltermode"); 
 }
 
 this.domObjByRandField("btnGetDrivePolygons").click(function(){
 that.toggleDrivetimePolygonsLayer(true);
 });
 
 this.domObjByRandField("btnClearDrivePolygons").click(function(){
 that.toggleDrivetimePolygonsLayer(false);
 });
 
 this.cMap.addMapClickListener(function(location){
 
 that._lastClickedMapLatLng = location.toCsvLatLon();
 });
 }
 
 centigon.ui.DriveDistancePolygonsCard.prototype.toggleDrivetimePolygonsLayer = function(visible){
 
 this.domObjByRandField("drivePolygonsLoadingMsg").hide();
 
 if(visible){
 
 this.domObjByRandField("drivePolygonsLoadingMsg").show();
 
 if(this._drivePolyLayerIx === -1){
 this._drivePolyLayerIx = this.cMap.getLayers().getLength();
 }
 
 var trvlOpt = new centigon.mapping.TravelOptions();
 trvlOpt.useCurrentLocationAsStartPoint = (this._startPoint === "device") ? true : false;
 
 if(this._filterMode === "inside" || this._filterMode === "outside"){
 
 var lyrs = this._utilFactory.getCollectionIterator(this.cMap.getAllMarkerLayers());
 var bndgIds = "";
 while(lyrs.hasNext()){
 bndgIds += lyrs.next().positionInMapDataProvider;
 if(lyrs.hasNext()){
 bndgIds += ",";
 }
 }
 
 trvlOpt.markerLayerBindings = [bndgIds];
 }
 
 trvlOpt.distanceMeasure = this._unitOfMeasure;
 
 var travelOptions = this.cMap.travelOptions();
 var overlayTypes = this.cMap.overlayTypes();
 var names = this.cMap.layerNames();
 var locs = this.cMap.locations();
 var lbls = this.cMap.labels();
 var vals = this.cMap.values();
 
 overlayTypes[this._drivePolyLayerIx] = centigon.mapping.Layer.TYPE.DRIVE_TIME_POLYGON;
 names[this._drivePolyLayerIx] = "Drivetime Polygon";
 
 if(this._startLocMode === "device"){
 
 locs[this._drivePolyLayerIx] = [this.cMap.currentLocation()];
 }
 else if(this._startLocMode === "clickmarker"){
 
 locs[this._drivePolyLayerIx] = [this.layer.getSelectedLocation().toCsvLatLon()];
 }
 else if(this._startLocMode === "clickmap"){
 
 locs[this._drivePolyLayerIx] = [this._lastClickedMapLatLng];
 }
 
 if(!locs[this._drivePolyLayerIx]){
 
 alert("Please select a valid starting location");
 return;
 }
 
 lbls[this._drivePolyLayerIx] = ["My Drive Distance Polygon"];
 travelOptions[this._drivePolyLayerIx] = trvlOpt;
 
 var driveDists = [];
 var ctrlVals = this.domObjByRandField("txtDriveTimePolygonDistance").val().split(",");
 for(var d=0;d<ctrlVals.length;d++){
 driveDists.push(parseInt(ctrlVals[d]));
 }
 
 vals[this._drivePolyLayerIx] = driveDists;
 
 this.cMap.overlayTypes(overlayTypes).layerNames(names).labels(lbls).values(vals).locations(locs).travelOptions(travelOptions);
 
 var that = this;
 var numZoomTries = 0;
 var maxNumZoomTries = 50;
 var tryZoomToLyr = function(){
 
 numZoomTries++;
 if(numZoomTries === maxNumZoomTries){
 clearInterval(zmIntrvl);
 that.domObjByRandField("drivePolygonsLoadingMsg").hide();
 }
 
 var locsForDynZoom = [];
 var lyr = that.cMap.getLayerAt(that._drivePolyLayerIx);
 var bnds;
 if(lyr){
 bnds = that.cMap.getShapeLayerBounds(lyr);
 if(bnds && bnds.length > 0){
 locsForDynZoom = bnds;
 that.cMap.setMapViewportBasedOnLocations(locsForDynZoom);
 clearInterval(zmIntrvl);
 that.domObjByRandField("drivePolygonsLoadingMsg").hide();
 }
 }
 }
 var zmIntrvl = setInterval(tryZoomToLyr, 200);
 }
 else{
 if(this._drivePolyLayerIx > -1){
 this.cMap.removeLayer(this._drivePolyLayerIx);
 }
 } 
 }

})()

JavaScript

(function(){

 createNamespaceUnderCentigon("ui.DriveDistancePolygonsCard");

 centigon.ui.DriveDistancePolygonsCard = function(){
 
 centigon.ui.Card.call(this);
 
 this._drivePolyLayerIx = -1;
 this._startLocMode = "device";//device || clickmap || clickmarker
 this._filterMode = "none";//inside || outside || none
 this._unitOfMeasure = "mi";
 this._lastClickedMapLatLng = "";
 
 
 this.contentUrl = this.getCardAssetUrl() + "DriveDistancePolygonsCardMarkup.txt";
 this.controlIdToRandomId = {
 txtDriveTimePolygonDistance: this._domUtil.getRandomDivId(),
 btnGetDrivePolygons: this._domUtil.getRandomDivId(),
 btnClearDrivePolygons: this._domUtil.getRandomDivId(),
 btnOriginCurrentlocation: this._domUtil.getRandomDivId(),
 btnOriginClickonmap: this._domUtil.getRandomDivId(),
 btnOriginlickonmarker: this._domUtil.getRandomDivId(),
 btnDistMeasureMi: this._domUtil.getRandomDivId(),
 btnDistMeasureKm: this._domUtil.getRandomDivId(),
 btnDistMeasureMeters: this._domUtil.getRandomDivId(),
 btnDistMeasureClickMinutes: this._domUtil.getRandomDivId(),
 btnFilterPtsNone: this._domUtil.getRandomDivId(),
 btnFilterPtsInsideBnds: this._domUtil.getRandomDivId(),
 btnFilterPtsOutideBnds: this._domUtil.getRandomDivId(),
 drivePolygonsLoadingMsg: this._domUtil.getRandomDivId()
 };
 }
 
 centigon.ui.DriveDistancePolygonsCard.constructor = centigon.ui.Card;
 centigon.ui.DriveDistancePolygonsCard.prototype = new centigon.ui.Card();
 
 centigon.ui.DriveDistancePolygonsCard.prototype.getHtml = function(gotHtml){
 
 this.getRemoteContent({url: this.contentUrl, success: gotHtml});
 }
 
 centigon.ui.DriveDistancePolygonsCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 var strtLocBtnOpts = [ {id: this.controlIdToRandomId["btnOriginCurrentlocation"]},
 {id: this.controlIdToRandomId["btnOriginClickonmap"]},
 {id: this.controlIdToRandomId["btnOriginlickonmarker"]}];
 
 var toggleListStartLoc = new centigon.ui.ToggleListMenu(strtLocBtnOpts);
 toggleListStartLoc.change = function(domElem){
 
 that._startLocMode = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "startloc");
 }
 
 var measBtnOpts = [{id: this.controlIdToRandomId["btnDistMeasureMi"]},
 {id: this.controlIdToRandomId["btnDistMeasureKm"]},
 {id: this.controlIdToRandomId["btnDistMeasureMeters"]},
 {id: this.controlIdToRandomId["btnDistMeasureClickMinutes"]}];
 
 var toggleListMeas = new centigon.ui.ToggleListMenu(measBtnOpts);
 toggleListMeas.change = function(domElem){
 
 that._unitOfMeasure = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "unitofmeasure");
 }
 
 var fltrModeBtnOpts = [{id: this.controlIdToRandomId["btnFilterPtsNone"]},
 {id: this.controlIdToRandomId["btnFilterPtsInsideBnds"]},
 {id: this.controlIdToRandomId["btnFilterPtsOutideBnds"]}];
 
 var toggleListFilter = new centigon.ui.ToggleListMenu(fltrModeBtnOpts);
 toggleListFilter.change = function(domElem){
 
 that._filterMode = that._domUtil.getDomObjectDataAttribute(domElem.parentElement, "pointsfiltermode"); 
 }
 
 this.domObjByRandField("btnGetDrivePolygons").click(function(){
 that.toggleDrivetimePolygonsLayer(true);
 });
 
 this.domObjByRandField("btnClearDrivePolygons").click(function(){
 that.toggleDrivetimePolygonsLayer(false);
 });
 
 this.cMap.addMapClickListener(function(location){
 
 that._lastClickedMapLatLng = location.toCsvLatLon();
 });
 }
 
 centigon.ui.DriveDistancePolygonsCard.prototype.toggleDrivetimePolygonsLayer = function(visible){
 
 this.domObjByRandField("drivePolygonsLoadingMsg").hide();
 
 if(visible){
 
 this.domObjByRandField("drivePolygonsLoadingMsg").show();
 
 if(this._drivePolyLayerIx === -1){
 this._drivePolyLayerIx = this.cMap.getLayers().getLength();
 }
 
 var trvlOpt = new centigon.mapping.TravelOptions();
 trvlOpt.useCurrentLocationAsStartPoint = (this._startPoint === "device") ? true : false;
 
 if(this._filterMode === "inside" || this._filterMode === "outside"){
 
 var lyrs = this._utilFactory.getCollectionIterator(this.cMap.getAllMarkerLayers());
 var bndgIds = "";
 while(lyrs.hasNext()){
 bndgIds += lyrs.next().positionInMapDataProvider;
 if(lyrs.hasNext()){
 bndgIds += ",";
 }
 }
 
 trvlOpt.markerLayerBindings = [bndgIds];
 }
 
 trvlOpt.distanceMeasure = this._unitOfMeasure;
 
 var travelOptions = this.cMap.travelOptions();
 var overlayTypes = this.cMap.overlayTypes();
 var names = this.cMap.layerNames();
 var locs = this.cMap.locations();
 var lbls = this.cMap.labels();
 var vals = this.cMap.values();
 
 overlayTypes[this._drivePolyLayerIx] = centigon.mapping.Layer.TYPE.DRIVE_TIME_POLYGON;
 names[this._drivePolyLayerIx] = "Drivetime Polygon";
 
 if(this._startLocMode === "device"){
 
 locs[this._drivePolyLayerIx] = [this.cMap.currentLocation()];
 }
 else if(this._startLocMode === "clickmarker"){
 
 locs[this._drivePolyLayerIx] = [this.layer.getSelectedLocation().toCsvLatLon()];
 }
 else if(this._startLocMode === "clickmap"){
 
 locs[this._drivePolyLayerIx] = [this._lastClickedMapLatLng];
 }
 
 if(!locs[this._drivePolyLayerIx]){
 
 alert("Please select a valid starting location");
 return;
 }
 
 lbls[this._drivePolyLayerIx] = ["My Drive Distance Polygon"];
 travelOptions[this._drivePolyLayerIx] = trvlOpt;
 
 var driveDists = [];
 var ctrlVals = this.domObjByRandField("txtDriveTimePolygonDistance").val().split(",");
 for(var d=0;d<ctrlVals.length;d++){
 driveDists.push(parseInt(ctrlVals[d]));
 }
 
 vals[this._drivePolyLayerIx] = driveDists;
 
 this.cMap.overlayTypes(overlayTypes).layerNames(names).labels(lbls).values(vals).locations(locs).travelOptions(travelOptions);
 
 var that = this;
 var numZoomTries = 0;
 var maxNumZoomTries = 50;
 var tryZoomToLyr = function(){
 
 numZoomTries++;
 if(numZoomTries === maxNumZoomTries){
 clearInterval(zmIntrvl);
 that.domObjByRandField("drivePolygonsLoadingMsg").hide();
 }
 
 var locsForDynZoom = [];
 var lyr = that.cMap.getLayerAt(that._drivePolyLayerIx);
 var bnds;
 if(lyr){
 bnds = that.cMap.getShapeLayerBounds(lyr);
 if(bnds && bnds.length > 0){
 locsForDynZoom = bnds;
 that.cMap.setMapViewportBasedOnLocations(locsForDynZoom);
 clearInterval(zmIntrvl);
 that.domObjByRandField("drivePolygonsLoadingMsg").hide();
 }
 }
 }
 var zmIntrvl = setInterval(tryZoomToLyr, 200);
 }
 else{
 if(this._drivePolyLayerIx > -1){
 this.cMap.removeLayer(this._drivePolyLayerIx);
 }
 } 
 }

})()