I'm using the wonderful plugin Leaflet.Control.Search in order to search for markers (from a geoJson marker group) on my map – which works great.
I only have one simple question now:
how can I open a popup for the search result marker?
I'm using custom marker icons with popups (which open on click) already bound to them – but I would like to open the respective popup automatically once it has been found via the search.
My code looks like this:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.bindPopup(feature.properties.Name).openPopup();
}).on('search_collapsed', function(e) {
markers2.resetStyle(layer);
});
map.addControl( searchControl ); //inizialize search control
and thought it might work with that line:
e.layer.bindPopup(feature.properties.Name).openPopup();
but unfortunately it doesn't.. ;)
–
Oh, and a second question: at the moment I'm searching only in 1 geoJson layer ("markers2") – does anyone know whether it's possible to search in multiple layers at once?
Any suggestions? I'd be grateful for any help, thanks in advance!
got it: it works like this: e.layer.openPopup().openOn(map);
event.layer is set only for preloaded layer, if you search marker by ajax,jsonp or callData.. event.layer is undefined.
var geojsonLayer = new L.GeoJSON(data, {
onEachFeature: function(feature, marker) {
marker.bindPopup(feature.properties.name);
}
});
map.addLayer(geojsonLayer);
var controlSearch = new L.Control.Search({layer: geojsonLayer, initial: false});
controlSearch.on('search_locationfound', function(event) {
event.layer.openPopup();
});
Look at GeoJSON demo:
https://opengeo.tech/maps/leaflet-search/examples/geojson-layer.html
Recently, I was looking for an answer, and here is my solution for it
searchControl.on("search:locationfound", function (e) {
if (e.layer._popup) e.layer.openPopup();
});
Related
I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/
(This is embarrassing, I should not be asking this...but I just don't see the problem...)
As part of a JS-Fn, I would like to give the user immediate feedback by opening a jBox-Tooltip that is attached to the control user is dealing with. But the control tip does not open - what am I doing wrong? I have simpified stepwise by removing params and finally even this does not do.
var x=new jBox('Tooltip',{content:"Press Escape again to clear the input-field!"});
x.open();
I started with
var x = new jBox('Tooltip',{
content:"Press Escape again to clear the input-field!",
attach: "#ipExpr",
onInit: function() { this.open(); }
});
NB: I've chedcked that $("#ipExpr").length==1
It seems that attaching the jBox to an element and opening it when its being initialised seems to be the problem. Can you describe what kind of behavior your looking for in detail? For example, if you like to open the jBox right away on the element with id #idExpr, you could do it like this: jsfiddle.net/pbrrah37
var x = new jBox('Tooltip',{
content:"Press Escape again to clear the input-field!",
onInit: function() { this.open({target: $('#ipExpr')}); }
});
I'm using the plugin Leaflet.Control.Search to search markers in a layer group, which works fine. Once the marker has been found, the map already automatically pans to the center of the respective location, and the marker popup is being opened.
Now, on search, I would like to set the map's zoom level to a fixed value.
My map's initial zoom level is 12 – but once someone uses the search i'd like to set it to 16. How could this be achieved? I tried to implement setZoom, but I'm not sure how the correct syntax should be..
The code looks like this at the moment:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.openPopup().openOn(map);
map.setZoom(16);
});
map.addControl( searchControl );
Thanks a lot for any hints!
ps: when i put map.setZoom(16); BEFORE e.layer.openPopup().openOn(map); then the zoom works fine, but the popup doesn't open like it should – it only opens when I hit search again…
Have you tried map.setZoom(16);instead of this in your "on location found" listener?
Alternatively, you might want to try the map.setView(). It takes a lat/lng and zoom level. You can either take in the marker's lat/lng or the popup's lat/lng
Try editing the plugin, commenting the zoom option (line 26)
_config: {
country: '',
searchLabel: 'buscar en el mapa...',
notFoundMessage: 'destino no hallado',
messageHideDelay: 3000,
/*zoomLevel: 18*/
},
I did it another way.
After the
propertyName
I put
zoom: 16
The code looks like this:
var searchControl = new L.Control.Search({
layer: allLayers,
propertyName: 'myKey',
zoom: 16
}).addTo(map);
My background_script.js sends a message such as this:
function genericOnClick(info, tab) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, {message: 'insert_string'}, function(){} );
});
};
The receiver.js catches this as:
function insert_string() {
var field = document.activeElement;
if(field.tagName == "IFRAME") {
field = field.contentDocument.activeElement;
}
field.value += 'This is my string';
}
Now, the extension works perfectly well on regular editable fields and textareas (it even works properly in tinyMCE on the textarea-tab!) but in the case of Visual-tab of tinyMCE I can't get this to work. I have noticed that the Visual-tab, as it's a WYSIWYG editor, is special and the only way I so far have figured out on how to solve this issue would be to mimic tinyMCE's behaviour for updating the Visual-tab. However, I would like to know if there's something simple and obvious I've missed. If not, how would I go about editing the Visual-tab contents?
All you need to issue to fill the editor is
tinymce.get('your_editor_id').setContent('This is my string');
I can set focus for pretty much any type of control with:
var f = dojo.byId('#{id:NotInvitedMsg}');
if (f != null)
f.focus()
But this does not work on rich text controls at least the way I want. I assume it is setting focus but since the rich text control is made up of multiple components, the edit area is not getting the focus. Is there anyway to set the focus to the edit area?
OpenNTF finally responded for me and I found this:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=focus-on-ckeditor-rich-text-field
Works great!
It would have been nice if the poster put a little more effort into documentation.
try
try {
var el = dojo.query('div[id*="yourid"]');
var node = el[el.length-1];
setTimeout(function() { node.focus(); }, 500);
//node.focus();
} catch (e) { }