I've simplified my JavaScript code to the example below; this code is giving me a huge border below the text in my infoWindow. Looking at examples on the web with single line infoWindows it seems like this is a standard feature. Is there any way to eliminate this?
Thanks
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "mouseover", function () {
marker.openInfoWindow('a<br />b<br />c<br />d<br />a<br />b<br />c<br />d<br />a<br />b<br />c<br />d<br />');
}
);
Update: Found the answer, this CSS is causing the problem .gmnoprint {
font-size:12px;
} The smaller font-size seems to be making the infoWindow display as though it was displaying the default font-size, hence the extra space. Does anyone have a good solution? Thanks
Answer was the simplest one: Add a new CSS class with the amended font size (e.g. myGoogleMapInfoWindow, and add a <div class="myGoogleMapInfoWindow"> around the content of your openInfoWindow argument. This makes the Google Maps API behave correctly. Of course it is better to do this using DOM objects rather than a HTML string. The answer seems obvious now, but it was someone else's code I had to fix this on.
Related
I set up a leaflet map recently with tool tips that pop up on click. I thought everything was working perfectly until someone pointed out that each pop up box has this weird tag in the bottom right hand corner (see image below).
Any idea what could be causing this?
Here's the code for the popup:
function popUp (feature, layer) {
layer.bindPopup("<h1 class='city_infoheader'>" + feature.properties.city + " </h1><p>PM2.5 Attributable COPD Deaths: "+Math.round(feature.properties.copd) + "</p>");
layer.setIcon(circle);
};
function PoppopUp (feature, layer) {
layer.bindPopup("<h1 class='infoheader'>"+feature.properties.admin+" </h1><p>Country Population: "+feature.properties.pop_est+"</p>");
};
var pmDeaths = new L.geoJson(pmDeaths,{
onEachFeature: popUp,
}).addTo(mymap);
var countryPop = new L.geoJson(countryPop,{
style:countryColor,
onEachFeature: PoppopUp,
}).addTo(mymap);
There is sth wrong with the .leaflet-popup-tip-container.
It is the arrow below the popup that indicates the marker once you clicked it.
It has been distorted for some reason. Best quick solution would be to set the css class selector to:
.leaflet-popup-tip-container {
display: none;
}
I had this same problem. If you are including leaflet.css in addition to a library that already contains leaflet (e.g., mapbox), then there may be duplication/conflict of style definitions that will cause this problem with the popup tips. The solution is to remove leaflet.css from your build.
lately, I started fiddling with MapBox and right now, I am trying to add the marker to the map. Not as easy as it seems. I am trying to add basic, default marker with code copypasted straight out of "Mapbox GL" reference guide. Still, it won´t show up.
This is the code I use, it cant get simpler that this...
var marker = new mapboxgl.Marker().setLngLat([45.702117, 42.395926]).addTo(map);
Does anybody have an idea why it doesnt work? Whole "not working scenario" can be seen at http://www.caucasus-trekking.com/Maps/map
Edit: Specifically, I would like to use that classic marker, round at the top and pointy at the bottom. Somjething like this - https://www.mapbox.com/help/img/android/marker-example.png
Wasnt there some default shape in Mapbox or should I create it by my own css file?
Thanks a lot
Somewhat strangely, it appears that the answer is that the Marker is being drawn, but there is no styling included in mapbox-gl.css to actually make it visible. It's just an invisible div.
So you need to add some CSS:
.mapboxgl-marker {
width: 25px;
height: 25px;
border-radius: 50%;
border:1px solid gray;
background-color:lightblue;
}
See codepen: https://codepen.io/stevebennett/pen/VpPbbM
If you look into the source of your page, you'll see that the marker is successfully added as an empty <div class="mapbox-gl-marker" ...></div>. Yes, nothing to see here, but that's the default way it is.
Show that marker some love and give it some style.
var el = document.createElement('div');
el.style.backgroundImage = 'url(https://placekitten.com/g/50/)';
el.style.width = '50px';
el.style.height = '50px';
el.style.borderRadius = '50%';
new mapboxgl.Marker(el).setLngLat([45.702117, 42.395926]).addTo(map);
See the original source of this c&p code in this example.
After carefully reading docs I realize this issue occurs because we are not importing mapbox-js.css file. Please read the docs to know how to add it https://docs.mapbox.com/mapbox-gl-js/guides/install/#quickstart.
Please see attached image:
The html (I just broke it up in 3 lines so you wouldn't have to scroll to the right):
<!-- MapServer Template -->
<area shape="circle" coords="[shpxy precision=0 proj=image yf=",7" xf=","]"
title="[name]" alt="[name]" onmouseover='displayCityInfo("[name]");
displayToolTip();' onmouseout="hideCityInfo()">
The jquery:
function displayToolTip() {
$( document ).tooltip({track: true, items: '[title]', content: getContent});
}
function getContent() {
var element = $(this);
if (element.is('[tooltip]')) {
var src = element.attr('tooltip');
return '<img src="' + src + '" width="100">';
}
if (element.is('[title]')) {
return element.attr('title');
}
}
The issue:
I am not sure why there is basically "double hovers". If I just move my mouse around the map quickly, the names get stacked on top of each other in the top left corner.
1) I do not want any tool tips in the top left corner.
2) I just want to hover over a golden point, and the tool tip appears. As you can see in the image, this is happening...somewhat.
3) Don't mind the teal-colored rectangle.
The goal:
Remove the tool tips in the top left corner, and just have tool tips when you hover over a golden point.
Any input on the matter is appreciated. I was looking through the documentation but I am not sure what I'm doing wrong.
Tooltips are one of those things that never quite works the way you expect it to and end up taking a lot more time than you expect. There a lot of factors involved but most notoriously are timing and browser type and version.
The timing issue: if the element you are hovering on has an alt or a title attribute at render time, once the hover event fires and the listener is called, it's too late, the default tooltip will show no matter what you at that point. Sometimes, you might get lucky and solve it with a event.preventDefault() or browser equivalents.
The browser issue: unsurprisingly, many versions of IE (7,8,9) once the alt or title attribute has been rendered, there is just no way to stop it from displaying the default tooltip. There are several workarounds but most include removing alt and title attributes from the html itself (i.e. before the browser has a chance to see it) and using an xhr to get the text contents of the tooltip.
Hope this helps.
I work on the customization of a google map for a website. I managed to get what I wanted with the API and the site of customization.
Currently, it is possible to scroll over my map to get closer or highter. I wonder if we could do the same on my div placed over my map (which contains a form) ?
My map (the form is on the right):
*remove*
Ps: I've pixelate the map for security reasons.
Thank you in advance,
Sure thing. The maps api exposes the methods getZoom and setZoom for that kind of thing. All you need to do is set up the event handler for the mousewheel event in your container.
It's going to look something like this:
$('#container').on('mousewheel', function (e) {
var currentZoom = map.getZoom();
if (e.originalEvent.wheelDelta > 0) {
map.setZoom(currentZoom + 1);
}
else {
map.setZoom(currentZoom - 1);
}
});
Here is a working jsFiddle so you can see it in action.
Also, if you're trying to zoom in to a particular point, you can use setCenter before you do the zoom. The point you select as your center will be the point that the map zooms in towards.
#Phillip Schmidt : It's working now thx.
I'd like to know if you also have somes knowledges on disable the "classic" scroll ?
When I scroll on my div, the Zoom work great but the 'classic' scroll too :/
i want to make a sort of compass on a mobile website.
This is what I have:
This is what i want:
I save my current location in the localstorage. Then for example 1km further I check my location and check the distance between the two points.
Now I want an arrow from the current location to the location in the localstorage.
The degrees from the phone I check with the javascript library "compass.js".
But now, how can I make the arrow to the location?
It looks as though you're trying to draw an image (an arrow) at a given rotation. Well, if we assume a modern browser (not a bad assumption for phones these days), that's quite easy. Just have an img on your page and apply a CSS transform on it.
See this site for more info on rotations in CSS: http://www.cssrotate.com/ (wow, somebody made an entire site for that…)
Now you also want to apply the rotation via JavaScript, so you'll need to change the CSS attribute dynamically. Since it's still quite new and has vendor prefixes, that's a little tricky, but not too hard. This site has a nice way to cope with it: http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Putting it together, you could have this:
<img id="myarrow" src="myarrow.png" />
(blah)
<script>
// from http://www.javascriptkit.com/javatutors/setcss3properties.shtml
function getsupportedprop(proparray){
var root=document.documentElement;
for (var i=0; i<proparray.length; i++){
if (proparray[i] in root.style){
return proparray[i];
}
}
return false;
}
var cssTransform;
function setArrowRotation(x){
if(cssTransform===undefined){
cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']);
}
if(cssTransform){
document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)';
}
}
</script>
Now just call setArrowRotation whenever you need to redirect the arrow.
Here's a fiddle which continuously rotates the arrow: http://jsfiddle.net/y2sxE/