Map Box DropInUa Android hide silent waypoints - mapbox

i have a small problem with waypoints. I have an array of coordinates of 25 points on which I build a route. I need to make it so that only the start point and end point are visible on the map, and all intermediate points on the map are not visible.
During route generation, I specify silent waypoints using the waypointIndicesList(listOf(0, 24) parameter. Navigation considers the specified coordinate indices as silent points, but they are still visible on the route. Although when you specify silent points in the Map Box Navigation IOS, they become invisible on the map! How can they be hidden in the Android version?my route
this is my fun reguest Routes
> private fun requestRoutes(listOfPoint: ArrayList<Point>) {
MapboxNavigationApp.current()!!.requestRoutes(
RouteOptions
.builder()
.applyLanguageAndVoiceUnitOptions(view!!.context)
.applyDefaultNavigationOptions()
.alternatives(true)
.coordinatesList(listOfPoint)
.waypointIndicesList(listOf(0, 24))
.build(),
object : NavigationRouterCallback {
override fun onCanceled(routeOptions: RouteOptions, routerOrigin: RouterOrigin) {
// no Implement
}
override fun onFailure(reasons: List<RouterFailure>, routeOptions: RouteOptions) {
// no Implement
}
override fun onRoutesReady(
routes: List<NavigationRoute>,
routerOrigin: RouterOrigin
) {
navigationView.api.startRoutePreview(routes)
navigationView.api.routeReplayEnabled(true)
}
}
)
}
please help me solve the problem
I am using Drop-In UI Navigation SDK for Android version 2.8.0

Related

How to implement mapbox SDK v10 to android app written in Java?

I am trying to implement Mapbox SDK v10 in my android app that's completely written in Java.
I have been able to show the map and even the camera points to my current location but when I am trying to put a marker on the map I can't find the relevant codes in java because only kotlin codes are present
// Create an instance of the Annotation API and get the PointAnnotationManager. val annotationApi = mapView?.annotations val pointAnnotationManager = annotationApi?.createPointAnnotationManager(mapView) // Set options for the resulting symbol layer. val pointAnnotationOptions: PointAnnotationOptions = PointAnnotationOptions() // Define a geographic coordinate. .withPoint(Point.fromLngLat(18.06, 59.31)) // Specify the bitmap you assigned to the point annotation // The bitmap will be added to map style automatically. .withIconImage(YOUR_ICON_BITMAP) // Add the resulting pointAnnotation to the map. pointAnnotationManager?.create(pointAnnotationOptions)
So I have 2 questions-
1)How can I put an annotation or marker on the map using java?
2)On the other hand I have been able to use Mapbox SDK v9 successfully ,but it's marked as legacy so can I still use this SDK in my app or there can be some problem in the future if I use SDK v9?
These are the codes for adding a marker, polyline of polygon in mapbox10 java:
private void AddMarker(Point point)
{
AnnotationPlugin annotationApi = AnnotationPluginImplKt.getAnnotations(mapView);
CircleAnnotationManager circleAnnotationManager = CircleAnnotationManagerKt.createCircleAnnotationManager(annotationApi, new AnnotationConfig());
CircleAnnotationOptions circleAnnotationOptions = new CircleAnnotationOptions()
.withPoint(point)
.withCircleRadius(7.0)
.withCircleColor("#ee4e8b")
.withCircleStrokeWidth(1.0)
.withDraggable(true)
.withCircleStrokeColor("#ffffff");
circleAnnotationManager.create(circleAnnotationOptions);
}
private void DrawPolyLine() {
AnnotationPlugin annotationApi = AnnotationPluginImplKt.getAnnotations(mapView);
PolylineAnnotationManager polylineAnnotationManager = PolylineAnnotationManagerKt.createPolylineAnnotationManager(annotationApi,new AnnotationConfig());
PolylineAnnotationOptions polylineAnnotationOptions = new PolylineAnnotationOptions()
.withPoints(pointList)
.withLineColor("#ee4e8b")
.withLineWidth(4);
polylineAnnotationManager.create(polylineAnnotationOptions);
}
private void DrawPolygon(List<Point> myPointList) {
List<Point> pointList = myPointList;
pointList.add(myPointList.get(0));
List<List<Point>> polygonList = new ArrayList<>();
polygonList.add(pointList);
polygonAnnotationManager = PolygonAnnotationManagerKt.createPolygonAnnotationManager(annotationApi,new AnnotationConfig());
PolygonAnnotationOptions polygonAnnotationOptions = new PolygonAnnotationOptions()
.withPoints(polygonList)
.withFillColor("#ee4e8b")
.withFillOpacity(0.5);
PolygonAnnotation polygonAnnotation = polygonAnnotationManager.create(polygonAnnotationOptions);
}
remember for marker annotation we have to types: Point annotation and Circle annotation but their implementation of them are the same.

Polymer 1.0 / leaflet-map 1.0 Map not consistently returning to given point on button click

