Leaflet adding an offset to marker - leaflet

I am getting the center of a leaflet feature to show its label.
Then, I am specifying an offset when binding the label so it appears upper and righter.
The thing is that i need to add the offset in the entryJSON.getBounds().getCenter() code.
Is there a way of adding an offset in a leaflet latlong object? ( I can imagine something like entryJSON.getBounds().getCenter().offset([-10, -57]) but this is not working...)
var marker = new L.marker(entryJSON.getBounds().getCenter(), { opacity: 0.01 });
marker.bindLabel('whatever here', {noHide: true, className: "info", offset: [-10, -57] });

The label's offset property works with pixels. A L.LatLng object works with coordinates not pixels. What you could do is use the conversion methods of L.Map to turn your current coordinate position into a pixel position, change that, and then convert back:
var latLng = L.latLng([0,0]);
var point = map.latLngToContainerPoint(latLng);
var newPoint = L.point([point.x - 10, point.y - 57]);
var newLatLng = map.containerPointToLatLng(newPoint);
Example: http://plnkr.co/edit/LeNqz8?p=preview
Reference: http://leafletjs.com/reference.html#map-latlngtocontainerpoint

a much more easier one: https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});

Related

I'm tring to code to get a popup marker on my leaflet map when I double click on the map

I want to get a popup marker(by image) on my map every time I double click on the screen. Every time I try to copy other's code, it won't work. Can someone help plz?THE MARKER NEEDS TO BE AN IMAGE!
I try to copy other's code, but it won't work. I'm still new in this line of work, so I don't know really how to do it on my own.
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
map.on('dblclick',(e)=>{
L.marker(e.latlng).addTo(map).bindPopup('Hello World').openPopup()
})
Demo: https://plnkr.co/edit/u7QL15wYzLprVwhP
Custom icons: https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 95], // size of the icon
iconAnchor: [22, 94],
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

Leaflet js, width of popup does not increase when using maxWidth

Using the below L.popup code, I would have thought the popup would expand width to match the provided image. Seems the width of the popup is still 51 instead of 100 or 300. Why doesnt the popup change the width?
var waterway = L.icon({
iconUrl: '/user_public/ski/images/waterway-canal-icon.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -30]
iconAnchor
});
var popup = L.popup({
maxWidth: '400'
})
.setLatLng( [34.653791786519115, 138.80018854141235] )
.setContent('<img src="http://www.fillmurray.com/100/150" />')
.openOn(map);
L.marker([34.653791786519115, 138.80018854141235],
{icon:waterway}).addTo(map).bindPopup(popup);

Leaflet : how to add color to markers when using a geoJson layer?

I've searched everywhere, or almost, on the web to find a solution to add color to markers to a leaflet map when using geoJson, but in vein. So here I am today asking you how to achieve this little miracle ?
[Here]1 is my map. As you can see, all the markers have the default color, blue. I would like 3 more colors.
I've managed to make the leaflet markercluster plugin work. I was wondering how to make color-markers work.
Thank you all !
You have to set the icon for each marker:
You have to know a way how to differ the markers, so that you know which marker needs which icon. I used for this the value in the feature.properties.icon, this is a custom value
L.geoJSON(someGeojsonFeature, {
pointToLayer: function(feature, latlng) {
var _icon = L.icon({
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
if (feature.properties.icon == "black") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png'
} else if (feature.properties.icon == "gold") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png'
} else if (feature.properties.icon == "green") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png'
}
return L.marker(latlng, {
icon: _icon
});
}
}).addTo(map);

leaflet.js (using geojson data) country labels incorrect

I'm using leaflet.js (with geojson) to display a map. [Removing some of the code code to make it more concise].
$.getJSON('./api/map/data', function(data){
let minZoom = 2.25
let defaultZoom = 2.25
let map = L.map('map', {
minZoom: minZoom,
zoomSnap: 0.1
}).setView([43, 0], defaultZoom);
let onEachFeature = (feature, layer) => {
var label = L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'countryLabel',
html: feature.properties.name,
iconSize: [0, 0]
})
}).addTo(map);
};
L.geoJson(data, {
clickable: false,
style: {},
onEachFeature: onEachFeature,
}).addTo(map);
I used this website to download vector maps. Some of the labels are clearly incorrect (and some of them are almost correct). On inspection it seems like some of the lat/longs are not correctly set (or so it seems). Any feedback on how i could make this show up correctly? It would be great if i could come up with labels such that they fit the country borders (meaning maybe add country code wherever necessary).
The problem is connected with your label options. At this moment, your icon position pointing to left top corner of your label and you need to set offset to move label to the center of coordinates. Property that might help you is iconAnchor (see leaflet docs)

Leaflet clustering with custom markers

I´m just starting with leaflet. My question is how can I cluster custom markers which where added to the map like this
var LeafIcon = L.Icon.extend({
options: {
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
popupAnchor: [-3, -10]
}
});
var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'});
L.marker([51.5, -0.071], {icon: greenIcon}).bindPopup("<p>ok</p><p>tada</p>.").addTo(map);
L.marker([51.5, -0.073], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.5, -0.076], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
I´m struggling adding this to a MarkerClusterGroup.
Please find a working fiddle here: http://jsfiddle.net/6uovronb/
thanks!
I updated your fiddle and added your markers to a marker group.
Here's some sample code:
var markers = new L.MarkerClusterGroup();
markers.addLayer(L.marker([51.5, -0.071], {
icon: greenIcon
}).bindPopup("<p>ok</p><p>tada</p>."));
On a slightly unrelated note, I've never used marker cluster but that's a pretty slick leaflet plugin.