How to add POI with Wikitude? - wikitude

I'm new for developer AR With POI
I'm using wikitude for developer AR.I do follow from HERE
This code in js file:
var World = {
loaded: false,
init: function initFn() {
AR.context.onLocationChanged = World.onLocationChanged;
},
onLocationChanged: function onLocationChangedFn(latitude, longitude, altitude, accuracy) {
AR.context.onLocationChanged = null;
World.createMarkerAtLocation(latitude + 0.01, longitude - 0.0005, altitude - 0.06);
},
createMarkerAtLocation: function createMarkerAtLocationFn(latitude, longitude, altitude) {
var markerLocation = new AR.GeoLocation(latitude, longitude, altitude);
var markerDrawable = new AR.ImageDrawable(World.markerDrawable, 3);
var markerObject = new AR.GeoObject(markerLocation, {
drawables: {
cam: markerDrawable
}
});
},
worldLoaded: function worldLoadedFn() {
document.body.removeChild(document.getElementById('loadingMessage'));
}
};
World.init();
And I Run in my android.But my app is not show POIs.
My Question
1. How do I did for POI show in my apps
Excuse me!.I'm not good English

Make sure that your device is getting an location. To see if it gets a location you can add the following lines inside the "function onLocationChangedFn"
alert('Location received');
This should pop up a message once a location has been received.

Related

MapQuest/Leaflet - How to trace routes between marquers with gps coordinates?

I have managed to integrate mapquest within my leaflet maps which was initially showing markers on the map. Below is an example with markers showing photographs taking during a trip in Namibia.
https://www.paulgodard.com/map?c=2108_DesolationValley&p=travel&m=images
Terms
Blog
Routes between marquers with gps coordinates
1 post / 0 new
Quick reply
Thu, 08/19/2021 - 06:10
#1
Paul Godard
Routes between marquers with gps coordinates
I have managed to integrate mapquest within my leaflet maps which was initially showing markers on the map. Below is an example with markers showing photographs taking during a trip in Namibia.
https://www.paulgodard.com/map?c=2108_DesolationValley&p=travel&m=images
I already have an array of locations and I would like to display the routes in between each marker. What is the best way to do this?
window.mapData = #json($mapData);
window.onload = function() {
L.mapquest.key = 'mykey';
var map = L.mapquest.map('mapOSM', {
center: [0,0],
layers: L.mapquest.tileLayer('map'),
zoom: 10
});
map.addControl(L.mapquest.control());
var mainIcon = L.Icon.extend({ options: {
iconSize: [24,24],
iconAnchor: [12,24], // half of x | full y
popupAnchor: [0,-12] // x = 0 | - half y
}});
var oms = new OverlappingMarkerSpiderfier(map);
var bounds = new L.LatLngBounds();
for (var i = 0; i < window.mapData.length; i ++) {
var datum = window.mapData[i];
var loc = new L.LatLng(datum.lat, datum.lon);
bounds.extend(loc);
var mapIconURL = '/public/assets/icons/' + datum.icon;
mapIconURL = mapIconURL.replace(/\s+/g,'');
var marker = new L.Marker(loc, { icon: new mainIcon({iconUrl: mapIconURL}) });
marker.desc = datum.popup; //JSON.parse(datum.popup);
//if ($i=0) { alert(datum.popup); }
map.addLayer(marker);
oms.addMarker(marker);
}
if (window.mapData.length > 0) {
map.fitBounds(bounds);
} else {
map.center(window.mapData[0].lat,window.mapData[0].lon);
map.zoom(1);
}
var popup = new L.Popup({closeButton: false, offset: new L.Point(0.5, -24)});
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
oms.addListener('spiderfy', function(markers) { map.closePopup(); });
oms.addListener('unspiderfy', function(markers) { });
}
You can start with the Leaflet Routing Plugin here: https://developer.mapquest.com/documentation/leaflet-plugins/routing/
Routing in Namibia might get iffy though.

Dynamically add data, remove markers outside of bounds, add markers inside of bounds

I've been struggling with this feature for weeks, but am starting to think it's not possible. Hopefully someone here can prove me wrong! :)
Using Mapbox GL. On page load, map renders with markers within the given bounds. I'm trying to mimic functionality where the user drags the map, and based on the new bounds, new markers are drawn and old ones are removed. Data for the new markers are dynamic based on an API request. I managed to find a function after much Googling to test if a point is in bounds of a map and that works, but given how the function works to add/remove the marker, dynamic data doesn't seem to fit in.
I've created a fiddle here and hard-coded a new "feature" but it's not getting drawn. There is most likely a second part of this issue, but maybe i can figure it out on my own once this is deemed feasible
Any advice would be greatly appreciated. Thanks in advance!
geojson.features.forEach(function (marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function () {
window.alert(marker.properties.message);
});
// add marker to map
var point = new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates);
map.on("dragend", function() {
if ( inBounds(marker.geometry.coordinates, map.getBounds()) == false ) {
point.remove();
} else {
geojson.features.push({
"type": "Feature",
"properties": {
"message": "Lurman",
"iconSize": [20, 20]
},
"geometry": {
"type": "Point",
"coordinates": [
-59.29223632812499,
-17.28151823530889
]
}
})
point.addTo(map);
}
})
});
function inBounds(point, bounds) {
var lng = (point[0] - bounds._ne.lng) * (point[0] - bounds._sw.lng) < 0;
var lat = (point[1] - bounds._ne.lat) * (point[1] - bounds._sw.lat) < 0;
return lng && lat;
}
I was able to resolve this by using layers and updating it on dragend.

leaflet routing.control update when marker is moved

