I'm creating a map using leaflet js, which has several markers.
The question is, how can I get riseOnHover property to work?
As mentioned in docs:
If true, the marker will get on top of others when you hover the mouse
over it.
So I got a simple code like:
let map = L.map('map').setView([0, 0], 2);
let tile = L.tileLayer('map/{z}/{x}/{y}.png', {
minZoom: 2,
maxZoom: 5,
noWrap: true,
});
tile.addTo(map);
let options = {
riseOnHover: true,
};
let marker = L.marker([0, 0], options);
marker.addTo(map);
But nothing happens. I also tried it with serveral markers at once, in case maybe there should be more than one marker to get riseOnHover to work, but that didn't work either.
I found the solution. Unfortunately, the docs explain riseOnHover property in a way which the reader thinks it is used to rise markers a little in y axis, but in real use, it increases the z-index of the marker which we are hovering.
It will work well if you have several markers which are overlapping each other. Just hover on one of them and you see the magic!
Related
I just work on a JavaScript based map (leaflet is the framework).
The problem is I do not have much experience with maps in HTML and JavaScript.
I want to achieve that the map does not disapper after swiping to the left or right border (or even bot/top). Is there a solution to fix the bounds to the view?
I set it up like this:
var bounds = [[0,0], [750,499]];
var image = L.imageOverlay('map.png', bounds).addTo(map);
map.fitBounds(bounds);
Would be nice if someone has a suggestion to this problem.
Greetings
Tobias
UPDATE:
I found an acceptable solution:
var bounds = [[0,0], [750,499]];
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -1,
maxBounds: bounds,
});
As u can see in the init process of the map i allocate maxBound. With this solution there are not fixed bounds as i asked for, but the map always swipes to it initial point back!
I am using Leaflet 1.0.0-rc.2+e02b5c9. I know the default is rendering all markers, polylines ... from longitude -180 to 180 as screen shot here:
However, I want to show the map as this longitude I want to show at this point (It is middle sea between Japan and US):
but you see all the markers are not rendered on the right side. Even though, If i set
worldCopyJump: true
when I drag to the right, all markers are appeared on the right but they are disappeared on the left and vice versa. Actually, I want they are appeared at the same time.
Any ideas to fix that??
Just make sure that the longitudes of your markers are in the range 0..360 instead of in the range -180..180. See a working example.
i.e. instead of
L.marker([0,170]).addTo(map);
L.marker([0,-180]).addTo(map);
L.marker([0,-170]).addTo(map);
Do something like
L.marker([0,170]).addTo(map);
L.marker([0,180]).addTo(map);
L.marker([0,190]).addTo(map);
In other words, if a longitude is smaller than zero, add 360 to it. You might want to use L.Util.wrapNum(lng, [0,360], true) instead, if you plan to filter all your longitudes at once.
A similar issue has been encountered and reported on the Leaflet Github
The solution is to increase the longitude of your markers if their initial longitude is below 0.
var totalMarkers = markerPositions.length;
for(var i = 0; i<totalMarkers; i++){
var mData = markerPositions[i];
if (mData.lon < 0) {
mData.lon += 360;
}
L.marker([mData.lat, mData.lon]).addTo(map);
}
Another approach is to leverage the Leaflet.RepeatedMarkers plugin, which will display a copy of each marker per 360 degrees of longitude:
Applying this to markers near the antimeridian works as well, e.g.:
var myRepeatingMarkers = L.gridLayer.repeatedMarkers().addTo(map);
L.polyline([[-85,180],[85,180]]).addTo(map);
L.polyline([[-85,-180],[85,-180]]).addTo(map);
myRepeatingMarkers.addMarker(L.marker([0,140]));
myRepeatingMarkers.addMarker(L.marker([0,150]));
myRepeatingMarkers.addMarker(L.marker([0,160]));
myRepeatingMarkers.addMarker(L.marker([0,170]));
myRepeatingMarkers.addMarker(L.marker([0,180]));
myRepeatingMarkers.addMarker(L.marker([0,-170]));
myRepeatingMarkers.addMarker(L.marker([0,-160]));
myRepeatingMarkers.addMarker(L.marker([0,-150]));
myRepeatingMarkers.addMarker(L.marker([0,-140]));
will display something like:
Check out the live example for using Leaflet.repeatedMarkers with markers near the antimeridian.
Thank you all for the help. Actually, I am not using your suggested codes but I got me the idea to fix it.
This is my solution, hope it helpful for others looking for same solution:
Screenshot that was solved
Always display the icon and its copy on the map (on longitude range you want, in my case, it is from 0 to 360)
makeMarkers: (item) ->
markers = []
markers.push(item.makeMarker())
copy_marker = item.makeMarker()
copy_marker.setLatLng( new L.LatLng(copy_marker._latlng.lat, copy_marker._latlng.lng + 360) )
markers.push(copy_marker)
markers
In Item class:
makeMarker: ->
LeafletIcon = L.Icon.extend(
options: {
iconSize: [25, 25],
iconAnchor: [10, 10],
popupAnchor: [0, 0]
},
)
icon = new LeafletIcon( {iconUrl: this.iconUrl} )
marker = L.marker([this.latitude, this.longitude], {icon: icon, zIndexOffset: 10})
marker.id = this.id
marker
Thank you again.
I wonder how to make a google map not to leave world bounds, like on google maps site itself.
I am using javascript google map api v3, here is my map options:
mapOptions = {
center: new google.maps.LatLng(20, 0),
zoom: 3,
minZoom: 3,
zoomControl: true,
I've restricted map zoom, but user still can drag out of world bounds and even select region there.
How can I prevent this behavior?
You have to make a general check using some conditional statement like if...else and comparing if the current Lat/Lng is falling out of a specified boundary (which is a world bound in your case).
I would recommend you to look at this SO question that may provide you some leads of how to proceed.
Found a nice solution I'd like to share:
if (!allowedBounds.intersects(map.getBounds())) {
map.panToBounds(allowedBounds);
}
it will return to the initial set bounds (minimum way) when the whole screen left the bounds.
Issue:
So my issue is that maxZoom seems to over ride the zoom in Leaflet.
From the docs, zoom description is: Initial map zoom.
The code I am using is as follows.
Code:
var map = L.map('map', {
maxZoom: 18,
zoom: 17,
zoomControl: false
}).locate({
setView: true,
}); // set default location to current GPS location
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}).addTo(map);
Result:
The result is that the initial zoom is 18 instead of 17.
Expected Behavior:
What I want is the max zoom to go no more than 18 but start out initially as 17.
Try adding the maxzoom and minzoom to your tilelayer.
I have the starting zoom set in setView (13 there is the starting zoom).
Hope it helps a bit, because i'm not sure how it works when u get your location by gps.
var map = L.map('map').setView([8.939, 3.541], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom:7,
attribution: 'OpenStreetMap'
}).addTo(map);
Kristjan
I raised this topic a bit late and don't know if you already managed to fix the issue. I hit the same problem on a project I am currently working on and I found a solution by using setZoom() method.
On my specific case I am using Leaflet version 0.7.x and to me it was enough to concatenate the method to fitBounds() like in the example below:
map.fitBounds(group.getBounds(), {
padding: [30, 30]
}).setZoom(settings.zoom.initialZoom);
As I didn't find that much documentation regarding this specific issue, I post my solution here with the hope it can help anyone else should face the same problem.
I guess that the .locate() function resets the zoom to a level that is appropriate for the supplied user location. If you don't want this, you can set a separate maxZoom for this, too.
My current OpenLayers looks like the following:
a wrong map http://i1179.photobucket.com/albums/x384/yoyomyo/Picture2.png
It has twice as many continents as there should be.
I was trying to set Bounds to my map, but the entire map just refuses to render:
var map = new OpenLayers.Map('map', {restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)});
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayers([layer]);
map.setCenter(
new OpenLayers.LonLat(-71.147, -42.472).transform( new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),
12);
Does any Map guru know what I did wrong?
WrapDateLine
Try wrapDateLine:false
It sounds like you want to set maxExtent.
http://trac.osgeo.org/openlayers/wiki/SettingZoomLevels
Otherwise I have no clue. :)
It would be easier to answer with an example to work off of. I would zoom in 12 is pretty far out. And yes you can zoom in on OSM http://www.openstreetmap.org/
In that site, they use these values
var centre = new OpenLayers.LonLat(-0.1, 51.5);
var zoom = 5;
setMapCenter(centre, zoom); //It calls map.setCenter()
Okay I give up. I think this is just the way OpenStreetMap displays its map.
I have seen many demos and they are all like the one above.