Add custom button on Mapbox's navigation view
I am using Mapbox to allow users to navigate between locations. I am using basic navigation feature as stated in the documentation (https://www.mapbox.com/ios-sdk/navigation/examples/basic/). This gives me the navigation view as below.
I would like to add a custom button at the bottom of the view. For this, I tried the following code.
Directions.shared.calculate(options) { (waypoints, routes, error) in
guard let route = routes?.first else {
self.showAlertMessage("No possible routes detected")
return
}
self.mapNavigationViewController = NavigationViewController(for: route)
self.mapNavigationViewController.delegate = self
self.present(self.mapNavigationViewController, animated: true, completion: {
let customButton = UIButton()
customButton.setTitle("Press", for: .normal)
customButton.translatesAutoresizingMaskIntoConstraints = false
customButton.backgroundColor = .blue
customButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
self.mapNavigationViewController.view.addSubview(customButton)
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
customButton.leftAnchor.constraint(equalTo: self.mapNavigationViewController.view.leftAnchor, constant: 0).isActive = true
customButton.rightAnchor.constraint(equalTo: self.mapNavigationViewController.view.rightAnchor, constant: 0).isActive = true
self.mapNavigationViewController.view.setNeedsLayout()
})
}
With this, I got the button as below.
Now, the next thing to be done is to shift the mapbox's view so that its bottom aligns with the custom button's top. How can I achieve this?
ios swift autolayout mapbox nslayoutconstraint
asked Nov 23 at 6:35
Sujal
457413
add a comment |
I am using Mapbox to allow users to navigate between locations. I am using basic navigation feature as stated in the documentation (https://www.mapbox.com/ios-sdk/navigation/examples/basic/). This gives me the navigation view as below.
I would like to add a custom button at the bottom of the view. For this, I tried the following code.
Directions.shared.calculate(options) { (waypoints, routes, error) in
guard let route = routes?.first else {
self.showAlertMessage("No possible routes detected")
return
}
self.mapNavigationViewController = NavigationViewController(for: route)
self.mapNavigationViewController.delegate = self
self.present(self.mapNavigationViewController, animated: true, completion: {
let customButton = UIButton()
customButton.setTitle("Press", for: .normal)
customButton.translatesAutoresizingMaskIntoConstraints = false
customButton.backgroundColor = .blue
customButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
self.mapNavigationViewController.view.addSubview(customButton)
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
customButton.leftAnchor.constraint(equalTo: self.mapNavigationViewController.view.leftAnchor, constant: 0).isActive = true
customButton.rightAnchor.constraint(equalTo: self.mapNavigationViewController.view.rightAnchor, constant: 0).isActive = true
self.mapNavigationViewController.view.setNeedsLayout()
})
}
With this, I got the button as below.
Now, the next thing to be done is to shift the mapbox's view so that its bottom aligns with the custom button's top. How can I achieve this?
ios swift autolayout mapbox nslayoutconstraint
asked Nov 23 at 6:35
Sujal
457413
1
autolayout constraints
– Daniel Springer
Nov 23 at 6:36
I am facing difficulty in using auto layout constraints programmatically @DaniSpringer
– Sujal
Nov 23 at 6:42
Instead ofcustomButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true. Why notcustomButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
– Daniel Springer
Nov 23 at 6:44
The button does not display with the above substitution.
– Sujal
Nov 23 at 7:24
Are you able to write code to affect the constraints of the map? Or is that out of your control? If yes: set map top to safe are top, map bottom to button top, and button bottom to safe area bottom.
– Daniel Springer
Nov 23 at 7:49
add a comment |
I am using Mapbox to allow users to navigate between locations. I am using basic navigation feature as stated in the documentation (https://www.mapbox.com/ios-sdk/navigation/examples/basic/). This gives me the navigation view as below.
I would like to add a custom button at the bottom of the view. For this, I tried the following code.
Directions.shared.calculate(options) { (waypoints, routes, error) in
guard let route = routes?.first else {
self.showAlertMessage("No possible routes detected")
return
}
self.mapNavigationViewController = NavigationViewController(for: route)
self.mapNavigationViewController.delegate = self
self.present(self.mapNavigationViewController, animated: true, completion: {
let customButton = UIButton()
customButton.setTitle("Press", for: .normal)
customButton.translatesAutoresizingMaskIntoConstraints = false
customButton.backgroundColor = .blue
customButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
self.mapNavigationViewController.view.addSubview(customButton)
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
customButton.leftAnchor.constraint(equalTo: self.mapNavigationViewController.view.leftAnchor, constant: 0).isActive = true
customButton.rightAnchor.constraint(equalTo: self.mapNavigationViewController.view.rightAnchor, constant: 0).isActive = true
self.mapNavigationViewController.view.setNeedsLayout()
})
}
With this, I got the button as below.
Now, the next thing to be done is to shift the mapbox's view so that its bottom aligns with the custom button's top. How can I achieve this?
ios swift autolayout mapbox nslayoutconstraint
asked Nov 23 at 6:35
Sujal
457413
I am using Mapbox to allow users to navigate between locations. I am using basic navigation feature as stated in the documentation (https://www.mapbox.com/ios-sdk/navigation/examples/basic/). This gives me the navigation view as below.
I would like to add a custom button at the bottom of the view. For this, I tried the following code.
Directions.shared.calculate(options) { (waypoints, routes, error) in
guard let route = routes?.first else {
self.showAlertMessage("No possible routes detected")
return
}
self.mapNavigationViewController = NavigationViewController(for: route)
self.mapNavigationViewController.delegate = self
self.present(self.mapNavigationViewController, animated: true, completion: {
let customButton = UIButton()
customButton.setTitle("Press", for: .normal)
customButton.translatesAutoresizingMaskIntoConstraints = false
customButton.backgroundColor = .blue
customButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
self.mapNavigationViewController.view.addSubview(customButton)
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
customButton.leftAnchor.constraint(equalTo: self.mapNavigationViewController.view.leftAnchor, constant: 0).isActive = true
customButton.rightAnchor.constraint(equalTo: self.mapNavigationViewController.view.rightAnchor, constant: 0).isActive = true
self.mapNavigationViewController.view.setNeedsLayout()
})
}
With this, I got the button as below.
Now, the next thing to be done is to shift the mapbox's view so that its bottom aligns with the custom button's top. How can I achieve this?
ios swift autolayout mapbox nslayoutconstraint
ios swift autolayout mapbox nslayoutconstraint
asked Nov 23 at 6:35
Sujal
457413
asked Nov 23 at 6:35
Sujal
457413
asked Nov 23 at 6:35
Sujal
457413
asked Nov 23 at 6:35
Sujal
457413
asked Nov 23 at 6:35
Sujal
457413
457413
1
autolayout constraints
– Daniel Springer
Nov 23 at 6:36
I am facing difficulty in using auto layout constraints programmatically @DaniSpringer
– Sujal
Nov 23 at 6:42
Instead ofcustomButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true. Why notcustomButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
– Daniel Springer
Nov 23 at 6:44
The button does not display with the above substitution.
– Sujal
Nov 23 at 7:24
Are you able to write code to affect the constraints of the map? Or is that out of your control? If yes: set map top to safe are top, map bottom to button top, and button bottom to safe area bottom.
– Daniel Springer
Nov 23 at 7:49
add a comment |
1
autolayout constraints
– Daniel Springer
Nov 23 at 6:36
I am facing difficulty in using auto layout constraints programmatically @DaniSpringer
– Sujal
Nov 23 at 6:42
Instead ofcustomButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true. Why notcustomButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true
– Daniel Springer
Nov 23 at 6:44
The button does not display with the above substitution.
– Sujal
Nov 23 at 7:24
Are you able to write code to affect the constraints of the map? Or is that out of your control? If yes: set map top to safe are top, map bottom to button top, and button bottom to safe area bottom.
– Daniel Springer
Nov 23 at 7:49
1
1
autolayout constraints
– Daniel Springer
Nov 23 at 6:36
autolayout constraints
– Daniel Springer
Nov 23 at 6:36
I am facing difficulty in using auto layout constraints programmatically @DaniSpringer
– Sujal
Nov 23 at 6:42
I am facing difficulty in using auto layout constraints programmatically @DaniSpringer
– Sujal
Nov 23 at 6:42
Instead of
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true. Why not customButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true– Daniel Springer
Nov 23 at 6:44
Instead of
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true. Why not customButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true– Daniel Springer
Nov 23 at 6:44
The button does not display with the above substitution.
– Sujal
Nov 23 at 7:24
The button does not display with the above substitution.
– Sujal
Nov 23 at 7:24
Are you able to write code to affect the constraints of the map? Or is that out of your control? If yes: set map top to safe are top, map bottom to button top, and button bottom to safe area bottom.
– Daniel Springer
Nov 23 at 7:49
Are you able to write code to affect the constraints of the map? Or is that out of your control? If yes: set map top to safe are top, map bottom to button top, and button bottom to safe area bottom.
– Daniel Springer
Nov 23 at 7:49
add a comment |
2 Answers
2
active
oldest
votes
To achieve your objective, you will have to change the bottom constraint of the map view implemented in the library. So that you can set its bottom constraint equal to the top constraint of your customButton
See if you have access to the library's map view or its bottom constraint.
answered Nov 23 at 7:18
Damon
519317
add a comment |
I am able to accomplish the task following this Mapbox documentation.
answered Nov 26 at 10:20
Sujal
457413
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441668%2fadd-custom-button-on-mapboxs-navigation-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
To achieve your objective, you will have to change the bottom constraint of the map view implemented in the library. So that you can set its bottom constraint equal to the top constraint of your customButton
See if you have access to the library's map view or its bottom constraint.
answered Nov 23 at 7:18
Damon
519317
add a comment |
To achieve your objective, you will have to change the bottom constraint of the map view implemented in the library. So that you can set its bottom constraint equal to the top constraint of your customButton
See if you have access to the library's map view or its bottom constraint.
answered Nov 23 at 7:18
Damon
519317
add a comment |
To achieve your objective, you will have to change the bottom constraint of the map view implemented in the library. So that you can set its bottom constraint equal to the top constraint of your customButton
See if you have access to the library's map view or its bottom constraint.
answered Nov 23 at 7:18
Damon
519317
To achieve your objective, you will have to change the bottom constraint of the map view implemented in the library. So that you can set its bottom constraint equal to the top constraint of your customButton
See if you have access to the library's map view or its bottom constraint.
answered Nov 23 at 7:18
Damon
519317
answered Nov 23 at 7:18
Damon
519317
answered Nov 23 at 7:18
Damon
519317
answered Nov 23 at 7:18
Damon
519317
519317
add a comment |
add a comment |
I am able to accomplish the task following this Mapbox documentation.
answered Nov 26 at 10:20
Sujal
457413
add a comment |
I am able to accomplish the task following this Mapbox documentation.
answered Nov 26 at 10:20
Sujal
457413
add a comment |
I am able to accomplish the task following this Mapbox documentation.
answered Nov 26 at 10:20
Sujal
457413
I am able to accomplish the task following this Mapbox documentation.
answered Nov 26 at 10:20
Sujal
457413
answered Nov 26 at 10:20
Sujal
457413
answered Nov 26 at 10:20
Sujal
457413
answered Nov 26 at 10:20
Sujal
457413
457413
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441668%2fadd-custom-button-on-mapboxs-navigation-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
autolayout constraints
– Daniel Springer
Nov 23 at 6:36
I am facing difficulty in using auto layout constraints programmatically @DaniSpringer
– Sujal
Nov 23 at 6:42
Instead of
customButton.bottomAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true. Why notcustomButton.topAnchor.constraint(equalTo: self.mapNavigationViewController.view.bottomAnchor, constant: 0).isActive = true– Daniel Springer
Nov 23 at 6:44
The button does not display with the above substitution.
– Sujal
Nov 23 at 7:24
Are you able to write code to affect the constraints of the map? Or is that out of your control? If yes: set map top to safe are top, map bottom to button top, and button bottom to safe area bottom.
– Daniel Springer
Nov 23 at 7:49