I am trying to implement a map using Polymer 1.0 and leaflet-map 1.0, which has a button that when clicked should pan the map to center on the current geolocation.
The map ('mymap') and 'geoButton' are elements on the same level in main index page. I have something that sort of works, but inconsistently.
The map is set up as so (for now the initial center is hard-coded):
<leaflet-map id="mymap" latitude="40.707149800" longitude="-74.002101900" zoom="14">
<leaflet-geolocation id="locator" enable-high-accuracy latitude="{{latitude}}" longitude="{{longitude}}" watch="true">
</leaflet-geolocation>
...
In the geoButton element, I assign the locator lat and long to the map lat and long when the button is clicked:
mymap.latitude = locator.latitude;
mymap.longitude = locator.longitude;
In leaflet-core.html (which has the properties and events carried over from Leaflet.js) both the latitude and longitude properties have an observer method '_viewChanged':
_viewChanged: function(newValue, oldValue) {
if (this.map) {
this.async(function() {
this.map.setView(L.latLng(this.latitude, this.longitude), this.zoom);
console.log("new lat? " +this.latitude );
console.log("new long? " +this.longitude );
});
}
}
The problem is that the map does not always reset to the new center. If I pan the map far away from the initial point then click the geoButton, it will re-center (a 'viewreset' event is called). Also, the map will reset to the correct center if I drag the map at all after clicking the geoButton.
If I remove the async function in the observer method, and call 'this.map.setView' directly, the map will actually re-center to the geolocated point correctly. But in this case, if I pan the map, it will 'bounce' back to the geolocated latitude (the longitude will remain wherever I pan the map). I think this is because '_viewChanged' is called twice, but the second time the latitude has not changed from the first call.
Can I perhaps force some kind of reset or refresh on the map in the observer method before call this.map/.setView (which is what seems to happen when I drag the map after calling that method)? Or, is there something else I am missing here?
After some more testing, I notice that if I comment out:
// mymap.latitude = locator.latitude;
then the map will zoom to the correct (geolocated) longitude, but will remain at whatever latitude the map was set to before the button click...the same is true if I comment out the longitude line instead; then the map pans to the correct (geolocated) latitude and to the current longitude.
In other words, I can correctly pass one updated property, but not two...both use the same observer method.
I found a solution. The key was to add a function to the leaflet-core element so that I could pass the new latitude and longitude at the same time, then call that method in the event handler for the button:
(in leaflet-core.html)
setToPoint: function(newLat, newLong){
if (this.map) {
this.async(function() {
this.map.setView(L.latLng(newLat, newLong), this.zoom, {pan: {animate: true}});
this.map.invalidateSize();
});
}
},
(in geobutton element - tap callback)
mymap.setToPoint(locator.latitude, locator.longitude);

Why doesn't marker.dragging.disable() work?

