I notice the buttons "plan" and "sattelite" moved from the bottom left corner to the top, but I already use the top left corner to display input, button, data, etc. How can I move them where they were before and not have to remake all my css ?
Use mapTypeControlOptions google.maps.ControlPositiion
var mapOptions = {
.....
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.LEFT_TOP
},
Related
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
I'm an HTML novice, but here goes...
When zoomed way in, this is what I see at the center of various text line insertions:
You can see this live here: https://becketbroadband.org/fsa-map%2Fstatus
The apparently-responsible code looks like this:
addOverlay(Map, FSA05_Border, '49d834', 0.3, 'FSA-05', { lat: 42.305200, lng: -73.058500}, 'Service Available Now');
Ideas? Thanks!
I see this in the code for addOverlay, at fsa-map/status on your site:
new google.maps.Marker({
position: labelPoint,
map: BecketMap,
icon: {
path: google.maps.SymbolPath.CIRCLE, // anything, required
fillOpacity: 0, // hide the symbol leaving just the label
},
label: {
text: FSAlabel,
color: '#000000', // black
fontSize: '20px',
fontWeight: 'bold',
},
});
What happens if you don't supply an icon property at all?
The guy who wrote the original code came up with the answer. (He didn't have any ideas till I pointed out the icon property details addressed in this thread.)
The "fillOpacity" value addresses the inside of the circle. This new line of code addresses and hides the circle itself:
"strokeOpacity: 0,"
Thank you, AakashM, for getting me on the path to a solution! :) You da man!
While using DataTables for my project, When i align the Export buttons to the right side of the table using float:right. It is not properly aligned with the right edge of the table. Whereas it is properly aligned when i set float:left.
Please suggest a solution for this.
$(" #adminMainTable,#managerMainTable").DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false,
dom: 'frtpB', //This changes the position to Bottom
buttons: [
{ extend: 'excelHtml5', text: 'To Excel' },
{ extend: 'csvHtml5', text: 'To CSV' },
{ extend: 'pdfHtml5', text: 'To PDF' }
]
});
//The below code is for changing the position of buttons to right side of the table
$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");
Using a similar approach to your code for floating right, you can do this:
$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");
In other words, remove the right-padding from the final button.
Instead of :nth-child(3), you can use :last-child. That may be safer if the number of buttons ever changes.
i want to place a label below the marker (my marker is a circle). Now it is in the middle and it is not what I want, my code:
var circle = new google.maps.Marker({
position: circle,
map: map,
icon: '<?php echo get_stylesheet_directory_uri().'/images/circle.png'; ?>',
label: "My city"
});
Set the labelOrigin property of the Icon appropriately for your icon.
from the documentation:
labelOrigin | Type: Point
The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.
This is the code:
#map_canvas {
height: 1000px;
text-align: center;
}
<div dojoType="dojox.mobile.ContentPane" style="overflow: auto;">
<div id="map_canvas"></div>
<!-- cambiare style -->
</div>
I tried to center with various css attributi but don't works.How i center and enlarge all map in panel?
You have to resize your map.
Try this
var mapOptions = {
center: new google.maps.LatLng(43.653226, -79.3831843),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$('#map-canvas').fadeIn('slow', function() {
google.maps.event.trigger(map, 'resize');
}
Anish's code is working for me. (minor fix: map-canvas -> map_canvas) The map fills the width of the page and is 1000px high.
Looking at the screenshot, your map is filling the width of the window. You can tell this because the map control is all the way to the right of the screen in the upper corner. But for some reason, the map isn't fetching the tiles that it needs to fill itself. This usually happens when the map container is resized without triggering the google map resize event. Are you creating the map before the dojo parser runs? I put Anish's code inside the ready() function in dojoInit() and the map fills the screen when it is shown.
Sizing google maps to fill available space (not using absolute height and width) is tricky, but usually the problem is the height, not the width. I've written a series of blog post on google maps in worklight here: http://www.ibm.com/developerworks/community/blogs/dhuyvett