I have requirement, I need to create draggable route and at some point I want to display coordinate on click over draggable route.
I am implementing functionality like this,
directionsDisplay.addListener('click', function(event) {
// Some opeation.
});
but click event does not work on draggable DirectionsRenderer.
I want to implement some operation on click event over map cursor showing in below picture.
Using code from directions-draggable, you can get the coordinate of the changed direction route as
Fiddle Demo
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
//console.log(myroute.legs[i])
console.log('Start Loc: ' + myroute.legs[i].start_location + 'Start Location: ' + myroute.legs[i].start_address);
console.log('End Loc:' + myroute.legs[i].end_location + 'End Location: ' + myroute.legs[i].end_address);
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}
Related
Is there any way to evade jquery and make notification be shown only one time per browser ?
For example, goes to website, notification pops up and that is it, next time when user comes to site from same browser notification wont be showen to him.
I would mainly try to evade adding jquery just for that, so if anyone knows a way to do this with materializecss or some plain html i would be thankful.
How do you trigger the notification?
You could do a basic localStorage check for example to "detect" if the notification has been displayed or not:
function foo() {
const hasSeenNotification = window.localStorage.getItem('shown');
if (!hasSeenNotification) {
window.localStorage.setItem('shown', true);
// show notification here
// ...
}
}
You need to add cookies.
And then check is it is exists:
if (GetCookieShowMessageDocument('ShowPoPUP'))
{
...
}
Here is a sample:
function GetCookieShowMessageDocument(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function SetCookieShowMessageDocument(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + escape(value) + expires + "; path=/";
}
I am using com.esri.ags.components.directions on esri map and I added the stops by coordinates.
So how can I assign a name to the stop so it will be showing on screen and when printing instead of coordinates?
This is the code I added the stops into
var stop:DirectionsStop = mainUIComponent.myDirections.stopProvider[0];
stop.editable = false;
stop.searchTerm = UserSession.getCurrentUserDTO().dealerCoordinatesDTO.AddressLongitude + ","
+ UserSession.getCurrentUserDTO().dealerCoordinatesDTO.AddressLatitude;
var stopCount:int=1;
for( var i:int=0; i < customersToVisitsList.length; i++)
{
var point:DealerQuestMapPoint=new DealerQuestMapPoint(
customersToVisitsList[i].addressLongitude,customersToVisitsList[i].addressLatitude);
point.pointType="CUSTOMER";
point.targetObject=customersToVisitsList[i];
point.address = customersToVisitsList[i].address;
var imageTooltip:String//="Test";
customersToVisitsList[i].customerName.toString()
+"\n"+customersToVisitsList[i].address.toString()
+", "+customersToVisitsList[i].city.toString()
+"\n"+customersToVisitsList[i].state.toString()
+", "+customersToVisitsList[i].zip.toString();
renderMapPoint(mainUIComponent.customersLayer,
point,
customersToVisitsList[i].customer_id,
imageTooltip,
customersToVisitsList[i],
mainUIComponent.blueSymbol);
if(i==0)
{
var stop1:DirectionsStop = mainUIComponent.myDirections.stopProvider[1];
stop1.editable = true;
stop1.searchTerm = point.lon.toString() + "," + point.lat.toString();
stop1.name = customersToVisitsList[i].customerName.toString();
}
else
{
stopCount+=1;
var st:DirectionsStop = new DirectionsStop();
st.editable = true;
st.searchTerm = point.lon.toString() + "," + point.lat.toString();
st.name = customersToVisitsList[i].customerName.toString();
mainUIComponent.myDirections.stopProvider.addItem(st);
}
}
mainUIComponent.myDirections.getDirections();
I checked the documentation and I found nothing to do this because usually they deal with address but dealing with coordinates makes it a must to rename it to another name.
Screenshot of the map with coordinates written
I am trying to do room highlighting in forge viewer.
In revit I have created lines that represent the borders of a room. After conversion to svf I know the dbids of those lines. Now I want to know the start and stop points (vertices) of those lines so that I can create a Three.Shape() of the room borders.
[EDIT] I get the fragId from dbId
function getFragIdFromDbId(viewer, dbid){
var returnValue;
var it = viewer.model.getData().instanceTree;
it.enumNodeFragments(dbid, function(fragId) {
console.log("dbId: " + dbid + " FragId : " + fragId);
returnValue = fragId;
}, false);
return returnValue;
}
Question:
Once I know the fragId is there a way to see its start and stop points(vertices)? Also will those vertices be world space or local space?
This is what I ended up doing. Note make sure the model is finished loading before calling instanceTree. Also in my case the dbid and fragid where one to one, not sure if this will always be the case in the instance tree.
function getFragIdFromDbId(viewer, dbid) {
var returnValue;
var it = viewer.model.getData().instanceTree;
it.enumNodeFragments(dbid, function (fragId) {
console.log("dbId: " + dbid + " FragId : " + fragId);
returnValue = fragId;
}, false);
return returnValue;
}
...
// only need the start vertex
var floatArray = [];
for (var i = 0; i < dbidArray.length; i++) {
var fragId = getFragIdFromDbId(viewer, dbidArray[i]);
var mesh = viewer.impl.getRenderProxy(viewer.model, fragId);
var matrixWorld = mesh.matrixWorld;
var lmvBufferGeometry = mesh.geometry;
var lmvFloatArray = lmvBufferGeometry.vb; //this will have an array of 6 values 0,1,2 are start vertext , 3,4,5 are end vertex
floatArray.push(lmvFloatArray[0]);
floatArray.push(lmvFloatArray[1]);
floatArray.push(lmvFloatArray[2]);
}
//use matrixWorld to convert array to worldSpace
I have done quite a few searches here and there. None of them give satisfactory answer, all we know is Google Maps API v3 has a limitation, that if the panTo target is more than 1 window height/width of the current center, it will not be smooth.
Still, I want to achieve "somewhat" smoother, not just "jumping" to the target.
Here is my solution (not perfect but I think it's better than jumping):
Calculate distance between current and target locations
Divide into several sections, each section is a little less than one window
panTo each section to achieve "sectional" smooth animation.
It's fine to find out each section target by the following algorithm:
Current is c(x,y)
Target is t(x,y)
Section count is s
Each section is c(x) + (t(x) - c(x)) / s , c(y) + (t(y) - c(y)) / s
Here is the problem: how to calculate the section count?
It should be based on the current zoom level and window size, right?
Ok, I finally come up with some like this and it works (but did not consider the zoom level)
var distance = Math.sqrt(Math.abs(Math.pow(lastLocation.lat() - status.Lat, 2)) + Math.abs(Math.pow(lastLocation.lng() - status.Lng, 2)));
//console.info('last:' + lastLocation.lat() + ',' + lastLocation.lng());
//console.info('new:' + status.Lat + ',' + status.Lng);
//console.info('distance:' + distance);
var smoothFactor = 8.0 / 1440; //hard code for screen size without considering zoom as well...
var factor = $(window).width() * smoothFactor;
smoothPanSections = [];
var sectionCount = Math.ceil(distance / factor);
var sectionLat = (status.Lat - lastLocation.lat()) / sectionCount;
var sectionLng = (status.Lng - lastLocation.lng()) / sectionCount;
for (var i = 1; i <= sectionCount; i++) {
if (i < sectionCount) {
smoothPanSections.push({ Lat: lastLocation.lat() + sectionLat * i, Lng: lastLocation.lng() + sectionLng * i });
}
else
smoothPanSections.push({ Lat: status.Lat, Lng: status.Lng });
}
panStatus();
And the panStatus is:
function panStatus() {
if (smoothPanSections.length > 0) {
var target = smoothPanSections.shift();
//still have more sections
if (smoothPanSections.length > 0) {
google.maps.event.addListenerOnce(map, 'idle', function () {
window.setTimeout(function () {
panStatus();
}, 100);
});
}
var location = new google.maps.LatLng(target.Lat, target.Lng);
map.panTo(location, zoomSize);
}
}
The title kinda says it all, i have a google maps api v3 and everything works fine except for one annoying new feature which i cant seem to fix.
You can show and hide markers by a click of a button which calls togglePOI(), but when i drag a marker and click hide and show again. All the markers appear except for the ones i have been dragging around. So the dragging seems to throw things into chaos. I’ve been have headaches over this one so any help would be greatly appreciated.
I cannot paste all the code in here, but if you want to see some other aspect that you think is causing this just ask and ill put it in.
var latlngs = new google.maps.MVCArray();
Map init etc
Marker creation
google.maps.event.addListener(locationMarker, "drag", function()
{
var index = findMarkerIndex(locationMarker, 1);
if (index >= 0)
{
var nLatLng = locationMarker.getPosition();
latlngs.setAt(index, nLatLng);
var nLat = nLatLng.lat();
var nLng = nLatLng.lng();
var modifiedLocation = {
Latitude: nLat,
Longitude: nLng
};
//SEND OUTPUT TO SELECT BOX
locations[index] = modifiedLocation;
document.getElementById('locations').options[index] = new Option('Num: ' + index + ' Pois: ' + nLat + ' - ' + nLng, data[4] + ',' + nLat + ',' + nLng + ',' + data[5]);
}
});
//FUNCTION CALLED FROM HTML BUTTON
function togglePOI()
{
if(togglePOIBool)
{
for(var i=0;i<markers.length;i++)
{
if (markers[i].category == 1) //ONLY HIDE CAT 1
markers[i].setMap(null);
}
togglePOIBool = false;
$("#togglePOIButton").val('Aan');
}
else
{
for(var i=0;i<markers.length;i++)
{
if (markers[i].category == 1)//ONLY SHOW CAT 1
markers[i].setMap(map);
}
togglePOIBool = true;
$("#togglePOIButton").val('Uit');
}
}
// Returns the index of the marker in the polyline.
function findMarkerIndex(locationMarker, option)
{
var index = -1;
for (var i = 0; i < markers.length; ++i)
{
if (markers[i] == locationMarker)
{
index = i;
break;
}
}
return index;
}
If it's OK for your application, replace setMap's with setVisible(true/false). When I tried this, it solves your problem.
http://jsfiddle.net/F3XbV/
You are not saving that position into markers array, I think it could solve the problem, insert this inside drag event:
markers[index].setPosition(locationMarker.getPosition());