I noticed that there was no option to change the position of the scale on google maps using scaleControlOptions (correct me if I'm wrong) and was wondering if there was any way to get around that and display the scale on the bottom left position.
According to the documentation:
scaleControl enables/disables the Scale control that provides a simple
map scale. By default, this control is not visible. When enabled, it
will always appear in the bottom right corner of the map.
So unfortunately, you won't be able to put it in the bottom left position.
You can't do it with the built in options unfortunately, but you can do it with some simple CSS:
.gm-bundled-control-on-bottom {
right: auto !important;
left: 25px;
}
Not sure whether this goes against their TOS but it works.
Related
I am creating a website in some kind of parallax design and for some sections I need map as background. I want the map to be insensitive to mouse wheel scrolling, but I want to keep the +- buttons zoom control. But my solution still does not work - once I scroll to the map and click on it I am not able to scroll away from it anymore. Here is the fiddle with my current setup:
https://jsfiddle.net/Drozi/x7jg4we6/47/
If you try to scroll down to the map, click on the map, you cant scroll back after that.
I tried to build a fiddle from scratch and after that it worked. Unfortunately the same setup (I am definitely missing something here) does not work within the entire webpage (and also in the shared fiddle).
I use Bootstrap4.
I am able to see your problem in the jsfiddle. Adding pointer-events: none to the leaflet map container seemed to fix it for me. Even after clicking on the map, the page still scrolls with your parallax effect, and the zoom control still works:
#leafletmap-places {
height: 100%;
width: 100%;
opacity: 0.4;
z-index: 0;
pointer-events: none; // <--- works for me
}
Here's your fiddle forked with the change, Let me know if that works for you.
(I'm not sure if this was your intention, but your map was not responding to drag events - this continues to be true with my change. However my change also disables double-click events. If you map needs more interactivity, there is probably more tweaking that needs to be done.)
I'm displaying a map using Google Maps Javascript API and have created a custom legend to toggle certain map paths/markers on and off. The data in the legend is loaded by PHP using entries in a database, so I don't have control over how many checkboxes will be present. At the moment, the legend div expands as required to accommodate however many checkboxes are required, but I'm looking to stop it from expanding beyond the confines of the map.
At the moment, my legend displays as below:
And when I move the bottom of the browser up to reduce the screen height, it draws the div beyond the bottom of the screen:
Does anyone know of a way to tell the div not to expand vertically beyond the edge of the map? I could obviously set a max-height value based on the height of the map, minus the top position of the legend div, but I'm looking for something a little more native, possibly along the lines of map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('mapLegend')); but for setting the bottom most value? That way, the map can adjust as required even on mobile or small screens (like in the second screenshot where the Google logo displays over the legend).
I know this is a very open ended question but I would appreciate any help or pointers anyone can give.
Thanks in advance.
I ended up using the CSS calc function to manually set the max height of the legend depending on the size of the screen.
.mapLegend {
height: auto;
max-height: calc(100vh - 175px); /* Top bar, plus height of Google logo at bottom, plus absolute top position of Legend div, plus buffer */
}
#media (max-height: 269px) {
.mapLegend {
height: auto;
max-height: calc(100vh - 120px); /* When screen <270px tall, some Google Maps controls are hidden, so legend moves up, so can expand further down the bottom */
}
}
By setting the height to auto, it will only be as big as it needs to be to accommodate as many checkboxes as are necessary, and the max-height stops the overflow from extending beyond the bottom of the screen. Note that on small screens (or when a tall screen is dragged up to reduce it's height), the Google Maps UI changes to hide some non-essential controls, so I added the screen height breakpoint to cater for this.
Hope this helps someone.
I'm using NVD3 1.8 for charting and I've implemented a custom tooltip because our visual design department didn't like the one that the library came with. I've been able to implement most of the design, but I have one problem:
The arrow on the tooltip needs to point to the guideline whether it's on the right or the left. I made this arrow using CSS and I can easily add a class to move it to the other side, but the problem is figuring out when to apply the class. When the user's mouse gets too close to the right side of the screen, the transform: translation() value of the tooltip is changed so that it appears to the left side of the mouse rather than the right.
This is done based on the width if the tooltip, NOT a static distance from the right edge of the screen (I know this because my tooltip dynamically resizes based on its contents, and a tooltip further to the left can sometimes be flipped left by having larger number values). I don't know how to access the "flip" information programmatically, as it seems to make this check after the tooltip is already rendered. How can I get around this conundrum?
Is it possible to just decide that if the guideline is on the right side of the screen then make the tooltip go to the left, and if it's on the left side make the tooltip go to the right?
You could perform a calculation where you just take the width / 2. This is what I do whenever I have a tooltip. I also move the tooltip below the cursor when it's on the upper portion of the page and move the tooltip above the cursor when it's on the bottom portion of the page
Hope this helps.
In leaflet I load a big wms file which also has a legend.
the legend however is very big and doesn't fit the screen.
So I was looking for a way to turn on scrolling in the legend.
However I did not find a method to do so.
I tried overwriting the .legend class in CSS setting a max height and setting the overflow-y to scroll. This does deliver me with a scroll, however scrolling does not work, it would only zoom in and out in the map.
Do you know a way in leaflet to do this?
I have webpage with a large height attribute which displays products. I want the user to hit space bar to move the page down to view more products, but I need my screen widgets (shopping cart & categories) on the left and right to stay in the same place on the screen. And I don't want to use scrollbars. I assume this is a javascript request, can someone point me to a good resource for this?
There's no reason to use JavaScript here - CSS should do. Using position: fixed, you can fix the elements in your page such that they always remain in a certain position relative to the user's viewport. An example would probably illustrate this best: http://www.jsfiddle.net/yijiang/qtkss/
Further reading:
http://reference.sitepoint.com/css/displaypositionfloat
http://reference.sitepoint.com/css/display
http://www.alistapart.com/articles/css-positioning-101/
You don't need javascript for this, just use position: fixed; in the widget's CSS and set the appropriate top, bottom, left, and right values on the widgets. That will position the widgets in a fixed location with respect to the browser window rather than other elements in the HTML.