I have a leaflet map, I use this Leaflet-Ruler plugin and add ruler control layer to map in this link. I want move ruler control layers to above map as shown as:
How Can I do?
Just need move one DIV element inside another DIV with JQuery $("#source").appendTo("#destination"); for example I move DIV ruler control that class name was leaflet-ruler move to the my special DIV <div id='move-control-layer-ruler-to-here'></div> .
You can move any control layer leaflet to any DIV.
This link is jsfiddle solved my problem.
]
Related
I need to change the style so that when I select a polygon from my layer it doesn't have the blue line as it is in this image. Does anyone know where I make this change with Openlayers?
I assume you are using the Select interaction - it has a style parameter as described in the docs:
https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html
There is also an example for this:
https://openlayers.org/en/latest/examples/select-features.html
Is it poosible to move the image on the x axe? If I midify the translate3d(-20px,...,...) it works for me.
But if I zoom or drag the map it will be reseted.
For exmaple I have an absolute container and want to show parallel this 2 elements.
My example: http://jsfiddle.net/user9090900/fs8h21ap/
Use the panBy() method of L.Map, e.g. map.panBy([20, 0]).
I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!
The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).
I have developed a google map which uses image markers. I want to display an information box when the cursor is over the marker but when markers are close together (not necessarily overlapping) the information box does not display.
What controls the minimum distance between markers required for mouseover to be activated?
Each of your markers is an <image> inside its own <svg>. The images may only be 16px*16px, but the SVGs are 160px*20px, and that entire area is grabbing mouse events. When your markers are close together, that means that an invisible portion of the SVG for one marker is blocking the mouse event from passing through to the visible marker below.
Changing the CSS to ignore mouse events on the <svg>, and only respond on the visible parts of the <image> seems to get things working as expected:
.members svg {
pointer-events: none;
}
.members svg image {
pointer-events: visiblePainted;
}
I'd like to access the image object of a googlemap marker. Does anyone know where it exists in the marker object?
Regards,
Ash
EDIT: I'm asking for the HTML DOM Image object, not the MarkerImage object.
Don't know how to access the image object directly from the marker object.
What makes it hard to access the image objects is that Google Maps V3 does not assign ids to the divs the enclose the img elements.
However, it is possible to dig through the DOM and find the individual divs that wrap img elements.
A marker can have multiple images associated with a single marker, including: the icon image for the marker, shadow, tooltip.
Each of these are in different divs in the map canvas div, for example the icon image is in a div with z-index = 103.
The problem remains of how to find individual markers. One way (not optimal) is to assign a zindex to the marker when creating the Marker.
If you are using jQuery, you can then select and fade the marker by using fadeOut or setting the opacity, e.g.
$('div[style^="z-index: 103;"] div[style*="z-index: 123"]').css({ opacity: 0.5 });
where 123 is the zindex you set on the marker.
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
marker.getIcon()