Open popups in a fixed position

[Chris Conolly]

Hi guys,

Im new to leaflet. Im using it with mapbox and wax, I've got my map
pretty much exactly how i want it. Im bringing in geojson data as
features onto the map. On click on these markers I'm displaying the
content I want to however rather than a popup hovering over the
feature point that moves around as the user navigates the map I want
to have the popup always in the top right hand corner of the map.

If there is no way to fix the location of the popup is there a way to
'see' when the user clicks on a marker?

I see clicking the marker doesn't activate the the
map.on('click' ...) , Is there any other way to capture a user click
on the marker as I dont actually need the popup functionality. I can
just create a div new on the page to do what I am after.

Help is greatly appreciated, thanks guys.

Chris

[FunkMonkey33]

Yes. Don't bind your popup to the feature. Instead attach an onClick
event handler:

myFeature.on("click", function(e) {
// put your popup functionality here (map.openPopup).
// e.target is the feature you clicked on.
});

One thing is that Leaflet's popup displays at a particular LatLng,
with an arrow pointing to that point, and the popup balloon displaying
above it. You will have to decide on the screen coordinate you want
to use, and use the map's conversion methods to turn them into a
LatLng. An alternate solution would be to design a div yourself,
position it relative to the map div, and show it when the user clicks
on a feature, hide it when they click off of it.

Aaron

[Chris Conolly]

Aaron,

This looks to be exactly what im after, thanks so much. I will try it
out on monday morning and post back here then.

Thanks
Chris

[Chris Conolly]

Hi,

Thanks, for the help I still however have a problem.

I use $.get to get json type = "FeatureCollection" I then assign this
geojson to a var called newsLayer.

When i do newsLayer.on("click", .....) I dont actually get any
information specific to the feature I've clicked on (at least I cant
find any atm, the e object is massive. I like the idea of doing it
this way alot as I can create a div outside the map.

using newsLayer.on("featureparse", .....) I have access to the e
object of each feature and thus can get access to the json array i
created for each object. How can i get access to this
using .on("click" ...) ?

Many Thanks
Chris

[FunkMonkey33]

Hi Chris,

You don't attach the onClick event to the feature layer. You attach
it to each feature individually. Then you will have access to the
feature clicked on through the e.target property.

I'm pretty new with Leaflet myself, so this might not be the best way
to go about it, but I generally add individual features to an
L.FeatureGroup, then add the FeatureGroup to the map with
map.addLayer(). For each feature, I attach a click handler.

I think you can probably attach the click handlers in the featureParse
event handler as well, but here's an example of what I do:

// Plotting points on the map as cirlces (should work with lines or
polygons as well)
// records is an array of locations, brought back from a jQuery ajax
call

var circles = [];

$.each(records, function(index, value) {
var circleLocation = new L.LatLng(value.Latitude,
value.Longitude);
var circleOptions = {radius: 5, fillColor: '#00FF00'};
var circle = new L.CircleMarker(circleLocation,
circleOptions); // circleOptions is optional
circle.featureInfo = value; // featureInfo is not part of
Leaflet. I attach it here as a new property (thanks, JavaScript) so I
can use it later, in the click handler.
circle.on('click', function(e) {
// This is your click handler.
// Your feature is available here as e.target, and the
featureInfo object we added is available as e.target.featureInfo
});

circles.push(circle);
});

var group = new L.FeatureGroup(circles);
map.addLayer(group);


Hope this helps.

Aaron

[Chris Conolly]

You, my good sir, are a legend.

I did think that using it is a featurecollection was my problem. Your
code there has given me etarget on click and i can now do exactly what
i wanted.

If I could, I'd buy you a beer!

Chris

[Raj]

Hi,

I found this very useful for making 'L.FeatureGroup' (especially for 'featureClick') 

My favorite here is 'You don't attach the onClick event to the feature layer.  You attach it to each feature individually'. 

I tried this because adding as a  L.CartoDBLayer is working good except for my 'featureClick'.

The popup content is not updating or sometimes the click event is itself not working. (its kind of half-working mode). Really not sure why its happening.

But this way of adding to featureClick is working good. But how do i add 'L.FeatureGroup' to my L.CartoLayer?

-Thanks

Raj