The following code receives an error on the lines for enabling and disabling the marker dragging ("Unable to get property 'disable' of undefined or null reference"). The markers show up on the map just fine and are draggable as the creation line indicates. Placing an alert in place of the enable line produces a proper object so I believe the marker is defined. Is there something I need to do to enable the IHandler interface? Or am I missing something else?
var marker = L.marker(L.latLng(lat,lon), {icon:myIcon, draggable:'true'})
.bindLabel(name, {noHide: true,direction: 'right'});
marker._myId = name;
if (mode === 0) {
marker.dragging.enable();
} else {
marker.dragging.disable();
}
I had a similar problem today (perhaps the same one) it was due to a bug in leaflet (see leaflet issue #2578) where changing the icon of a marker invalidates any drag handling set on that marker. This makes any calls to marker.dragging.disable() fail.
The fix hasn't made it into leaflets master at time of writing. A workaround is to change the icon after updating the draggable status if possible.
marker.dragging.disable();
marker.setIcon(marker_icon);
Use the following code to make an object draggable. Set elementToDrag to the object you wish to make draggable, which is in your case: "marker"
var draggable = new L.Draggable(elementToDrag);
draggable.enable();
To disable dragging, use the following code:
draggable.disable()
A class for making DOM elements draggable (including touch support).
Used internally for map and marker dragging. Only works for elements
that were positioned with DomUtil#setPosition
leaflet: Draggable
If you wish to only disable the drag option of a marker, then you can use the following code (where "marker" is the name of your marker object):
marker.dragging.disable();
marker.dragging.enable();
I haven't found an answer but my workaround was this:
var temp;
if (mode === 0) {
temp = true;
} else {
temp = false;
}
var marker = L.marker(L.latLng(lat,lon), {icon:myIcon, draggable:temp})
.bindLabel(name, {noHide: true,direction: 'right'});
marker._myId = name;
Fortunately I change my icon when it is draggable.

Setting min and max zoomLevels (GWT-OpenLayers)

I want to set a minimum and a maximum zoom level in my map.
My first idea was to listen to 'zoomstart' events, but the org.gwtopenmaps.openlayers.client.Map class doesn't implement any listener with such event type. Then I tried to listen to 'zoomend' events. My idea was to check the zoomlevel after the zoom event and if it is higher/lower than a threshold value than i zoom to that threshold value. Example code:
#Override
public void onMapZoom(MapZoomEvent eventObject) {
if (eventObject.getSource().getZoom() > 18) {
eventObject.getSource().zoomTo(18);
}
}
But i found, the zoomTo event doesn't fire in this case. Has anybody got a solution to this problem?
Great idea Imreking.
I have added this to the GWT-Openlayers library.
So if you download the latest version from github now you can do :
map.setMinMaxZoomLevel(6, 8);
And you no longer need some javascript method in your own code.
I actually also added a showcase but having difficulties uploading it to our website.
Uploading the new showcase has now succeeded.
See http://demo.gwt-openlayers.org/gwt_ol_showcase/GwtOpenLayersShowcase.html?example=Min%20max%20zoom%20example to see an example of newly added Map.setMinMaxZoomLevel(minZoom, maxZoom).
I don't think this is possible in OpenLayers (normal and GWT).
According to me two solutions are available.
Option 1
This is ugly for the user. As he sees the map getting zoomed, and just after this going back to the previous zoomlevel.
The Timer is needed to give OL the chance to animate the zoom.
map.addMapZoomListener(new MapZoomListener()
{
#Override
public void onMapZoom(final MapZoomEvent eventObject)
{
Timer t = new Timer()
{
#Override
public void run()
{
if (eventObject.getSource().getZoom() > 15)
{
map.zoomTo(15);
}
else if (eventObject.getSource().getZoom() < 10)
{
map.zoomTo(10);
}
}
};
t.schedule(500);
}
});
Option 2
Don't use the zoom default zoom control but create your own zoom buttons (using normal GWT), and putting these on top of the map. If you want you can style these buttons in the same way as the normal buttons. The trick 'create in normal GWT, and make it look like OL' is a trick I use a lot (for example to create a much more advanced layer switcher).
Note : I am one of the developers of GWT-OpenLayers, if you want I can add an example to our showcase displaying how to do 'Option 2'.
Knarf, thank you for your reply. I tried the 'Option 1' and it worked, but i found another solution which is maybe more acceptable for the users.
My solution is:
map.isValidZoomLevel = function(zoomLevel) {
return ((zoomLevel != null) &&
(zoomLevel >= minZoomLevel) &&
(zoomLevel <= maxZoomLevel) &&
(zoomLevel < this.getNumZoomLevels()));
}
I overrode the isValidZoomLevel method. The minZoomLevel and maxZoomLevel variables were set when the application started. I don't like calling javascript from GWT code, but here i didn't have any other opportunity.

How to prevent overlapping pushpins at the same geolocation with Bing Maps?

If you have 2 pushpins on 'London' at the same geolocation, is there anything in the API to move them apart so they are both visible?
I can only find documentation on their old map points API which had PreventIconCollisions, this is what I want but can't see any reference to this in the new API.
I am using the JavaScript API.
So if I understand correctly, you have similar information on the same location, it this correct?
In order to display both information, you will have two options:
Merge information in the textbox using an appropriate way to present the information inside this ui element (using your own tabbed infobox for example)
Decluster the point manually when you're at a certain level of zoom
There is no default property to set this and it would really messy to do this on many pushpins, but in the main idea, you would have to: detect viewchangeend event, if you're at a certain level of zoom (or higher zoom level) then you're declustering them (I call it decluter nearby pushpins).
// Bind pushpin mouseover.
Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
var currentPin = e.target;
currentPin.setOptions({ visible: false });
var currentLocation = currentPin.getLocation().clone();
var currentPoint = bmGlobals.geo.map.tryLocationToPixel(currentLocation);
if (currentPin.associatedCluster.length == 2) {
// Display the first pushpin
var pinA = createPin(currentPin.associatedCluster[0]);
var locA = bmGlobals.geo.map.tryPixelToLocation(new Microsoft.Maps.Point(currentPoint.x - pinA.getWidth(), currentPoint.y));
pinA.setLocation(locA);
bmGlobals.geo.layerClusteredPin.push(pinA);
// Display the second pushpin
var pinB = createPin(currentPin.associatedCluster[1]);
var locB = bmGlobals.geo.map.tryPixelToLocation(new Microsoft.Maps.Point(currentPoint.x + pinB.getWidth(), currentPoint.y));
pinB.setLocation(locB);
bmGlobals.geo.layerClusteredPin.push(pinB);
}
});
I will try to write a bing maps module about this, but in the fact, you'll have to get your clustered pushpins (or your own pushpin that has two associated data object) and then you will have to set their position based on the rendering on the client side.
I know this question is really old, but if someone is looking for something similar (clustering the pins) here is a good start: http://rtsinani.github.io/PinClusterer/