I'm using leaflet to show vehicle marker with a title:
boatMarker = L.vehicleMarker([val.lat, val.lon],
{ color: val.color, title: val.name, active: val.active })
.addTo(map);
In my case, the vehicle name could be very long like "MH-AB 1234, car type, car model (123456789, xyz)" and when showing the name in the map, I just see the middle part like "e, car model (". Is it possible to increase the lenght of the shown title?
Related
I'd like to update a text input in a pyshiny app each time a marker is clicked in an ipyleaflet map widget using the marker's title value. I have been using the marker.on_click() callback to get the title (station_id in this case) from the clicked marker, but I am struggling to dynamically change the text input box with the title text.
A basic working example that I have tried is shown below. The title of each marker is printed to screen from within the callback() function each time it is clicked. However, I can't figure out how to update the ui.input_text's value. The Reactive.Effect function does not seem to be called at all and I'm not sure why. What do I need to change here to update the value in the text input?
from shiny import App, reactive, run_app, ui
from shinywidgets import output_widget, register_widget
import ipyleaflet as ipyl
app_ui = ui.page_fluid(
{"class": "p-4"},
ui.row(
ui.column(
4,
ui.input_text("station_id", "Station ID:", value="Click on a station marker"),
),
ui.column(
8,
output_widget("map_widget")
),
),
)
def get_station_id(_marker):
def callback(*args, **kwargs):
print(_marker.title)
return _marker.title
return callback
def add_stations_to_map(_map, stations):
markers = []
for station in stations:
marker = ipyl.Marker(location=station[0], draggable=False, title=station[1])
_map.add(marker)
markers.append(marker)
return markers
def server(input, output, session):
# Initialize and display when the session starts (1)
_map = ipyl.Map(center=(-33.8, 151), zoom=8, scroll_wheel_zoom=True)
# Add a distance scale
_map.add(ipyl.leaflet.ScaleControl(position="bottomleft"))
register_widget("map_widget", _map)
# add markers and station id clik function
stations = [
[(-33.8, 151), "station_1"],
[(-33.8, 150), "station_2"],
]
markers = add_stations_to_map(_map, stations)
clicked_marker = "Click on a station marker"
for marker in markers:
clicked_marker = marker.on_click(get_station_id(marker))
#reactive.Effect
def _():
ui.update_text("station_id", value=clicked_marker)
app = App(app_ui, server, debug=True)
run_app(app, launch_browser=True, port=0)
You can use a reactive.Value to set your text:
clicked_marker_value = reactive.Value("Click on a station marker")
def get_station_id(_marker):
def callback(*args, **kwargs):
print(_marker.title)
clicked_marker_value.set(_marker.title)
return _marker.title
return callback
#reactive.Effect
def _():
ui.update_text("station_id", value=clicked_marker_value())
I currently have a map loaded, and I have some bars on the map. I would like to include my variable text_toltip[i] in the tooltip so that the coordinates and text of the variable text_toltip[i] are displayed in each bar. how can I do it? I'm new in this library.
I know that there is an attribute called minHeight, which allows to establish a minimum height for the bars, but I would like to establish a maximum predetermined size for the bars and so the other sizes and colors of the bars are calculated. how can I do it?
series: [{
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize:0.05,
minHeight:0.05,
data: data.map(function (item) {
return {
value: [item[0], item[1], item[2]],
label: {
show: false
}
}
}),
shading: 'lambert'
}]
https://plnkr.co/edit/Tdwwk8yKCi0fiY7I3AqK?p=preview
Thank you.
For this question,I read the Echarts's documentation and found a property belonging to "geo3D called "boxHeight" ,which can play the same role as you say "maxheight".I've tested it,no problem.
boxHeight
I am using leafletjs and leafletjs marker clustering to display where my friends live. The problem is that some of them life in a same house, so the coordinates for multiple markers are the same. Issue occurs when there is more than 50 friends living in the same place.
Is there any way, that the markers could be hidden and when a cluster is clicked it would display a table containing all of the names?
My code for adding markers:
export function markersFromData(map, markers) {
return (data) => {
const markerList = [];
data.map((v) => {
const title = v.name;
const marker = L.marker(new L.LatLng(v.latitude, v.longitude), {
opacity: 0,
});
marker.bindPopup(title);
markerList.push(marker);
return markers.addLayer(marker);
});
map.addLayer(markers);
// eslint-disable-next-line
const group = new L.featureGroup(markerList);
map.fitBounds(group.getBounds());
};
}
Map example
Thank you for your time.
A clean solution would be instead of building one marker per data item (i.e. friend), to first group them by matching position.
Then build 1 marker per position, with metadata reflecting the number of items in that position and list of associated names.
Then in the Leaflet Marker cluster group, use the iconCreateFunction to customize the displayed number to sum these number of friends instead of number of child markers.
I am using Leaflet.js to create a map. The data displayed on the map depends on user selection so I instantiate two empty feature groups on map load, one for the values, and one for a color marker behind the value ( color depends on the value ).
if( dHMT.dataColorLayer===undefined ){
dHMT.dataColorLayer = new L.featureGroup({}).addTo(dHMT.map);
}
if( dHMT.dataValueLayer===undefined ){
dHMT.dataValueLayer = new L.featureGroup({}).addTo(dHMT.map);
}
I then add the empty layers to the layer switcher.
dHMT.overlayMapsLS = {
"Bassins ": dHMT.bassinLayer,
"Couleurs ": dHMT.dataColorLayer,
"Données ": dHMT.dataValueLayer
};
Once the user selects data, the featureGroups are filled with the relevant values/markers.
var iconColor = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;border-radius: 50%;height:40px;width:40px;padding-top:9px;background:"+dHMT.siteinfo[x].color+"'></div>"});
var iconColorDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconColor})
.bindPopup(
'Nom : '+dHMT.siteinfo[x].name+'<br>'+
'Numéro : '+dHMT.siteinfo[x].stnm+'<br>'+
'Stid : '+dHMT.siteinfo[x].stid+'<br>'+
'LatLon : '+dHMT.siteinfo[x].lat+','+dHMT.ecartArray[x].lon+'<br>'+
'Valeur : '+dHMT.ecartArray[x].ecart+'<br>'
).on('mouseover', function (e) {
this.openPopup();
}).on('mouseout', function (e) {
this.closePopup();
});
var iconValue = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;height:40px;width:40px;padding-top:9px;'>"+value+"</div>"});
var iconValueDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconValue});
dataColorFeatures.push(iconColorDiv);
dataValueFeatures.push(iconValueDiv);
L.featureGroup(dataColorFeatures).addTo(dHMT.dataColorLayer);
L.featureGroup(dataValueFeatures).addTo(dHMT.dataValueLayer);
Both layers are fine, I have a nice map with a marker layer with colored circles with another layer displaying values over the marker. The goal being to deactivate the colors or the values using the layer switcher.
The problem is that if, for example, I toggle the color layer off, and turn it on again, the colored circles reappear over the values. The desired behavior would be to have them reappear in the original order, behind the values.
You can listen to the overlayadd event on your L.Map instance:
Fired when an overlay is selected through the layer control.
http://leafletjs.com/reference.html#map-overlayadd
When fired you can use the bringToFront method of L.FeatureLayer:
Brings the layer group to the top of all other layers.
http://leafletjs.com/reference.html#featuregroup-bringtofront
map.on('overlayadd', function () {
dHMT.dataValueLayer.bringToFront();
});
I'm following the example here but I don't get to see the text, only the pushpins themselves. What can I be missing?
for (index in centers)
map.entities.push(new Microsoft.Maps.Pushpin(centers[index]),
{ text: "A", visible: true, textOffset: new Microsoft.Maps.Point(0, 5) });
The array centers is just a set of points and, since I get the pushpins to appear at the right locations, I believe that the error is in the options.
Note that I'm trying to reuse the default pushpins as far as I can and intentionally omit the custom icon. In case I have to use a custom icon (which would be a shame), where can I find a set of pushpins looking like the default one (possibly in various colors)?
From bing interactive sdk.
Just delete the line with the custom pin from you pushpinOptions and you will get the default push pin with text.
The error in you code that you pass the pushpinOptions as parameter to map.entities.push method, but the options is a parameter of new Microsoft.Maps.Pushpin method.
var offset = new Microsoft.Maps.Point(0, 5);
var pushpinOptions = { text : '1', visible: true, textOffset: offset};
var pushpin= new Microsoft.Maps.Pushpin(
new Microsoft.Maps.Location(47.6, -122.33),
pushpinOptions);
map.entities.push(pushpin);