Attaching to jQuery UI Tooltip to openstreetmap marker - javascript

I am trying to put a jQuery UI Marker but it's not showing up. To test I have added a title attribute to the H1 above my map and it is working fine.
I have tried a number of things like setting the marker's title using .attr() but this seems the most logical:
ic = "img/" + place.type + '/' + place.status + ".png";
marker = new OpenLayers.Icon(ic, size, 0);
placeMarker = new OpenLayers.Marker(new OpenLayers.LonLat(place.longitude,
place.latitude).transform(gg,sm), marker);
$(placeMarker).tooltip({ content: place.name });
placeLayer.addMarker(placeMarker);
As I said, the H1 tooltip works (and displays over the map so it isn't a z-index problem) but nothing shows up for marker.

To work around this I have created my own tooltip div that is moved around when the cursor moves. Then, when the cursor is above content that I want to tooltip, the div is shown and hidden:
$(document).mousemove(function(e){
curX = e.pageX + 10;
curY = e.pageY;
tooltip = $("#tooltip");
tooltip.css("left", curX);
tooltip.css("top", curY);
});

Related

Replace tile picures in Google maps API getTile override

I'm doing an application, where you can click on a google maps tile, and replace it with another picture.
The current solution is that I added an overlay map, and overrode the getTile(), to create a custom div with an ID, and a click event listener, where I can select it with ID selector, and work with it.
The current solution is (summed up):
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.id = 'block_' + coord.x + '_' + coord.y;
return div;
};
google.maps.event.addListener(map, 'click', function(event) {
var coord = ... the current tile coordinate
var block_to_select = $('#block_' + coord.x + '_' + coord.y);
do_magic(block_to_select);
}
It would be better to add the click event listener in the gettile() so I could get rid of the IDs, and a lot of computing code.
I tried:
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.dataset.x = coord.x;
div.addEventListener('click',function(){
alert(1);
});
return div;
}
But it the onclick function won't run.
Is there any more efficient way to replace tile pictures?
Returning a jquery $("") also throws error in getTile().
The tiles will be rendered in the overlayLayer-mapPane .
According to the documentation this mapPane may not receive DOM-events, so I'm afraid there is no better way than detecting a particular tile via a calculation.

JavaScript animation causing bright screen flash

I'm using the jQuery library 'transitions' for its extension in simply CSS tweening. The issue, however, comes when I simply try to hide or remove the backdrop (which causes the area around the appearing content to get darker).
When I hide/remove the backdrop, the original site underneath it "flashes" with a bright color before returning to its original dark scheme.
Webpage in question (just click one of the TV shows to make the backdrop appear, then click anywhere off of it to witness the removal + flashing) : Webpage in Question
$(document).ready(function(){
$("#MetaContent").transition({scale:[0,0]});
$(".AMResultSelector").click(function(){
var Title = $(this).children("span").html();
var CoverPhoto = $(this).children("img").attr("src");
var Description = $(this).children("p").html();
$("#MetaTitle").html(Title);
$("#MetaCoverPhoto").attr('src', CoverPhoto);
$("#MetaSummary").html(Description);
$("#AMMetaGoTo").children("a").attr("href", "/?Page=ViewAnime&ID=" + $(this).attr("data-media-id"));
//Center it
setTimeout(function(){
var CWidth = $("#AMMetaPreviewBox").width();
var CHeight = $("#AMMetaPreviewBox").height();
var OffsetX = $("#MetaContent").width()/2;
var OffsetY = $("#MetaContent").height()/2;
console.log(OffsetX);
$("#MetaContent").css("left", (CWidth/2 - OffsetX) + "px");
$("#MetaContent").css("top", (CHeight/2 - OffsetY) + "px");
}, 10);
$("#AMMetaPreviewBox").show();
$("#MetaContent").transition({scale:[1,1]}, 200);
})
$("#AMMetaPreviewBox").click(function(){
$("#MetaContent").transition({scale:[0,0]}, 200, function(){ $("#AMMetaPreviewBox").hide() });
})
})
</script>
I don't understand why this is happening...
Browser: Google Chrome Version 39.0.2171.95 m

