I'm completely new to mapbox and was just exploring api docs for a small project I'm currently working on.
One thing I want to do, but could not find anywhere (which is why I believe it may not be possible) is to put GeolocateControl together with NavigationControl button group.
Does anyone know whether it is actually doable?
What I have so far is two calls to addControl, which place one in the top-left - the other top right corner of the map.
window.currentMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
window.currentMap.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
You can place both controls in the same corner. For instance, at opentrees.org, both are in the bottom right corner.
In your case, just change your last line to }), 'top-left');
If you need them to be even closer, or more "together" in some way, overriding the Mapbox-GL CSS (as Andrew suggested) is the correct approach.
Related
Problem:
By default in instantsearch.js, the reset button in the search field is hidden until you start typing. However the submit button doesn't hide, causing them to overlap, this seems default behavior(?)
Here is a demo that demonstrates the issue:
https://codesandbox.io/s/quizzical-leakey-7shzr
Expected Outcome:
I want the search submit button to replace (toggle) with the reset button on typing.
Things I've tried:
I have looked through the documentation and can't find any solution to this. There is a showReset and showSubmit parameters as seen here: https://www.algolia.com/doc/api-reference/widgets/search-box/js/ but these just disable them completely.
Changing the template for them in the widget, only stylizes them, rather than adjust their function.
I do have a heavy handed solution I've written in jquery below but my question is: Is there a way to configure this behavior in instantsearch.js?
$( ".ais-SearchBox-input" ).on("keyup", function() {
if($('.ais-SearchBox-input').val().length > 0){
$('.ais-SearchBox-submit').addClass('none');
}else{
$('.ais-SearchBox-submit').removeClass('none');
}
});
$(document).on('click', '.ais-SearchBox-reset', function() {
$('.ais-SearchBox-submit').removeClass('none');
});
The submit button is initially designed to be on the left hand side of the searchbox, and the reset one on the right hand side, as you can see in the InstantSearch.js SearchBox Storybook. In your demo, there's custom CSS that aligns them both on the right, which is why they're overlapping. But they're two orthogonal concepts, so they weren't designed to replace one another out of the box.
Your solution is fine, although I understand that having imperative logic like this on top of InstantSearch.js might feel icky. Another approach is to directly hook into the rendering logic of the widget by using the connectSearchBox connector. You'll be able to fully control what is rendered, and you'll have access to query which you'll be able to leverage to decide whether to show one button or the other.
My advice is to start from the full example and adapt it for your use case.
I've seen a lot of posts that say v8 does not yet support viapointPushpinOptions and I was wondering if that was still the case. What I would like to do is make viapoints draggable, but have not yet figured out how. This is the code I have...
directionsManager.setRenderOptions({
viapointPushpinOptions: { visible: false },
viapointPushpinOptions: { draggable: true }
});
Any help is much appreciated. Thanks!
The viapointPushpinOptions property is deprecated and there are no plans to add it to V8. In V8 you can use the following for waypoint customizations:
waypointPushpinOptions
firstWaypointPushpinOptions
lastWaypointPushpinOptions
That said, we are planning to add a function soon to the directions manager to get all pushpins for the route which would make it easy to go through and customize each one as much as you want. That should be in the experimental branch soon if it isn't already there and will likely be in the main release branch in a few weeks.
If you can't wait, you can always hide all waypoints, then loop through the route data and create custom pushpins for each waypoint as you see fit. Here is a sample: http://bingmapsv8samples.azurewebsites.net/#Fully%20Custom%20Waypoint%20Pushpins
I'm trying to get this horizontal scrolling Plugin from Waypoints to work and it appears that there must be something outside of my knowledge that is missing.
Here's a codepen I made of the 1 and only example they had. It's supposed to trigger a little pop up notifier. Firstly, I'd like to see that this really works before I put anymore time/frustration into it - but I'd also like to attach an addClass or toggleClass to it.
var waypoint = new Waypoint({
element: document.getElementById('horizontal-waypoint-offset'),
handler: function(direction) {
notify('right-in-view waypoint triggered')
},
context: document.getElementById('overflow-scroll-offset'),
horizontal: true,
offset: 'right-in-view'
})
Codepen:
http://codepen.io/code-a-la-mode/pen/vOPWgM
Demo on Waypoint site:http://imakewebthings.com/waypoints/api/horizontal-option/
(ultimate use for this: I have a vimeo frame that slides in from an absolute left offscreen. I plan to have this toggle play/pause as it enters/leaves the viewport.)
I'd appreciate just seeing this work in any capacity, but if anyone wants to show off and make an example of it controlling play/pause as a vimeo (or youtube) screen slides in from off screen, I wouldn't mind AT ALL :)
The version of Waypoints you're using in that Pen is very old, 1.1.6. Creating waypoints using new Waypoint wasn't a feature until 3.0. Please try updating.
I have a problem with g-leaflet - it shows as a grey rectangle only (with a bit of the map at top left) until I resize the window (manually). Then it shows up. Sometimes parts of maps show when I hover over an area but this too is incomplete and problematic. Here:
The code that I use to add the G-Leaflet map to my GXT VerticalContainer (com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer) is as follows, taken from G-Leaflet example:
LeafletDrawResourceInjector.ensureInjected();
final MapWidget mapWidget = new MapWidget();
mapWidget.setSize("1000px", "750px"); // I added this myself to try to fix the issue
myVerticalLayout.add(mapWidget);
(I also set the size of the "myVerticalLayout" container).
Please help!
Leaflet is really finicky. Scheduling a defferred call to invalidateSize() was not enough. Had to make my own JavaScript call to its invalidateSize using setTimeout, also making sure that all the containers are attached before this happens. Only hen it would show.
My question is about the Flow Decision designer object. Can I change the sides that the "True", "False", and Inputs come from? Currently, True is always to the left, False on the Right, and input is at the top or the bottom. Naturally some flows become very "Messy" because of this. I know that I can always 'Not' the condition to switch the true and false, but that is sloppy. Thanks!
No, there is no way to swap those around.
Personally I would prefer the true option to go down and false to go sideways, that is the way I learned to draw flowcharts way back when I started programming but this is the way it is.
I suggest adding a request on User Voice here.