Leaflet widgets blocking bind PopUP - javascript

On my leaflet Map, I have two widgets that i want to combined together in the same map. Ive tried many things when combining my two codes but it seems that D3SvgOverlay always 'block' my Map bind PopUp.
As you can see, If I use this code "alone", the bindPOPUp are working fine.
http://blockbuilder.org/renauld94/4a704ff30993fe35e019f3184aa31399
But when Im adding my other widget http://blockbuilder.org/renauld94/81500a71a32adaa4ee09a0b26d21ee89, the bindPOPup are not working. I think I'm superposing layers (Geojson layers) and its blocking the PopUp.
Anyways to make the bind POP working by combining my two widgets 'leaflet control search' and GeoJson D3SvgOverlay?
How I combined widgets in leaflet without effecting each others? Any example will be appreciated.

Related

adding popup on features in leaflet geojson-vt

I have a map where i used the leafet-geojson-vt plugin (https://github.com/brandonxiang/leaflet-geojson-vt/tree/leaflet1.0.0) to draw GEOJSON data in a canvas layer with geojson-vt.
I'm able to add the layer to the map, however, I don't know how to add popups on click for each polygon/tile/feature in the layer. I've tried searching for examples but cannot find ones using the geojson-vt plugin.
How can I add such functionality using the example in the link above?
Any help is appreciated.

Displaying multiple markers that have the same lat/long coordinates in a single popup

Leaflet JS - Is it possible query?
In a nut shell, what I am trying to do is this:
Using the latest version of Leaflet JS, I want to know if its possible to have multiple markers, in a single location, display in a single popup.
No, it's not possible.
You should pre-process your data beforehand, so that several data points with the same coordinates collapse into the same marker & popup.
In other words: iterate through your data points, and for every data point check if a marker exists in that location. If it does, add data to the marker's properties or popup; if it doesn't, create a new marker. The specific algorithm will depend on the nature of your data. You might also want to use a more complex data structure, such as r-trees, if your data set is large.
There's also the quick&dirty option of using marker clusters, disabling spiderifying, then using custom code for the event handlers of the cluster marker. That's pretty much the same algorithm defined above, only that the marker cluster algorithm takes care of locating nearby data points.
I made a similar map, and exactly as described by Ivan, I used markerCluster plugin and on cluster click action disabled the spiderfy. I then used 'custom code for the event handlers of the cluster marker' to show multiple markers' data in one single outside div.
An example can be found here .
And there is a tutorial describing exactly what you are looking for here, but also using markerCluster js.
Hope it can help others people too !

Make leaflet layers control with checkboxes, not radio buttons?

Is there an easy way to make a leaflet layers control (L.control.layers) use checkboxes rather than radio buttons?
I have multiple WMS tile layers, and I'd like to be able to have more than one on the map at the same time. For context, the WMS tile layers include bathymetry and contours (topo lines), so it'd be more informative to visualize both at the same time, rather than just having some lines floating in the ocean.
In the leaflet example it says the layers control is "smart enough" to know which to assign radio buttons and which checkboxes, but it'd be nice to have more customized control.
Relevant code:
L.control.layers(WMS, null, {collapsed: false}).addTo(map);
where WMS is multiple L.tileLayer.wms layers.
Pass your WMS as the 2nd argument (i.e. as overlays) instead of the 1st (basemaps) of L.control.layers.
Overlays use check boxes, whereas basemaps use radio buttons.
Here i create an example to demonstrate what ghybs said.
L.control.layers(null, mixed).addTo(map);
Checkout my jsfiddle http://jsfiddle.net/iofirag/Ltub5bgv/18/.

Google Maps markers ontop of each other

So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol

How can you make a leaflet map re-sizable?

I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!

Categories