I use Leafletjs with google map tiles in my application. Here is my HTML markup:
<div class="map-wrap" style="display: none;">
<div id="map"></div>
</div>
<div class="rightNav">
Expand Map
</div>
In the javascript file, I have the following code:
$.expandMap = function() {
if ($(".rightNav").is(':visible')){
$(".map-wrap").animate({width:'70%'},'400');
$(".rightNav").hide(0);
map.invalidateSize();
//L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);
}
}
The map container expands fine. But the map is not expanding.
map.invalidateSize is not expanding the map or filling the outer div (container).
L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container); also failed.
However, if I resize the browser window a little bit, the map fills the outer container.
So I thought I would try to simulate the window resize programmatically using jQuery. But the too didn't expand the map.
Please let me know what I'm doing wrong.
Thanks Yehoshaphat. I did not want a full screen map. I just wanted to expand the map a little bit.
Finally, I got it working using the below code:
$.expandMap = function() {
if ($(".rightNav").is(':visible')){
$(".map-wrap").animate({width:'70%'},'400');
$(".rightNav").hide(0);
setTimeout(function(){ map.invalidateSize()}, 400);
}
}
The map now expands to fill the expanded space of the outer container. It is not very smooth; but it works.
My recommendation for you is to use the following plugin: https://github.com/brunob/leaflet.fullscreen , it adds a button for full screen, which expand the map automatically, as in the following map:.
Related
I am creating an app on the android platform and I need to print out the pixel coordinate of where a finger touches the image. The image is in a scrollable tag, and right now, with a touchstart event listener, if I touch one spot on the screen and then scroll and touch the same spot (different part of the image but located on the same spot as the first touch) returns the same coordinates. So the calculations are done based on the screen, not the image. I've been told to do offsets based on where it is in the screen and the scroll, but when I run the app on a phone instead of a tablet, this will give me a different coordinate on each device. I do not know the size of the image as the user uploads any image they would like. I cannot show code, so I hope my description is enough to understand what I need.
So if I understand you right, you want to get the "tapped" (clicked) coordinates inside your Image, where e.g. your left upper image corner is your 0:0 coordinate?
Also I hope jQuery is ok, if not I'm sorry but at least should give you some direction.
$(document).ready(function() {
//I've added click event so you can see it here, but touchstart should work as well
$('img').on('touchstart click', function(e) {
var offset = $(this).offset();
var X = (e.pageX - offset.left);
var Y = (e.pageY - offset.top);
$('#coord').text('X: ' + X + ', Y: ' + Y);
});
});
//$(this).offset() gets the clicked elements (image) coordinates relative to the document
//e.pageX gets the cursor/finger click position relative from left edge of document
//e.pageY gets the cursor/finger click position relativ efrom top edge of document
.wrapper {
background: white;
}
.image-container {
padding: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-container"><img src="https://via.placeholder.com/150C/O%20https://placeholder.com/" /></div>
<div>
<div id="coord"></div>
</div>
</div>
So basically you are just substracting the image coordinates (top left corner from image relative to document) from the clicked coordinates.
We are building a website which should have the following layout:
As you can see, there's a header and a sidebar, and the content area is a Google Map built with the Google Maps Javascript API v3.
Now we would like to make the header and the sidebar half-transparent, such that the map would be visible behind the header and the sidebar, something like this:
However, now the header and the sidebar are overlapping the Google logo and the zoom control.
Is there a way to tell the Google map that it should apply some padding to the placement of its controls?
Of course we could try to move the Google logo and the controls "manually" by applying some CSS, but the Google Maps Javascript API would restore their location every time the user uses the map (e.g. on panning or scrolling), so this would result in a fight between our code and Google's.
I have found an answer that seems to work reliably:
The controls
You can add a top-margin to the controls by adding a dummy control:
var dummy = document.createElement('div');
dummy.style.height = '55px';
dummy.style.width = '100px';
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dummy);
Then, in the configuration, place the zoom control with RIGHT_TOP:
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP,
},
Note that this only works because TOP_RIGHT controls are always placed above RIGHT_TOP controls.
The Google logo
The following code waits for the Google map to be initialized, then adds the class gmaps-logo-padded to the logo:
var moveLogo = function () {
var logo = $('#map div a div img').parent().parent().parent();
if (logo.length == 0)
window.setTimeout(moveLogo, 10);
else
logo.addClass('gmaps-logo-padded');
};
moveLogo();
Then, by applying the following CSS, you can change the placement of the logo:
.gmaps-logo-padded {
left: 300px !important;
}
Please note that paragraph 9.4 of the Terms of Service forbid hiding or removing the logo.
As for the zoom control placement, you can use Control positioning, for example:
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
Before anyone jumps on me for an answer to my question that already exists, please read the rest of my question and tell me how to handle this.
There is already a question asked (Making the Bing Map API Map responsive) that contains what is marked as an answer except the answer doesn't work.
The problem? In addition to some other issues (Google vs. Bing, a full listing of the javascript implementation, etc.) the answer includes a variable called listingsW that does not exist anywhere in the answer or the question.
Does anyone have a working example (complete) for either Bing or Google?
Thanks in advance!
$(window).resize(function () {
var screenH = $(document).height();
var screenW = $(document).width();
$('#map-canvas').css({
width: screenW - listingsW,
})
google.maps.event.trigger(map, 'resize');
});
listinsW is the width of some other control on their page. If you had a side panel, that may contain a list of items beside the map you would subtract this the width of that panel from the screen width to get the width of the map. If you have a full screen map then remove this property. All that said you could just simply have the map fill the available space by setting the css propertyies; position:relative;width:100%;height:100%. You will also need to add the following to your CSS styles:
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
By using CSS you don't need to worry about using events when the window resizes.
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.
I have next problem: There is jquery accordion control. One of tab have div which contains google map. And map does not fill all div. If replace map div out of accordion all work coorectly. How i can fill all div ?
Thanks.
Like this http://designer4you.ru/pic.jpg
See the discussion here: http://www.mail-archive.com/google-maps-api#googlegroups.com/msg59946.html
google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(map, "resize");
});