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');
});
Related
I have GeoJSON features that consists of many little features. When I hover over one of them, I want the whole layer to be selected and not only a part of my layer.
I don't know where to start to achieve that... anyone can help me ?
This is my code for the moment:
var hoverClick = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
});
select = hoverClick;
olMap.addInteraction(select);
Thanks
Instead of using an ol.interaction.Select, you could listen to the map pointermove event and use the ol.Map#forEachFeatureAtPixel method. If there's a feature (from your layer) at the location of the pointer, then apply the wanted style to the layer.
I'm currenlty working with OpenLayers and I want to make something similar to a infoWindow.
I read this example : http://openlayers.org/en/v3.11.2/examples/popup.html , but I see it as a "dirty" solution, comparing to the older version of OpenLayers, which had a class for PopUp and you created the object directly in javascript, and I was wondering if there is another solution in the current version.
Thanks in advance
Did you see https://github.com/walkermatt/ol3-popup? It can be as easy as:
var popup = new ol.Overlay.Popup;
map.addOverlay(popup);
// to show something
popup.show(coord, html);
// hiding
popup.hide();
I am using tooltipster to generate tool tips. All works fine except in the situation where I need to set the contents of a div based on user input using a simple JavaScript function. The div contents consists of images, when hovering over each image, a tool tip should display. However, the tip displays as the default browser behaves for displaying title= with an image. The JavaScript I use is simple:
function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}
Is there a way to make this work? Tool tips do display elsewhere on this web page, so the resources needed appear to be set up correctly.
Thank you!
You must initialize the tooltip ($(...).tooltipster({...})) after you have inserted your new HTML content or use delegation.
For "automatic" initialization, you might want to use delegated event listeners for that, see https://github.com/iamceege/tooltipster/issues/499
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
I've been researching the easiest way to create an interactive map for my company with a custom of USA map I've created in Illustrator. I found this tutorial: http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map which is very complete and will help me partially to achieve the results im looking.
But what about when i want to add a link on click and Text on hover of the region to each area of the map?
I'm not well versed with JavaScript so I will appreciate a lot the help and understanding from the community.
Let's assume you have an element called regionShape defined in raphael which corresponds to one of the regions in your map. Adding a link on click should be quite easy:
regionShape.node.onclick = function(e) {
window.location.href = "somepage.html";
}
In order to display a text on hover, I would recommend using jQuery. What I normally do is define a div element #hoverInfo and set its css display property to none, and then modify this property with rafael node.onmouseover, like this:
regionShape.node.onmouseover = function(e) {
$("#hoverInfo").css("display", "block");
};
And then you remove it by using onmouseout:
regionShape.node.onmouseout = function(e) {
$("#hoverInfo").css("display", "none");
};