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.

leaflet geoman - load pre-existing polygon to map

I have the following jsfiddle and wonder how can I click the dummy button add the predefine polygon coordinates?
[[[7.43067, 49.109838], [7.43067, 50.331436], [10.135936, 50.331436], [10.135936, 49.109838]]]
My javasript:
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([50, 8], 6).addLayer(osm);
// add leaflet.pm controls to the map
map.pm.addControls();
map.on('pm:create', ({
workingLayer
}) => {
self_drawn = map.pm.getGeomanDrawLayers(true)
console.log(self_drawn.toGeoJSON())
});
function loadSquare()
{
console.log("ok load the square");
}
My html
<div id="map"></div>
<button ion-button class="button-action" onclick="loadSquare()" block>Load Square!</button>
Before:
After click the Load Square button, get a gemoan with:

Use the default L.GeoJSON object from Leaflet.
function loadSquare(){
console.log("ok load the square");
L.geoJSON(data).addTo(map); // data = console.log(self_drawn.toGeoJSON())
}

Why is my icon showing up as an empty square with Leaflet JS?

I'm trying to make my point marker have a picture icon, but for some reason, it's showing up on my map like this:
I've looked at the documentation on leaflet's website and what not but have had no luck. It's probably something pretty simple that I'm missing or brain farting on haha. Any help is much appreciated. Let me know what other code you might need to address the problem. TIA!
Here's my script
<script>
//create variable to hold the map element, give initial settings to map
var map = L.map("map", {
center: [38.1, -98.583333],
zoom: 4,
});
//add OSM tile layer to map element
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
{
attribution:
'© OpenStreetMap contributors © CARTO',
subdomains: "abcd",
maxZoom: 19,
}
).addTo(map);
var logo = L.icon({
iconUrl: "imgs/patrickLogo.png",
iconSize: [20, 20],
});
L.marker([40.308746567390294, -105.08229135535235], { icon: logo })
.addTo(map)
.bindPopup("Berthoud, CO");
</script>
UPDATE: It's a 404 error. What does that mean and how can I fix it?
RESOLVED: changed my image path to an absolute path and it worked! Thanks, y'all.
var logo = L.icon({
iconUrl:
"https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
iconSize: [20, 20],
});

how to set leaflet marker to center of div tag in leafletjs

I want the marker to be in the center of the map, but it is wrong.
I read the rest of the articles, but my problem was not solved.
var map = L.map('map').setView([lat, lng], 18);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk', {
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk',
attribution: 'nemajoo',
watch: true
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [28, 60],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'images/mrk.png'});
var center = map.getCenter();
var marker = L.marker([center.lat, center.lng],{icon: greenIcon}).addTo(map);

The problem here could be in any of the 3 configurations given we don't have the image:
mrk.png has some spacing inside the image, this can be fixed with any image editing tool.
the options object, on the anchor tag moves the image, making it look like it's not centered.
When you set the center, as far as I can see, you first get the center from the map, then use this center to position the icon, this is nicely done but markers with distant zooming don't represent it's center accurately.
In resume:
The problem is on the png or the anchor configuration, modify those values and try again.
If this does not work you can upload a sample minimal project so we can check (don't upload api keys or similar)

Leaflet custom marker icon scale to zoom

I use Leaflet to draw an OpenStreetMap and attach it with a custom icon marker
var mymap = L.map('mapid').setView([x, y], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: ID,
accessToken: accessToken
}).addTo(mymap);
var busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
// shadowUrl: 'images/leaflet/marker-shadow.png',
iconSize: [12, 12],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
// shadowSize: [41, 41]
});
var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);
mymap.on('zoomed', function() {
var currentZoom = mymap.getZoom();
busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
iconSize: [mymap.getZoom*2, mymap.getZoom*2],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
});
marker.setIcon(busIcon);
});
Now I want to resize my marker icon depending on zoom level. There's something wrong in my above code. What should I do? If marker is a CircleMaker, there is a setRadius function for me to handle this with ease. But in this case the marker is a custom icon, I tried as above and failed. How to fix it?

As YaFred said, there were some typos like zoomend, but also mymap.getZoom that should be mymap.getZoom()
I made a new answer to this old question to propose a more efficient solution. You can add a className to your icons (see leaflet documentation).
This means we can edit the height and width of the icon through css! In your zoomend function, instead of creating a new icon, simply call this JQuery:
var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});
For larger amounts of markers, this will significantly improve your performance as mentioned in this stackoverflow question:
Leaflet custom icon resize on zoom. Performance icon vs divicon

You have a typo: zoomed should be zoomend
map.on('zoomend', function() {
});
http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview
Apart from that, I would create and keep the icons out of the zoomend callback.
As it is, your code is creating an icon each time zoom is changing.