I replaced marker shadow for background image of icon, so it will look like a frame of the image. And it looks fine. The problem is that somehow shadows has the same z-index so if two markers are together we can't see the frame (other image covers it). Because every icon has grater value of z-index than shadow. How can I change this?
The marker-shadows are always placed inside a different overlay(overlayShadow) , so you will not have any chance to move a shadow in front of any marker.
There may be different options, for example you can ommit the shadow and create a second marker using the shadow-image.
Related
I'm trying to add an image overlay on top a Leaflet map, but I want it to be drawn only in the area that a geo-json multipolygon closes (so treat the geo-json layer as a mask for the image). The image I want to display is rectangular, with no transparent areas.
By using a SVG mask, I achieve my purpose. As the geo-json is put in a SVG element, I'm able to fill it with my image.
https://gyazo.com/069ecec5904026d5f4d0624c6f1a2a7e
But the problem arises when I start zooming in. The SVG where the geo-json is placed changes its size and shape. It becomes smaller than it should be (because areas that are outside the map are removed from the SVG), so the image is not centered on its exact position anymore.
https://gyazo.com/68148043d5ff3d11c0a13aa1d29c197b
As you can see, both when zooming and when panning the map, the image moves, and that's because the SVG where the geo-json is displayed changes its width and height.
Here is a fiddle with the code I came up at the moment: https://jsfiddle.net/8n3m6t51/
I can think for several solutions:
Force Leaflet to always draw the full geo-json area, even those polygons or areas that are out of the screen.
Use a ImageOverlay and set it a mask (but I think this one would be impossible).
But at the moment I haven't figured out what to do to get this issue fixed.
Perhaps this is an unusual way to do things, but I am creating an interactive map that has landmark markers embedded in the actual map image (a colored circle with a number inside of it). The image is in a div that allows you to pan and zoom with you mouse and mousewheel. I am using CSS transforms to accomplish that pan and zoom. This part is working great.
The issue is that I have 90 landmarks on the map that need to be able to have the user click on them and have a tooltip/popup open with more info. I am accomplishing this with an image map and specifying the coordinates. That is all working as well.
However, I want the user to be able to hover over the image map area and have an alternate image display over the top of the main map image to effectively "highlight" the landmark circle on hover. Then I use the same alternate image when they click on the landmark to show a "highlighted" circle for the selected landmark.
I have this working by using a single div for the hover image display, moving it off canvas and then applying a CSS transform to move it into place and show the right background image when the user hovers over the image map area.
This is all working except for one very teeny tiny problem:
I am passing in transform values to the CSS through jQuery and they are being rounded to 3 decimal places when the transform is applied. Here is javascript used to set an example transform.
$(function(){
$('#landmarkHighlightSelected').css({
'transform-origin': '0px 0px 0px',
'transform': 'translate(121.11172485351563px, 335.38427734375000px) scale(1)',
});
});
When I inspect the transform in Chrome dev tools, I see that the translate values have been converted to 3 decimal places (rounding applied). The matrix value is listed as the following:
matrix(1, 0, 0, 1, 112.112, 335.384)
Under "normal" circumstances, this likely wouldn't matter. But the effect that I am getting is that the "highlight" div that is moved into place is "close" to where it should be, but depending on what the results are of the calculation taking into account image pan/zoom values, I will get a "shift" effect and you can see that the "highlight" div is offset ever so slightly from the landmark in the resized/moved map image behind it.
So what I am seeing is that the CSS transforms are limited to 3 decimal places? Is that right? Is there any way to get them to accept more decimal places?
I understand that what I am doing is a bit unorthodox and that by embedding the "off" state landmark markers in the map image, it's allowing the pan and zoom to move the landmark to values that the browser appears not to be able to render.
But I went with this approach because trying to move 90 divs around in the browser allowing pan and zoom in case the user moused over it was causing a huge jerking/dragging/delayed response in the movement because the code was trying to recalculate the positions of all of those divs as the user moved things around.
Any help or insight on this would be SO SO SO appreciated it. I have been getting nowhere on this for over a week and just figured out that it was the 3 decimal place limit causing the rendered div to appear to shift.
Thank you so much,
Jenny
I have one question. In past we just used open layers 2 and it used svg and we had some GIF markups on map (fire animations etc). Now we have open layers 3 map which use canvas to render the map. Is it now possible to still add GIF markups to the new map?
Now when I add a GIF, I just get only one "slide" from the GIF - it doesn't have animations.
What is the best way to do it? Render some SVG in canvas (how) or "refresh" the GIF element?
Thanks!
OK, I have completed this task :-) YES - it's possible to add a GIF with motion as icon to the point on map, but it requires some JS code.
I've done it with Overlays. And the hint is precompose event, which is fired on every time when something on map has been changed (very very often).
On this event we check which Feature has an icon with .gif extension (we can flag features before when we create Features).
If has, we check that overlay with this id exist:
if YES - just only change position of this overlay (coordinates of
feature)
if NOT - create new overlay with parameters like
coordinates, id of feature. Of course also create element on map
And remember to remove redundant overlays (when points are not visible in extent, or when we change the map or hide the layer).
For example, I want to set a leaflet marker always pin to the bottom-right corner of the leaflet map.
Does anyone have ideas about this?
There are a couple of ways to approach this, depending on what you want to accomplish.
This request for a centered "floating" crosshairs icon sounds very similar to your request. You essentially use getCenter() to create a fixed reference point, then use setLatLng() to update your marker's location relative to the map's center each time the user pans.
If the point you'd like to pin is purely cosmetic, you could just use HTML and CSS to position it on the page. This example, which is also referenced in the previous example, uses CSS to position an icon within a span as a visual reference point, then takes advantage of getCenter() to add lat/lon values to the form on the left of the page.
You can make use of getCenter(), getSize(), and L.marker() to pin to the bottom-right.
Reference: http://leafletjs.com/reference.html
I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.