I have a leaflet l.control info popup on the top right corner of my map.
When I move one of my custom marker to the top right behind the l.control and release the mouse button, I am no more able to select the marker (because the l.control div is in the foreground)
Is there a way to prevent the user from dragging a marker behind the l.control div ?
I can't move the map to make the marker visible again as I plan to fix the marker position based on the container position (so if you move the map the marker will stay at the same place)
Thanks
I think easiest way to disable marker draggable, when the mouse enter the div info.
If your final goal is to fix the marker position to the map's center, just don't make it draggable and use L.Map's move event to update the marker when the map gets moved?
var map = new L.Map('leaflet', {
'center': [52.378333, 4.9],
'zoom': 12,
'layers': [
L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
})
]
});
var marker = new L.Marker(map.getCenter()).addTo(map);
map.on('move', function () {
marker.setLatLng(this.getCenter());
});
Example on Plunker: http://plnkr.co/edit/PnnuMowCXvjRxyPqEj31?p=preview
Related
I have a map with different layers. The user can choose between them with a L.control.layers. Is it possible to add a button that would center the map with all the active layers?
Thanks for any tips,
You can add all your layers to a FeatureGroup and then get the bounds. With that bounds you can center the map with map.fitBounds(bounds):
var fg = L.featureGroup().addTo(map);
layer1.addTo(fg);
layer2.addTo(fg);
....
function centerMap(){
map.fitBounds(fg.getBounds());
}
As button you can use a default html button:
<button onclick="centerMap()">Center Map</button>
I have an animation, which starts like this:
Window.map = new L.Map('map', {
zoomControl: false
});
L.control.zoom({position:'topleft'
}).addTo(Window.map);
//add tile layers
var basemapLayer = new
L.TileLayer('https://{s}.tiles.mapbox.com/v4/github.map-xgq2svrz/{z}/{x}/{y}.png?ac$
token: '.....'
});
And then I am adding feature layers set zoom min and max, and it did not work either. I may hide it, change the position, but when I click on the '+' or the '-' nothing happens.
I am using the default css from leaflet.
I know there is a way to show properties by mouse hove and click event on the map, but my question is how can I show the properties without mouse hover or click event.
I tried using label pane but it's not working in my case.
// show map
mymap = L.map('map_canvas');
// For Label
mymap.createPane('labels');
// This pane is above markers but below popups
mymap.getPane('labels').style.zIndex = 650;
// Layers in this pane are non-interactive and do not obscure mouse/touch events
mymap.getPane('labels').style.pointerEvents = 'none';
var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
}).addTo(mymap);
layer.bindPopup(feature.properties.block_name + '</br>' + feature.properties.DIST_NAME,{
noHide: true,
direction: 'auto'
});
But still, it's not showing by default but it showing when I click on the map.
Please give me some suggestions on how to do it, I already wasted more than 10 days on this single work.
Happy coding.
My function is supposed to display a marker over an existing icon (US Cities) when clicked/selected. The marker is an image file. Then when the user clicks on another icon, the previous marker should disappear.
It seems to work fine at first. The first marker is created when the icon is clicked. When the second icon is clicked, the marker is created and the original marker disappears. When a third icon is clicked, the marker does not appear. The console says "marker is not defined".
Here is my code:
map.on('click', 'usa_cities', function(highlightMarker) {
var markerCoordinates = highlightMarker.features[0].geometry.coordinates.slice();
var markerElement = document.createElement('div');
markerElement.id = 'marker';
// create the marker
new mapboxgl.Marker(markerElement)
.setLngLat(markerCoordinates)
.addTo(map);
map.on('click', 'usa_cities', function() {
marker.remove()
});
}),
Thank you
You don't need to create a new marker each time the user clicks. You can simply call marker.setLngLat(markerCoordinates).
I want to show a single world map and wrap it around so that each area is shown only once on the screen. Please refer the fiddle http://jsfiddle.net/8m13d6vs/
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: false,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
In the above fiddle, wrap is on, but the world map is duplicated. I want a single world map, and on left/right mouse drag, it should wrap around. It should be responsive to the area as well. Is there any way to achieve this? Hope my problem statement is understandable.
There's the Leaflet worldCopyJump option:
var map = L.map('map', {worldCopyJump: true}).setView([0, 0], 1).addLayer(osm);
It defaults to false, but setting this to true will copy the contents of the map over as the user pans beyond the map boundaries.
This sounds like a misunderstanding of the definition of "wrap":
In the context of Leaflet's Tile Layer / Grid Layer option noWrap, it says:
Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.
So it sounds like simply noWrap: true should achieve your objective.
Updated JSFiddle: http://jsfiddle.net/8m13d6vs/3/
BTW you should consider upgrading Leaflet version to 1+