Develop Reference

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 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())
}

How to get the desired value for lat,long to display only the required portion of the map with Leaflet.js?

I am trying to display a portion of a map with this amount of code:-
<div id="mapid" style="height: 280px; width: 1143px;">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var mymap = L.map("mapid").setView([5, 120], 13);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: '© OpenStreetMap contributors',
}).addTo(mymap);
</script>
</div>
But that displays this portion of the map:-
But I am trying to get this portion of the map:-
is there any tool I can optimize my code to do so:-

You can set the view of the map with: map.setView([lat,lng],zoom)
For your example: mymap.setView([-3.687845, 113.776067], 4);
Or you can set the bounds (top left corner and right bottom corner) of the map, so the map is calculated what is the best zoom to contain the bounds.
var bounds = L.latLngBounds([6.884470, 94.897447],[-13.549102, 154.879214])
mymap.fitBounds(bounds)
But to answer your question, you can get the latlng when you click on the map with:
map.on('click',function(e){
console.log(e.latlng);
});

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
]
});