I am using leaflet and routing.control to show a route. I have it working fine, but I would like one of the markers to move with the users location using watch.position. But for now I a just trying to move the marker when I click a button. Again this works fine but when the marker moves I would like the route to update automatically. Its possible if you drag the marker so surely its possible when marker is moved in a different way? I can it if I remove the control and add a new one but this flickers too much. Any advice?
The code for the routing.control is
myroute = L.Routing.control({
waypoints: [
L.latLng(window.my_lat, window.my_lng),
L.latLng(window.job_p_lat, window.job_p_lng)
],show: true, units: 'imperial',
router: L.Routing.mapbox('API KEY HERE'),
createMarker: function(i, wp, nWps) {
if (i === 0 || i === nWps + 1) {
return mymarker = L.marker(wp.latLng, {
icon: redIcon
});
} else {
return job_start = L.marker(wp.latLng, {
icon: greenIcon
});
}
}
}).addTo(map);
and the code for moving the marker is
function movemarker() {
var lat = "52.410490";
var lng = "-1.575950";
var newLatLng = new L.LatLng(lat, lng);
mymarker.setLatLng(newLatLng);
// I assume I call something here?
}
Sorted, I did it with this, which removes first point and replaces it with new data
myroutewithout.spliceWaypoints(0, 1, newLatLng);

When I start the App with GPS off , and later GPS is activated, Location is not detected

I am having problems with GPS detection over Google Maps in Ionic App. When I start the App with GPS off and later I change from Settings device to GPS on, clicking by Find Me button - centerOnMe() function - the GPS is not working. The function responses always
`Error: GPS Timeout! ERROR = 3`
At the beginning I thought that was a cache problem but I have found out that is not that. It doesn´t matter the using $state.reload from the view. ¿does anyone get the same issue? Thanks for the support. I attach the function below:
$scope.centerOnMe = function() {
$ionicPlatform.ready(function() {
console.log('Click on Find Me');
if(!map) {
return;
}
$ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
//$state.reload('app.map');
watchPositionId = navigator.geolocation.watchPosition(function(position) {
navigator.geolocation.clearWatch(watchPositionId);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$scope.latitude = latitude;
$scope.longitude = longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
map.setCenter(geolocpoint);
});
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude
var long = position.coords.longitude
$scope.center = new google.maps.LatLng(lat, long);
$ionicLoading.hide();
console.log("GPS is enabled" + $scope.center);
}, function(err) {
// error
if (err.code == 1) { console.log('GPS disabled! ERROR = ' + err.code); }
else if(err.code == 2) { console.log('GPS is unavailable! ERROR = ' + err.code); }
else if(err.code == 3) { console.log('Error: GPS Timeout! ERROR = ' + err.code); }
$ionicLoading.hide();
}, {
enableHighAccuracy: true, timeout: 20000
}
);
});
};
You better to use this plugin,
cordova plugin add cordova.plugins.diagnostic
It will directly check whether gps is enabled or not.
Fore more details check following ionic forum issues,
Geo location timeout vs location permission error
Get Current Position not working after turning the GPS off on the device even if it turned on again?
Hopes this will help you !!

Get all directions using Bing Map SDK in UWP

Is it possible to get all driving directions with a specified FROM and TO location in UWP using Bing Map SDK? (just like windows 10 map app)
Yes:
Get a driving or walking route and directions by calling the methods of the MapRouteFinder class - for example, GetDrivingRouteAsync or GetWalkingRouteAsync. The MapRouteFinderResult object contains a MapRoute object that you access through its Route property.
When you request a route, you can specify the following things:
•You can provide a start point and end point only, or you can provide a series of waypoints to compute the route.
•You can specify optimizations - for example, minimize the distance.
•You can specify restrictions - for example, avoid highways.
You can use sample code like this one:
private async void GetRouteAndDirections()
{
// Start at Microsoft in Redmond, Washington.
BasicGeoposition startLocation = new BasicGeoposition();
startLocation.Latitude = 47.643;
startLocation.Longitude = -122.131;
Geopoint startPoint = new Geopoint(startLocation);
// End at the city of Seattle, Washington.
BasicGeoposition endLocation = new BasicGeoposition();
endLocation.Latitude = 47.604;
endLocation.Longitude = -122.329;
Geopoint endPoint = new Geopoint(endLocation);
// Get the route between the points.
MapRouteFinderResult routeResult =
await MapRouteFinder.GetDrivingRouteAsync(
startPoint,
endPoint,
MapRouteOptimization.Time,
MapRouteRestrictions.None);
if (routeResult.Status == MapRouteFinderStatus.Success)
{
// Display summary info about the route.
tbOutputText.Inlines.Add(new Run()
{
Text = "Total estimated time (minutes) = "
+ routeResult.Route.EstimatedDuration.TotalMinutes.ToString()
});
tbOutputText.Inlines.Add(new LineBreak());
tbOutputText.Inlines.Add(new Run()
{
Text = "Total length (kilometers) = "
+ (routeResult.Route.LengthInMeters / 1000).ToString()
});
tbOutputText.Inlines.Add(new LineBreak());
tbOutputText.Inlines.Add(new LineBreak());
// Display the directions.
tbOutputText.Inlines.Add(new Run()
{
Text = "DIRECTIONS"
});
tbOutputText.Inlines.Add(new LineBreak());
foreach (MapRouteLeg leg in routeResult.Route.Legs)
{
foreach (MapRouteManeuver maneuver in leg.Maneuvers)
{
tbOutputText.Inlines.Add(new Run()
{
Text = maneuver.InstructionText
});
tbOutputText.Inlines.Add(new LineBreak());
}
}
}
else
{
tbOutputText.Text =
"A problem occurred: " + routeResult.Status.ToString();
}
}
More info here : https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn631250.aspx#getting_a_route_and_directions