Leaflet legend: how to setup scroll - javascript

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?

Related

Radar doesn't fit the div properly, cutting off some of the contents. How can I fix it?

I am using amcharts and I have a grid layout on my page to store 3 elements: List, map and radar chart.
The radar chart doesn't display properly for some reason. It doesn't matter what dimensions and sizes I give to the parent div, it doesn't display the radar with all the labels. It always cuts off some of them.
I couldn't find anything about it in documentation or in here. Here are the results of my stylings: first, second third.
After unsuccessful attempts at altering CSS, I fixed it by adding a title of the chart at the top and label with opacity 0 at the bottom using charts prototypes in JS. I couldn't find any solution in documentation, but to set fixed maxHeight of the radar in pixels. The solution with pixels wouldn't work well with CSS-Grid.
fixed container

Zooming on images smaller than the div dimensions and specifying the zoom extent using jQuery Zoom

I'm trying to build a zoom feature on images. To do so, I'm using Jquery Zoom, the script is simple:
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
There are 2 problems with this:
While this works correctly on images larger than the enclosing div's dimensions, it doesnt work on images which are smaller that the div dimensions. Ideally, I expect irrespective of the image dimensions, the image zooms nonetheless.
Right now, there is no control over the extent of zooming. I want that there probably be + and - buttons (something like this) on the bottom of the image which give the user control over the scale of the zoom while showing the current zoom percentage.
I've made a codepen of my case here: https://codepen.io/anon/pen/gJEdxm
How should these 2 changes be effected? I'm novice at Javascript so not sure how this would work out. Reading the documentation, I see there is a possibility to specify the zoom percentage (magnify attribute). Is there someway to give the input to magnify from the UI?

How to center child on parents horizontal axis in CSS?

I'm trying to make a simple Chrome Extension that allows you to loop a section of a YouTube video. I'm able to put the button, I have all the logic behind it finished, styling etc except one thing. The buttons on the YouTube videos control panel, "Play" button, etc, are aligned in the middle of the control panels horizontal axis. However, my button sits at the bottom of it.
And the only way I'm able to make it have the same alignment as the other buttons is to set it's bottom to 13px. Of course this is a static value and won't work on different screen resolutions and when the video goes fullscreen.
I just want to know a way to make it centered along the horizontal axis like the other buttons. Any help would be much appreciated. Thanks.
You can use percentages like bottom:5% instead of bottom:13px to position the bottom relatively to its parent container. The button will change it's distance from the bottom with resolution change but will keep the same ratio of 5% relative to it's container height the whole time.

highcharts not given the right xAxis labels on page load

I'm having what appears to be a highcharts sizing issue. The width of the highcharts svg, and the containing div are the same, and they are sizing correctly (going from 525px to 530px when I bump the window). However the labels act correct after the resize, but not on page load.
Here's what the chart looks like on page load:
You can see the issue with the xAxis labels.
and after I size the window BIGGER (manually with my mouse):
note that I am using angularjs and the angularjs highcharts directive found here:
https://github.com/pablojim/highcharts-ng. I don't think that's related however.
any help you can provide is much appreciated!
Thanks
Probably the labels overlap and Highcharts removes them automatically. I suggest you to give a look at the Highcharts API.
Overflow
How to handle overflowing labels on horizontal axis. Can be undefined,
false or "justify". By default it aligns inside the chart area. If
"justify", labels will not render outside the plot area. If false, it
will not be aligned at all. If there is room to move it, it will be
aligned to the edge, else it will be removed.
Changing the overflow property to "justify" may fix it, but it may not look good. Give it a try.
Another suggestion to fix this, is to give it a fixed size of lines to display the labels, with the staggerLines property. Check this Fiddle and see it fits to your problem.

How to customize Gmap?

I am using Gmap on my website and I notice that i sets position:relative on the #map. How do I change this? I don't want any positioning on the #map div. I looked over the gmaps.js and couldn't find it.
Another problem is how to make the gmap load in satellite mode by default instead of map?
Also can I get rid of all the other things I get by default - zoomer, arrows, text at the bottom right etc. I just want a clean map in satellite mode.

Categories

Resources