Develop Reference

BoatMarker with Leaflet, get a blank map when I try to add BoatMarker through python panel reactive.HTML

So I have been trying to place BoatMarker or WindBarbs to a leaflet map but when I put this code in, it returns a blank map. If I remove these variables the map will suddenly show up. I have no idea why this does not work, as there arent any errors or messages that pop up. I've put my code below, mostly taken from Awesome Panel example (https://awesome-panel.org/reactive_leaflet):
import panel as pn
class LeafletMap(pn.reactive.ReactiveHTML):
_template = """<div id="mapid" style="height:100%"></div>"""
__css__ = ["https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"]
__javascript__ = ["https://unpkg.com/leaflet#1.7.1/dist/leaflet.js", "https://unpkg.com/leaflet.boatmarker/leaflet.boatmarker.min.js"]
_scripts = {
"render": """
var mymap = L.map(mapid).setView([50, 0], 6);
state.map=mymap
var tileLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFyY3Nrb3ZtYWRzZW4iLCJhIjoiY2s1anMzcG5rMDYzazNvcm10NTFybTE4cSJ9.TV1XBgaMfR-iTLvAXM_Iew'
}).addTo(mymap)
var marker1 = L.marker([48, -2], name='marker1');
var marker2 = L.marker([50, 0], name='marker2');
var marker3 = L.marker([52, 2], name='marker3');
var boatmarker = L.boatMarker([48, -2], name='marker4');
var layer1 = L.layerGroup([marker1, marker2, marker3, boatmarker]);
layer1.addTo(mymap)
""",
# Need to resize leaflet map to size of outer container
"after_layout": """
state.map.invalidateSize();console.log("invalidated");
""",
}
leaflet_map = LeafletMap(min_height=700, sizing_mode="stretch_both")
pn.Row(leaflet_map, sizing_mode="stretch_both").servable()
I've tried the same method for other leaflet custom markers and markings, like wind barbs (https://github.com/spatialsparks/Leaflet.windbarb/blob/master/README.md). The same issue also occurs.

Hover over show of Leaflet Marker from control panel

I have a map with different markers. The markers could be selected from the control panel. But, I would like to show the preview of the markers, when we hover over the marker tab in control panel.
If possilbe, the hover effect similar to the following jQuery example
Can anyone help me how this could be acheived? Following is the code:
// Map intialization
var map = L.map('map').setView([51.505, -0.09], 12.5);
// OSM layer
var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// OSM HOT
var OpenStreetMap_HOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
});
var singleMarker = L.marker([51.505, -0.09]);
// Layer controller
var baseMaps = {
"OpenStreetMap": OSM,
"OSM HOT": OpenStreetMap_HOT
};
var overlayMaps = {
"Marker": singleMarker
};
var layerControl = L.control.layers(baseMaps, overlayMaps, {
collapsed: false,}).addTo(map);
JSFiddle Example

Can you something like grabbing the event of the marker? Like so:
$('.leaflet-pane.leaflet-marker-pane').hover(function(){
alert('your code here?');
});
And from there call the tooltip event to show next to the marker?

Leaflet map reload onclick

I have a gallery of image thumbnails and a image viewer. Each image has different #id has lat and long attached to it. I am triggering series of onclick events on clicking the thumbnail. The imagename, lat and long info is stored in a mysql table. The following are the functions I have written sofar.
function clickedImage(clicked_id) {
//series of functions
$.post("getLatLong.php",{"clickedimag":clickedImg},function(data){
var ll = JSON.parse(data);
var lat = parseFloat(ll[0]);
var long = parseFloat(ll[1]);
var pname = ll[2];
localStorage.setItem('lat',lat);
localStorage.setItem('long',long);
localStorage.setItem('cpname',pname);
//alert([lat,long]);
});
//Series of functions
}
All my other functions are working including I am able to save lat, long info into localStorage. The alert in the above function, clearly pops up with the lat and long attached to the image. To render the map, I am using the template given in the leaflet page.
$(function(){
var la = localStorage.getItem('lat');
var lon = localStorage.getItem('long');
var cpname = localStorage.getItem('cpname');
var mymap = L.map('mapid').setView([la,lon], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Ima$
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'my.access.token'
}).addTo(mymap);
var marker = L.marker([la, lon]).addTo(mymap);
marker.bindPopup("<b>" + cpname +"</b>").openPopup();
});
The above code works and renders the map correctly, however, only when I refresh the page. It is not changing the map asynchronously. I have tried this function too:
function getMyMap(la,lon) {
var la = localStorage.getItem('lat');
var lon = localStorage.getItem('long');
var mymap = L.map('mapid').setView([la,lon], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Ima$
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'myaccesstoken'
}).addTo(mymap);
}
and called this function inside my onClick event. I am getting the same result.
HTML
<div class="rhsbar" id="rhsbar" style="overflow:hidden;display:flex;flex-direction:column;">
<div id="mapid" >Loading map</div>
</div>
var h = $("#rhsbar").height();
var w = $("#rhsbar").width()+100;
document.getElementById("mapid").style.height=h+"px";
document.getElementById("mapid").style.width=w+"px";
How do I update the map with new coordinates without refreshing the page.

What you need is:
your_mapid.fitBounds(your_mapid.getBounds());
It will do a soft refresh of the map whenever something changes.

Using openstreetmap with Bike Layer

I would like to use the bike layer like this one:
https://www.openstreetmap.org/#map=14/37.7874/-2.9519&layers=C
But I don´t know which url to use. At the moment I have just the default one:
var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap'
}).addTo(map);
Any ideas?
Code from: https://github.com/mpetazzoni/leaflet-gpx

Load markers before map

I'm trying to reproduce Foursquare's web user interface.
What I noticed is that on the tip map, the markers are load way before the map was loaded.
is this possible with leaflet ?
With this piece of code, I don't think it's possible
L.marker([lat, lng], {icon: iconMarker}).addTo(map);
How are they doing it?

I think I know how:
They're loading the Tiles after positioning the markers, something like :
markers = L.marker([lat, lng], {icon: iconMarker}).addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v4/MapID/{z}/{x}/{y}.png?access_token=Token').addTo(map);

Ofcourse, just as long as the Leaflet library is loaded, you can create markers, layers, polygons, whatever. There doesn't have to be an instance of L.Map to do this.
// Define marker first
var marker = L.marker([0,0]);
// Define map later
var map = L.map('map', {
'center': [0, 0],
'zoom': 1,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
// Add afterwards
marker.addTo(map);
Working example on Plunker: http://plnkr.co/edit/0zaogf?p=preview
Or include the marker when defining the map:
// Define marker first
var marker = L.marker([0,0]);
// Define map later include marker
var map = L.map('map', {
'center': [0, 0],
'zoom': 1,
'layers': [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
}),
marker
]
});