I would need some information on list markers:
how can I change the opacity of the list and also the background color
how can I set the overflow so that if the markers in the list increase, they scroll through the
scrollbar?
Thanks
This is clearly not a leaflet element, to change the transparency of the object that you specified, you most likely need to change these properties in the css, try using DeveloperTools in the browser to find where this object takes the properties (transparency) from and you will know how to change it correctly.
Example
If I understand your question correctly, here is an approximate way to do what you ask in the first part of the question. Show your code what it looks like now.
.className {
background: white;
}
let marker = L.circle([50.0], [40.0]], {opacity: 1}).addTo(map),
marker.className = "className";
no I don't mean the transparency of the single marker but of the list, I send a photo in which the list is circled.
I don't know in which part of the library to act to give properties to this list element.
Related
I am following this example:
https://docs.mapbox.com/android/maps/examples/symbol-layer-info-window/
Also here:
https://github.com/mapbox/mapbox-android-demo/blob/master/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/dds/InfoWindowSymbolLayerActivity.java
It is loading a number of points with descriptions from a file.
On line 271:
String geoJson = loadGeoJsonFromAsset(activity, "us_west_coast.geojson");
What I need is to do the same dynamically. I have the information already as features in the map. I can get Title and Description from there. What I need is to use GenerateViewIconTask and setUpInfoWindowLayer when this event is triggered: onMapClick.
So basically a user taps on the map, I get the coordinates and search in the map's features, get the lat/lng, title and description and show up a callout on the map.
I can handle tapping, getting the map's feature, extracting title and description. What I need to do to finish with showing a nice callout on this location with title and description.
Sorry for the late response. You can either show a label by setting the textfield property or (according to the docs) create an info window by setting the iconImage property to a string, like iconImage("{title}").
Sadly I've rarely used the latter as it never worked for me.
I'm reading an imageOverlay URL from an ArcGIS webserver that uses the leaflet getBound() coordinates as part of the URL (we have large maps that are filtered for the current window 'extent'). Apologies for not including the actual path (I'm working with sensitive client data). Eg:
http://myarcgiswebserver.com/MapServer/export/dpi=96&format=png32&bbox=27.119750976562504%2C-31.194007509998823%2C32.39044189453126%2C-29.692824739380754&size=1719%2C434
[bbox] = current imageBounds
When dragging my map the imageOverlay url is updated correctly but my leaflet window is no longer aligned to the imageBound values that were set when first adding the imageOverlay which results in a skewed output (this is my assumption):
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Am i approaching this problem incorrectly or would the introduction of a function to update the current imageBounds resolve this? Perhaps not a new function but the expansion of setUrl with additional parameters...?
Many thanks for any feedback...
As #ghybs pointed out, your use case might be better served by using the WMS
interface of your ArcGIS server.
Anyway, you say
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Well, that glitch is due to you probably doing something like:
Remove old overlay
Add new overlay
Wait until the image is received from the network
Wait one frame so the new overlay is shown
and instead you should be doing something like:
Add new overlay
Wait until the image is received from the network
Remove old overlay
Wait one frame so the new overlay is shown
The problem is just the async wait and the possible race conditions there, but should be easy to hack together, e.g.:
var activeOverlay = null;
var overlayInRequest = null;
map.on('moveend zoomend', {
// If we are already requesting a new overlay, ignore it.
// This might need some additional debouncing logic to prevent
// lots of concurrent requests
if (overlayInRequest) {
overlayInRequest.off('load', showOverlay);
}
overlayInRequest = L.imageOverlay( computeUrl( map.getBounds() ), myOverlayOptions );
overlayInRequest.on('load', showOverlay);
});
function showOverlay(ev) {
activeOverlay.remove();
activeOverlay = overlayInRequest;
activeOverlay.addTo(map);
overlayInRequest = undefined;
}
If you use an ImageOverlay but change its url dynamically, with a new image that reflects a new bounding box, then indeed that is the reason for the behaviour you describe: you display an image that has been generated using a new bbox, but positioned in the initial bbox, since the image overlay remains at the same geographical position on the map.
Instead, it sounds to me that you should use a TileLayer.WMS.
It would automatically manage the bounding box update for you. You may need to find the correct options to fit your service provider required URL syntax, though.
Example: http://playground-leaflet.rhcloud.com/yel/1/edit?html,output
In Leaflet, is it possible to define a marker or polyline with {clickable:false}, so that a click is passed through to whatever lies beneath - be it the map or a clickable geometry object?
At the moment I solve this problem by making the marker/polyline clickable and passing the event onwards myself. But this leads to the mouse cursor always showing as the hand symbol. Ideally, the mouse cursor should look like the normal pointer or the hand, depending on whether what is beneath the marker/polyline is clickable.
This may not be the answer you are looking for, but you can use featureGroups to have all of your clickable polylines come to the front so that the actions are surfaced.
var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();
updated fiddle
Also if you can afford to know your lines before hand, correct ordering of when you add the lines it will work as well.
I know this is not ideal but it suited my situation just fine, so it might be good for you as well.
This hides the icon and brings it back after a second using mouseenter and mouseleave events:
$('.leaflet-marker-icon').mouseenter(function() {
$(this).hide();
});
$('.leaflet-marker-icon').mouseleave(function() {
$(this).delay(1000).show(0);
});
I was studying the jQuery UI Sortable widget and it said that all callback functions receive a ui object. Two of its properties are ui.helper nad ui.item. ui.helper is mentioned to be mostly a clone of ui.item, but I can't get the significance of calling it 'helper'. Also, the offset and position properties are defined in terms of the helper and not the item. What's the difference between the two ?
One of the answers mention that the helper fills the void, but the I read in the docs that the helper element is "used for dragging display". What exactly is this helper element and why is it named so?
From what I understand ui.helper is a "clone" of the ui.item. It is cloned so you can edit it with css and make it look like whatever you want it to look like while you are dragging it and it won't effect the original ui.item. So if you had a box and while it was being dragged you wanted it to turn into a blue box with curved edges but only while it was dragging you can by modifying ui.helper.
The helper is the element that fills the void (with visibility: hidden) when the item is dragged.
I would like to put a shadow around any given text, or make the text more anti-aliased looking.
For example lets say I'm running a simple text such as:
var titleName = R.text(x+200, y-75, "Lorem Ipsoup de jour")
.attr({font: '75px Helvetica, Arial', opacity: 1, fill: "#dfe6ec"})
The text is somewhat chunky looking at that size, and doesn't blend well against a background. Is there a way I can create a drop-shadow effect (with alpha channel, ideally)?
In SVG a text shadow effect isn't as simple as with CSS3, but it's reasonably straightforward using a filter. You can't use that example as is in Raphaël because it has no support for groups, but you might be able to create the filter definition in an external file and then apply it with:
.attr({filter: "url(filters.svg#dropShadow)"});
--edit
I've had a chance to give it a try and it doesn't work because filter isn't recognised by attr, however it does work (in Firefox) if you grab the node and use a regular DOM setAttribute method.
var t = paper.text(100, 100, "Raphaël\nkicks\nbutt!");
t.node.setAttribute("filter", "url('filters.svg#dropShadow')");
Chrome doesn't apply the drop shadow, and Opera blurs the entire element. It almost certainly won't work in IE because that'll be VML. Example here.
I know this is an old question, but to help anyone else searching for this you can try Element.glow([glow]) to get a shadow effect. http://raphaeljs.com/reference.html#Element.glow