I have a mapbox marker pop up and i want to remove the "x"(close) symbol as it is over my text. I have searched and couldn't find a solution for this. Thanks for reading.
This is how it looks now.
Set closebutton = false
Like:
this.#popup = new Popup({
closeButton: false,//<----
closeOnClick: false,
closeOnMove: true,
maxWidth: "auto"
});
Read here
Related
Just a quick question, if anyone has ever replaced the Mapbox default marker with a Maki icon. I've only seen examples of using Maki icons for point tilesets/layers, but I'm wanting to use it for non-tileset features, specifically replacing the marker that adds after geocoding, at the location of the address just geocoded.
Or, trying to find something that is similar to Google Maps symbols below. Any suggestions appreciated.
var pinImage = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ff4b00',
fillOpacity: .9,
scale: 5,
strokeColor: '#CDDC39',
strokeWeight: 0,
strokeOpacity: .5
}
The MapboxGeocoder control has a marker option https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#parameters which controls the marker placed on the map when you select a result.
There is an example at https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ to create a Marker with a custom icon.
So you could create an HTML Element which contains either an SVG or PNG icon from Maki and use that as your element in your custom Marker passed to the MapboxGeocoder control.
I think this sample is what you are looking for Use a custom render function with a geocoder
It allows you to add a custom render function including the icon...
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'poi',
// see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
render: function(item) {
// extract the item's maki icon or use a default
var maki = item.properties.maki || 'marker';
return (
"<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/#mapbox/maki#6.1.0/icons/" +
maki +
"-15.svg'><span class='geocoder-dropdown-text'>" +
item.text +
'</span></div>'
);
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);
This is a subject based on "jqGrid - Change filter/search pop up form - to be flat on page - not a dialog" .
I've made the search form to be flat based on the subject , but right now I want not to show always on page , I want to show it only when the user press Search button from the jqGrid.
Can anyone give me an hint or solution how to do that, please?
#Oleg can you help me with that , please?
Thanks
Th solution could be very close to the old one. You can use the following options of the searching dialog:
overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
var $searchDialog = $form.closest(".ui-jqdialog"),
$gbox = $(this).closest(".ui-jqgrid");
$searchDialog.insertBefore($gbox);
$searchDialog.css({
position: "relative",
zIndex: "auto",
float: "left"
})
$gbox.css({clear:"left"});
}
Other options (like closeOnEscape: true, closeAfterSearch: true, closeAfterReset: true, searchOnEnter: true, searchOperators: true and other) can be chosen depend on your preferences.
The demo displays the searching dialog like
If you prefer to use Bootstrap CSS instead of jQuery UI CSS then one should add some additional lines:
overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
var $searchDialog = $form.closest(".ui-jqdialog"),
$gbox = $(this).closest(".ui-jqgrid");
$searchDialog.insertBefore($gbox);
$searchDialog.css({
position: "relative",
zIndex: "auto",
padding: 0,
float: "left"
});
$searchDialog.children(".modal-dialog").css({
marginTop: 0,
marginBottom: 0
});
$searchDialog.find(".modal-content").css({
boxShadow: "none"
});
$gbox.css({clear:"left"});
}
See the demo which displays:
I'm trying to create a popup that stays open until I click the x in the top right corner to close it down. What is the best way to do this? My code is below, thanks!
//pop up code
//create custom icon
var newicon = L.icon({
iconUrl: 'logo.png',
})
// creating marker
var marker = L.marker(new L.LatLng(41.77, -87.6), {
icon: L.mapbox.marker.icon({
'marker-color': 'ff8888'
}),
icon: newicon,
draggable: true,
}).addTo(map);
// bind popup to marker
marker.bindPopup("I am a text that will stay open until closed").openPopup();
New solution, the old one doesn't seem to work:
var new_popup = L.popup({"autoClose": false, "closeOnClick": null});
marker.bindPopup(new_popup);
Use:
var newpopup = L.popup({ closeOnClick: false }).setContent("I am a text that will stay open until closed");
marker.bindPopup(newpopup);
To get poups to open, you need to start by specifying closePopupsOnClick: false inside L.map() so that no popups close by default
L.map('map',
{
...
closePopupOnClick: false
}
Then, for individual popups that you do want to close, you can close them inside click()
map.on('popupopen', function (e) {
//save e.popup to an array or something
}
map.on('click', () => {
//close the popups you want to by calling map.closePopup(popup);
});
I try to build a map with openlayers3 with a group of markers and popups. The markers and the popups work so far, but when I click on one marker (popup shown) and then -without clicking in the map again- on another one, it shows a popup with the same content as the first one. I have already done research, but can't find something helpful. So here's the part for my popups:
//popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
Hope somebody can help me. Thanks!
I was having the same issue and found my solution here https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers
Try changing your
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
to
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-content', feature.get('information'));
I've made an example for you. Take a look!
You gotta "write" some content on each marker.
http://embed.plnkr.co/hhEAWk/preview
Is there a way to put images on an infobox in bing maps? Thanks everyone.
Yes, supply your own html via the htmlContent Property. You can make the infobox appear however you'd like.
You can add HTML through the htmlContent Property, which is added in the options hash. For example:
var infoboxOptions = {
width :200,
height :100,
showCloseButton: true,
zIndex: 0,
offset:new Microsoft.Maps.Point(10,0),
showPointer: true,
htmlContent:'<img src="source/of/image></img>"'
};