How to get coordinates of div on button click

I am trying to find out the coordinates of a div with an id of #23 when a button is clicked, the button is called arrowR. Problem is it keeps returning the coordinates of where the mouse is on the button. Is there any way to get the coordinates of the div within the page when the button is clicked? The script which I am using is below:
$('#arrowR').click(function(e)
{
var offset_l = $(this).offset().left - $('#23').scrollLeft();
var left = Math.round( (e.clientX - offset_l) );
if (left != 62) {
alert("Left: " + left );
} else {
alert("works");
}
});
You are getting the offset of the button, you want the offset of the div:
FIDDLE
$('#arrowR').click(function (e) {
var coords = $('#23').offset(); // <-- This.
$('#coords-left').val(coords.left);
$('#coords-top').val(coords.top);
});
I've positioned an element absolutely at the coordinates so you can see in the fiddle that it matches.
Taken from How do I find the absolute position of an element using jQuery?
var position = $(element).offset();

Make a color tinted map in Google Maps v3

I have searched around the net, and found several solutions. Including this thread here on SO. However, all of the methods creates a flicker on the screen while zooming in/out.
Is there any way of preventing this? I'm currently applying a ImageMapType as overlay. It works great, but the flickering occurs while zooming.
Are there any other alternatives to apply a color tint to the map, but not the other overlays (markers and such).
This is how I apply my ImageMapType btw:
var overlayTint = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {return 'library/img/maptint.png';},
tileSize: new google.maps.Size(512, 512),
opacity: 0.30,
isPng: true
});
map.overlayMapTypes.insertAt(0, overlayTint);
EDIT: I'm using Satellite maps, which implies that Styled Maps are not the way to go either.
I found a solution that works pretty well!
I extended the OverlayView class to make my own custom overlay. This overlay consists of a single <div> that has a half-transparent blue:ish color. The div is screensize*2, and is placed in the middle of the screen.
The reason for being twice as big is because the zoom in/out. While you are zooming in, the overlay gets relative resized to fit the ending position. Since the ending position is smaller, this creates a big gap around the overlay. However, if we make it twice as big as the screen, we avoid this problem!
And as the tip of the iceberg, we hook the drag, dragend and center_changed events to re-positionize this div to the center of the screen. This ensures that the overlay stays in place when the user pans around as well.
Hope that this can help anybody else. Thank you for reading!
Just had to solve this myself. This thread gave me quite a few pointers on where to look, but I arrived on a slightly different solution than OP.
I instead created an overlay at the bounds of Lat/Lng, which is -90, -90 to 90 90. The overlay was again, a simple div with the background set to an rgba color.
Here is my solution in coffeescript:
gm = google.maps
center = new gm.LatLng 50, 0
class colorOverlay extends gm.OverlayView
constructor: (#color, #map) ->
#div = null
#setMap #map
#bounds = new gm.LatLngBounds(new gm.LatLng(-90, -90), new gm.LatLng(90, 90))
onAdd: () ->
col = document.createElement 'div'
col.style.width = '100%'
col.style.height = '100%'
col.style.position = 'absolute'
col.style.background = #color
#div = col
panes = #getPanes()
panes.overlayLayer.appendChild(#div)
draw: () ->
# Overlay Projection
oP = #getProjection()
sw = oP.fromLatLngToDivPixel #bounds.getSouthWest()
ne = oP.fromLatLngToDivPixel #bounds.getNorthEast()
div = #div
div.style.left = sw.x + 'px'
div.style.top = ne.y + 'px'
div.style.width = (ne.x - sw.x) + 'px'
div.style.height = (sw.y - ne.y) + 'px'
map = new gm.Map mapElem,
zoom: 10
mapTypeId: google.maps.MapTypeId.HYBRID
center: center
marker = new gm.Marker
position: center
map: map
title: "Hello World!"
overlay = new colorOverlay 'rgba(37,41,56,0.6)', map

z-Index overlay in google maps version 3

I'm trying to get an overlay in google maps api v3 to appear above all markers. But it seems that the google api always put my overlay with lowest z-index priority. Only solution i've found is to iterate up through the DOM tree and manually set z-index to a higher value. Poor solution.
I'm adding my a new div to my overlay with:
onclick : function (e) {
var index = $(e.target).index(),
lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition());
icon = this.getIcon(),
x = lngLatXYposition.x - icon.anchor.x,
y = lngLatXYposition.y - icon.anchor.y
$('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay');
}
I've tried every property I could think of while creating my overlay. zIndex, zPriority etc.
I'm adding my overlay with:
$.view.overlay = new GmapOverlay( { map: view.map.gmap });
And GmapOverlay inherits from new google.maps.OverlayView.
Any ideas?
..fredrik
If anyone was having the same problem as I was, here is my problem and solution:
I needed an OverlayView which would add tooltips to markers, but my popup overlay kept showing behind the markers.
I implemented a subclass of the OverlayView as per the Google documentation:
https://developers.google.com/maps/documentation/javascript/customoverlays
When you write your custom OverlayView.prototype.onAdd function, you need to specify to which Pane to attach your overlay. I just copied the code without actually reading the surrounding explanation.
In their code, they attach the overlay to the overlayLayer pane:
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
But there are many different MapPanes you can use:
"The set of panes, of type MapPanes, specify the stacking order for different layers on
the map. The following panes are possible, and enumerated in the order in which they are stacked from bottom to top:"
MapPanes.mapPane (Level 0)
MapPanes.overlayLayer (Level 1)
MapPanes.markerLayer (Level 2)
MapPanes.overlayMouseTarget (Level 3)
MapPanes.floatPane (Level 4)
I wanted the overlay to hover over all other info on the map, so I used the floatPane pane and problem solved.
So, instead of :
this.getPanes().overlayLayer.appendChild(div)
you use this :
this.getPanes().floatPane.appendChild(div);
You can't change the zIndex of an OverlayView (it has no such property), but it holds panes that contains DOM nodes. That's where you can use the z-index property;
...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...
In order to be able to play around with the paneType of the mapLabel class, I added a paneType property to the MapLabel class from google utility library (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303).
This is usefull to make the label not to be hidden by a polyline.
Please find the code additions to the mapLabel.js file.
MapLabel.prototype.onAdd = function() {
var canvas = this.canvas_ = document.createElement('canvas');
var style = canvas.style;
style.position = 'absolute';
var ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
ctx.textBaseline = 'top';
this.drawCanvas_();
var panes = this.getPanes();
if (panes) {
// OLD: panes.mapPane.appendChild(canvas)
var paneType = this.get('paneType');
panes[paneType].appendChild(canvas);
}
};
MapLabel = function (opt_options) {
this.set('fontFamily', 'sans-serif');
this.set('fontSize', 12);
this.set('fontColor', '#000000');
this.set('strokeWeight', 4);
this.set('strokeColor', '#ffffff');
this.set('align', 'center');
this.set('zIndex', 1e3);
this.set('paneType', 'floatPane');
this.setValues(opt_options);
}
Sample code using the paneType:
var mapLabel = new MapLabel({
text: segDoc.curr_value.toFixed(0),
position: new google.maps.LatLng(lblLat, lblLng),
map: map.instance,
fontSize: 12,
align: 'center',
zIndex: 10000,
paneType: 'floatPane',
});
Thanks!
Setting z-index to 104 for the overLay layer seems to be the "magic" number" if you care about interacting with the markers (i.e. dragging markers). Any higher than 104 and you can not interact with the markers. Wondering if there is a less brittle solution...
Use panes.overlayMouseTarget.appendChild
If you want to allow your layer to be targetable through mouse clicks (and use events such as "click" or CSS pseudo ::hover) then you should add your overlay to the map using overlayMouseTarget
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.div_);
Also see:
https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes
Disclaimer: this is a dodgy solution that may stop working at any time and you definitely shouldn't use this in production.
For those looking for a quick and dirty solution, this CSS worked for me:
.gm-style > div:first-child > div:first-child > div:nth-child(4) {
z-index: 99 !important;
}
Use at your own risk!

Categories