We Keep Coding

Is there a way to change the side/position of a single tooltipster tooltip without having multiple classes?

I'm currently labelling anatomy diagrams and in order to minimize the labels overlapping the diagrams too much, I want to set only SOME of the tooltips to show from the bottom of the svg that I'm tagging. In the example I include it would be setting the tooltip for the svg with id "mud_levator_mandibulae_externus" to show at the bottom instead of the top.
I know I can separate each group of tooltips into different classes, but I would like to keep them all under one class if I can since I have JavaScript code that would be tedious to change if I had different classes.
I thought you could add the function specific to the id to the tag after my tooltips initialization but it's not working. Adding it into the document ready function doesn't work either.
$(document).ready(function() {
$('.tooltip').tooltipster({
theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
trigger: 'click',
});
});
$('#mud_levator_mandibulae_externus').tooltipster({
side:'bottom'
});

You could add one more css class to your element, like class="tooltip tooltip-left" and then have your functionInit detect it and change the side option accordingly, something like
functionInit (instance, helper) {
if ($(instance.origin).hasClass('tooltip-left')) {
instance.option('side', 'left')
}
}

Restrict overlays in mapbox

So I am creating a map using Leaflet and Mapbox with multiple overlays and base maps. Currently I have a layers control where these are separated and you can only show one base map at a time, but all the overlays can be shown at once.
However, I have two overlays which interfere with each other and I would like to make it so that if one is checked in the control, the other is unchecked and vice versa. Is there any way to do this?
I am anticipating something like this, but am open to any suggestions.
var layer1 = L.mapbox.tileLayer('mapid1');
var layer2 = L.mapbox.tileLayer('mapid2');
var layerControl = L.control.layers(baseMaps, {"L1": layer1, "L2": layer2}).addTo(map);
map.on("overlayadd", function(e) {
if (e.name === "L1"){
L.layers.control.uncheck(layer2);
} else if (e.name === "L2") {
L.layers.control.uncheck(layer1);
};
});
Thank you!!

Working fiddle.
I don't know if there's an easier way. It seems the library doesn't offer many options to manipulate the L.control.layers overlays.
What I'm doing is firing a click on the conflicting overlay. To achieve this, a little DOM manipulating is needed. You can store an id reference when creating overlay's label.

Leaflet - toggling GeoJSON layers without plug-ins

I know how to add a layer with markers, which I can toggle on/off and how to add GeoJSON layer to my map.
But I can't mix these functions.
I need to create a toggling layer from GeoJSON (polyline layer).
Is it possible to get what I need without any external plug-ins or scripts?

GeoJSON Layers and Markers can be used together without problem.
To be able to toggle your layers, you need to catch some sort of click event from something you can click on, for example a button.
From my research what I found is if you need a custom button, it is not so quick to implement yourself, so you might need to use one of the available plugins.
If you still do not want to build a button or use a plugin, you could for example set a click event on the map itself, which toggles the GeoJSON layer on and off.
I took the GeoJSON example from the leaflet website and changed it so it toggles the GeoJSON layer on and off:
var geoLayer = L.geoJson([
// ...
]);
map.on('click', function() {
if(map.hasLayer(geoLayer)) {
map.removeLayer(geoLayer);
} else {
map.addLayer(geoLayer);
}
});
Hope that helps..
Edit:
I changed the example to use the layer control of leaflet.js
which is much better...
var baseLayers = {
"Markers": markerLayer,
"GeoJSON": geoLayer
};
L.control.layers(baseLayers).addTo(map);
Didn't know about this ;)
If you want checkboxes instead of radiobuttons, use this instead
L.control.layers(null, baseLayers).addTo(map);
http://codepen.io/anon/pen/qEaEBg

How to change google maps Drawing Manager toolbar tooltip?

I have a situation with google map drawing manager. I want to change the drawing manager toolbar default tooltip. When we move mouse over the drawing manager tool bar(moving mouse over marker,circle)we see that tooltip "Add a Marker", "Draw a circle" . I want to change the toolbar tooltip as " Add New Location " , " Draw a Area" . I use google map API version3. Is it possible to change it?
Thanks in advance

The nodes for the buttons are not accessible via the API, the best way would be to ommit the built-in controls and create your own instead.
Another approach(using jQuery, but it would be possible without a framework too):
$(map.getDiv()).one('mouseover','img[src="https://maps.gstatic.com/mapfiles/drawing.png"]',function(e){
$(e.delegateTarget).find('img[src="https://maps.gstatic.com/mapfiles/drawing.png"]').each(function(){
$(this).closest('div[title]').attr('title',function(){
switch(this.title){
case 'Add a marker':
return 'Add New Location';
break;
case 'Draw a circle':
return 'Draw an area';
break;
default:return this.title;
}
});
});
});
It observes the mouseover-event of the buttons(because you'll never know when the buttons available inside the document) and then modifies the title.
But this approach will only work when the API uses english as language. To achieve it regardless of the language you'll have to check the top-property of the button-image(this seems to be the only detail that may be used to determine the type of shape the button is used for)

For what ever were the reasons, I couldn't get the #Dr.Molle version to work. However adapting the this answer I was able to get it to work in my application.
For example I simply wanted to change the text of the `DrawingManager' drawRectangle method and the code below worked for me. The crucial thing with this modification to the DrawingManager tooltip is to make sure the document and map objects are full loaded before this code runs.
$(".gmnoprint").each(function(){
var newObj = $(this).find("[title='Draw a rectangle']");
newObj.attr('title', 'Draw a rectangle around the area to search');
});

Protovis Jquery Tooltip problem

I would like to display data using Jquery tooltip in my web application.
I have followed the example on this website http://flowplayer.org/tools/demos/tooltip/index.html and have managed to display out a tooltip on a picture on my application.
However, I am generating some bulletchart using Protovis now and would like to display out the data when I mouse over on the bullet chart.
I want to know how do I edit to make the tooltip appear? Currently I am able to display using html tags, but what I really want is to display the tooltip using javascript code.
Below my codes for bullet chart:
var vis = new pv.Panel()
.data(patientData)
.width(140)
.height(20)
.right(10)
.bottom(20)
.left(5);
var bullet = vis.add(pv.Layout.Bullet)
.orient("left")
.ranges(function(d) d.ranges)
.measures(function(d) d.measures)
.markers(function(d) d.markers);
bullet.range.add(pv.Bar);
bullet.measure.add(pv.Bar)
.fillStyle("black")
.text(function(d) "Current Month: "+ d.toFixed(1)+"%")
.tooltip(); -->This give me an error!
Would appreciate any inputs. thanks!

The problem here is that you're trying to chain a jQuery function, .tooltip(), on a Protovis object, in this case a pv.Bar. That's not going to work. A couple of options:
If you're willing to change your jQuery plugin, you could probably follow this example, which uses Tipsy.
You could adapt the pv.Behavior.tipsy code shown here to use tooltip() instead. It looks like you could do this pretty easily, just by editing lines 33 and 64 to use a different plugin - the hard work in this code is creating a div element to attach the tooltip to, and that's the same for both plugins.