hide and show a polyline in leaflet? - leaflet

I'm using leaflet for show raw itinerary to go to some markers.
I'm showing my itinerary with a leaflet polyline.
But I would like to be able to
How to hide and show a polyline in leaflet ?
I can do this :
$('.leaflet-overlay-pane').hide();
and
$('.leaflet-overlay-pane').show();
But this will show and hide all my polyline.
I would like to be able to hide and show them separately.
Thanks.

If you have a reference to the polyline
var polyline = L.polyline(...);
Then you can use
map.addLayer(polyline);//For show
map.removeLayer(polyline);// For hide
at the moment I think there is no native method to only hide/show, maybe in the 0.7 version
Other solution is to access to the object container, in a old commet from the maintainer
I don't think there's an easy solution, for tile layers at least. :( I'll try to handle this sooner.
For vectors, you can change path._container.style.display, and for markers - marker._image.style.display and marker._shadow.style.display.

Removing and adding objects on the map will also change the order of the layers (if you have more than one in your legend). The added objects will always be on top and not in the original order. I use setLatLng (markers) and setLatLngs (polylines and polygons) to do a quick trick without changing the order. Just change the latLngs to e.g.(1000,1000) outside your view.
var myLatLng0 = L.latLng(1000,1000);
var myObject = L.marker(myLatLng,{....});
myObject.latlng = myLatLng;
or
var myObject = L.polygon(myPath,{....});
myObject.path = myPath;
Hide / Show marker:
myObject.setLatLng(myLatLng0);
myObject.setLatLng(myObject.latlng);
Hide / Show polyline or polygon:
myObject.setLatLngs(myLatLng0);
myObject.setLatLngs(myObject.path);
Note: hiding polylines and polygons will also work with setLatLngs(false). setLatLng(false) for markers will give an error.

Related

Using Block class on viewportlayout in devDept.Eyeshot

I loaded a cadfile in which a lot of lines are drawn. I want to make a rectangle region, using 4 vertices(X, Y Coordinate value) so that I can click the region not just one point.
I found Block class in devDept.Eyshot but I don't know how to use it. Please give any ideas or c# code example for me.
You don't need block to do that. You used the correct word and that is Region. A Region is a visual entity that has many vertices. It's technically a polygon. If you want you can use the simple method :
var width = 10d;
var height = 10d;
var region = devDept.Eyeshot.Entities.Region.CreateRectangle(width, height, true);
viewport.Entities.Add(region);
When you use the method to get the entities under mouse, the whole surface of the region is taken into account. It works perfectly

Getting the div screen location in Leaflet

I am working on a project using Leaflet. I want to place a label for objects on the map. I don’t want the label to appear on the map. I want the label placed above the map, but at the screen or div Left location from a latLng point.
I can’t seem to get the correct position using the functions available. Is there some example I can look at to give me insight? I would think Leaflet could do this.
The key here is to leverage the latLngToContainerPoint() method of L.Map - it will give you the pixel coordinates relative to the map container of the L.LatLng passed.
So create a container for a tick...
<div id="topbar"><span id="toptick">↓</span></div>
<div id="leaflet"></div>
...and use CSS to ensure it's on top of the map container, and has the same width. Then, run a function to translate the map point you want into an offset relative to the top-left corner of the map container...
function repositionEdges(){
var offset = map.latLngToContainerPoint(geopoint);
}
...run that after map initialization, and after every movement of the map...
repositionEdges();
map.on('move zoom', repositionEdges);
...and finally, inside that function, shift the tick horizontally tweaking its style...
function repositionEdges(){
var offset = map.latLngToContainerPoint(geopoint);
document.getElementById('toptick').style.left = offset.x + 'px';
}
You can see a working example at https://next.plnkr.co/edit/60qrWND50mCOQ11T?preview .
This is just one approach. The specific implementation will be different if you're using more than one point, or if you want to use <canvas> for drawing the ticks.
See also the graticule, edge scale bar and edge markers plugins from the Leaflet plugins list. Those plugins contain implementations of similar concepts.

Leaflet: How to deal with overlapping lines?

How can I deal with overlapping lines in the Leaflet map library?
I download geoJSON from the server sid and draw it right onto the map. If there are two identical entries, Leaflet draws them twice. This could be fixed by finding exact duplicated on the server side.
That however doesn't work for different datasets sharing some of the same space. As a result parts of both are drawn onto the same spot.
It appears that the lines are being rendered with the default Leaflet Polyline opacity of 0.5. If you were instantiating the Polylines yourself in code, you could override the opacity to make the lines opaque in this manner:
var myPolyLine = new L.Polyline( myPoints, { opacity: 1 } );
The line that would appear on top would then be the line that you added to the map last (one or the other is going to be on top, unless you make them both opaque and the same color). But this may be moot if you are loading in geoJSON directly and don't have control over how Leaflet renders it.

Multiple maker on the same place with leaflet

I tried to display a lot of marker on a leaflet map. The data of the marker - coordinates, text... - are stored in a text file.
I made a parser who parse the text, put the data in a big array and then i loop on this array to display each marker.
My problem here is that i got many markers - more than 200, and many of them got the same coordinates.
My code loops well but display only the last marker with each coordinates, how can i display them all properly?
After digging the web around i find a solution which seems to pretty fit my issue.
Leaflet allows you to create "markercluster" which can gather marker together.
Here is a live example : http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

Mapkit showing annotation region

I have a MKMapView with several annotations. These annotations differ from varios location all over Sweden. What I want to do is to zoom the map so all annotations show.
I do not want to position the map to my position (although I do want to show it), but want all annotations to show and center the map according those locations.
I.e. if one annotation would be "kiruna" (upper left sweden) and the otherone would be "stockholm" (middle right sweden), I want the map to show both. If the map would only show "uppsala" (above stockholm) and "stockholm", I want the map zo zoom that "uppsala" is in the top left and "stockholm" bottom middle/right.
How can I do this? I have the lat/lon positions ofcouce for every location.
Regards,
Paul Peelen
Dupe with plenty of material to solve your problem: Positioning MKMapView to show multiple annotations at once