Hover over show of Leaflet Marker from control panel - javascript

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?

Related

Leaflet Markercluster with GeoJson and Leaflet Ajax

Referring to the examples in a previous question: Leaflet MarkerCluster with GeoJson
I am trying to use markercluster with leaflet after the geojson data has been loaded, I can see the data is loading along with the markercluster markers from the console but it looks like the final map.addLayer is failing, the browser just seems to hang when it gets to this point.
I am able to load up and display the map points after the geojson is loaded with geojsonAjax.addTo(map); so this part is working.
the leaflet library and plugins are loaded in the following order:
leaflet.js
leaflet.ajax.min.js
leaflet.markercluster.js
// Add basemap tiles and attribution.
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
});
// Create map and set center and zoom.
var map = L.map('map', {
scrollWheelZoom: false,
center: [47.5, 10],
zoom: 5
});
// Add basemap to map.
map.addLayer(OpenStreetMap_Mapnik);
var geojsonAjax = new L.GeoJSON.AJAX("/campaign-results/geojson", {
pointToLayer: function(feature, latlng) {
return new L.marker(latlng);
},
});
//geojsonAjax.addTo(map);
//map.addLayer(geojsonAjax);
//console.log("data loaded:", geojsonAjax);
var markers = L.markerClusterGroup()
//geojson ajax listener
geojsonAjax.on('data:loaded', function () {
// Add the cluster data after the geojson layer has loaded.
markers.addLayer(geojsonAjax);
console.log("add markers:", markers);
map.addLayer(markers);
});

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

Leaflet Polygon issue

I created polygon with leaflet, i am very sure that my coordinates are correct, i have 2 areas, when i run per area the map is correct, but when i join these areas into one page, map shows incorrect, please help,
<script>
var map = L.map('map').setView([-8.096872,112.1459743], 14);
var poli_1 = [["-8.09897779904717","112.14180430942015"],["-8.099084017318027","112.14195451312499"],["-8.098860958916857","112.14218518310027"],["-8.098643211310808","112.14239439540343"],["-8.09858479120135","112.14249095492796"],["-8.09854298308181","112.14252045922713"],["-8.098479252037022","112.14252314143614"],["-8.09840755459957","112.14254728131728"],["-8.09838365545092","112.14261433654265"],["-8.098359756300846","112.14272430711226"],["-8.098322579842367","112.14280477338271"],["-8.098293369765434","112.1429120617433"],["-8.098258848762683","112.14293888383345"],["-8.098213705908488","112.1429657059236"],["-8.09817918489892","112.14297911696868"],["-8.098134042035781","112.1429844813867"],["-8.098099654784006","112.14299628268468"],["-8.098030612742347","112.14299360047566"],["-8.097988125326221","112.14299091826665"],["-8.097935016049735","112.14299091826665"],["-8.097826142011076","112.14299091826665"],["-8.097802242827925","112.14295604954945"],["-8.09776241085283","112.14292386304128"],["-8.09773054526993","112.14289435874211"],["-8.097680091425175","112.14286217223393"],["-8.097658847699176","112.14286217223393"],["-8.097613704777705","112.14287826548802"],["-8.09754466265273","112.14287558327901"],["-8.097557796001265","112.14283436536789"],["-8.097461547728516","112.14278975259053"],["-8.097324959221128","112.14264827430445"],["-8.09719484126706","112.14250075280863"],["-8.09714173188596","112.14234518468577"],["-8.097123143600927","112.1420984214564"],["-8.097067378740666","112.1418838447352"],["-8.09689742864273","112.14156197965342"],["-8.096445356223212","112.1406644982846"],["-8.096241253451407","112.1402108075272"],["-8.096850698600928","112.13999765956875"],["-8.097132124121744","112.13992064439971"],["-8.097437475813408","112.1398123993808"],["-8.097637949962461","112.13975291245329"],["-8.097791296302026","112.13970171131744"],["-8.097997751858369","112.13962905250948"],["-8.09852495219415","112.14079714723526"],["-8.098740753849725","112.14132218599984"]];
var polygon = L.polygon(poli_1, {color: 'red'}).addTo(map);
var poli_2 = [["-8.09827779904717","112.14180430942015"],["-8.099084017318027","112.14195451312499"],["-8.098860958916857","112.14218518310027"],["-8.098643211310808","112.12239439540343"],["-8.09858479120135","112.14249095492796"],["-8.09854298308181","112.14252045922713"],["-8.098479252037022","112.14252314143614"],["-8.09840755459957","112.14254728131728"],["-8.09838365545092","112.14261433654265"],["-8.098359756300846","112.14272430711226"],["-8.098322579842367","112.14280477338271"],["-8.098293369765434","112.1429120617433"],["-8.098258848762683","112.14293888383345"],["-8.098213705908488","112.1429657059236"],["-8.09817918489892","112.14297911696868"],["-8.098134042035781","112.1429844813867"],["-8.098099654784006","112.14299628268468"],["-8.098030612742347","112.14299360047566"],["-8.097988125326221","112.14299091826665"],["-8.097935016049735","112.14299091826665"],["-8.097826142011076","112.14299091826665"],["-8.097802242827925","112.14295604954945"],["-8.09776241085283","112.14292386304128"],["-8.09773054526993","112.14289435874211"],["-8.097680091425175","112.14286217223393"],["-8.097658847699176","112.14286217223393"],["-8.097613704777705","112.14287826548802"],["-8.09754466265273","112.14287558327901"],["-8.097557796001265","112.14283436536789"],["-8.097461547728516","112.14278975259053"],["-8.097324959221128","112.14264827430445"],["-8.09719484126706","112.14250075280863"],["-8.09714173188596","112.14234518468577"],["-8.097123143600927","112.1420984214564"],["-8.097067378740666","112.1418838447352"],["-8.09689742864273","112.14156197965342"],["-8.096445356223212","112.1406644982846"],["-8.096241253451407","112.1402108075272"],["-8.096850698600928","112.13999765956875"],["-8.097132124121744","112.13992064439971"],["-8.097437475813408","112.1398123993808"],["-8.097637949962461","112.13975291245329"],["-8.097791296302026","112.13970171131744"],["-8.097997751858369","112.13962905250948"],["-8.09852495219415","112.14079714723526"],["-8.098740753849725","112.14132218599984"]];
var polygon = L.polygon(poli_2, {color: 'yellow'}).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([-8.096872,112.1459743]).addTo(map)
.bindPopup('Test Map')
.openPopup();
</script>

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

Categories

Resources