RegularPolygonMarker displayText support like "Stacked Regular Polygons" example in examples\markers.js

[ingsoc]

I stumbled across this plugin as I was looking for a way to rotate markers - althoguh in future I can see other uses for this lib :).

I am currently only using RegularPolygonMarker to create a triangle direction marker that I have much more control over configuration/display than regular .png marker bitmaps.

The issue I have is I want to display some text on hover, and I see there is no "title" attribute. I have also tried triggering openPopup()/closePopup() in handlers bound to mouseover/mouseout but it seems when the polygon is small the actual display of the popup can cause more mouse events to trigger so I get a flickering effect (this seems to be the case with regular leaflet polygons too.

What I have noticed is that the chart examples have fancy smooth nice popups and I think this is a property specific to them (displayText ?) I was wondering is there any support for these popups on polygon markers ?

Cheers

[sfairgrieve]

Good question. For now, you should be able to implement this by capturing
mouseover/mouseout events of the RegularPolygonMarker - in the mouseover
event handler, add a new Marker with an L.DivIcon to the map (this is
basically just a custom HTML tooltip) at the location of the mouse cursor
and store a reference to this marker. In the mouseout handler, remove the
marker from the map. This is essentially the same thing that's being done
in DataLayer classes. You should just be able to copy what's being done
there - you can even use the same styles if you want. Check out
_bindMouseEvents in
https://github.com/humangeo/leaflet-dvf/blob/master/src/leaflet.dvf.datalayer.js.

In the meantime, I'll look into making this functionality a part of
individual markers or at least providing some way of making it easy.

Scott

On Fri, Dec 6, 2013 at 10:58 AM, ingsoc notifications@github.com wrote:

I stumbled across this plugin as I was looking for a way to rotate markers

• althoguh in future I can see other uses for this lib :).

I am currently only using RegularPolygonMarker to create a triangle
direction marker that I have much more control over configuration/display
than regular .png marker bitmaps.

The issue I have is I want to display some text on hover, and I see there
is no "title" attribute. I have also tried triggering
openPopup()/closePopup() in handlers bound to mouseover/mouseout but it
seems when the polygon is small the actual display of the popup can cause
more mouse events to trigger so I get a flickering effect (this seems to be
the case with regular leaflet polygons too.

What I have noticed is that the chart examples have fancy smooth nice
popups and I think this is a property specific to them (displayText ?) I
was wondering is there any support for these popups on polygon markers ?

Cheers

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/10
.

[ingsoc]

Hi,

Thanks for the pointers, I have this working now.

I am tracking vehicles and displaying position info of where the vehicle has been through the day. Originally I was using .png markers but when there are hundreds on the map things can get slow. Using polygon markers is so much faster which is cool but at the moment I am using a 3 sided RegularPolygonMarker to show the position.

The problem is that because it is equilateral triangle the actual direction can be confusing. I tried changing radiusX/radiusY to try to make it more obvious but this does not do what I want. I also was seeing if I could make the gradient go from the direction point back but just not sure how to do this once rotated.

I have a custom svg file with the kind of direction arrow I would like. can this be used ?

Any ideas on how I could achieve this.

Many thanks.

[sfairgrieve]

Let me give this some thought. I believe I have code that will position
gradients correctly based on the direction, so let me dig that up and you
can try that out. I'll also try to see if I can fix the rotation plus
radiusX/radiusY so that it As far as custom SVG, there's nothing in Leaflet
or the framework that supports that at the moment (it's probably a good
addition) but also nothing that prevents you from writing your own handler
for that. It would just be a matter of calling latLngToLayerPoint to get
the center point in SVG coordinates for a given lat/lng, then positioning
the SVG element at the center point and rotating it correctly. I'll also
see what's up with radiusX/radiusY and rotation - I'm guessing that's a bug.

On Thu, Dec 12, 2013 at 5:10 AM, ingsoc notifications@github.com wrote:

Hi,

Thanks for the pointers, I have this working now.

I am tracking vehicles and displaying position info of where the vehicle
has been through the day. Originally I was using .png markers but when
there are hundreds on the map things can get slow. Using polygon markers is
so much faster which is cool but at the moment I am using a 3 sided
RegularPolygonMarker to show the position.

The problem is that because it is equilateral triangle the actual
direction can be confusing. I tried changing radiusX/radiusY to try to make
it more obvious but this does not do what I want. I also was seeing if I
could make the gradient go from the direction point back but just not sure
how to do this once rotated.

I have a custom svg file with the kind of direction arrow I would like.
can this be used ?

Any ideas on how I could achieve this.

Many thanks.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/10#issuecomment-30403648
.

[sfairgrieve]

This is still a work in progress with a few bugs that need to be worked
out, but check out:
http://humangeo.github.io/leaflet-dvf/examples/html/runmap.html. This
shows the change in elevation for GPS coordinates of a run in Washington,
DC. The gradient fill in this case changes based on the direction, so this
might help with your use case until the radiusX/radiusY/rotation thing gets
straightened out and as an alternative to inserting custom SVG markup. If
you're interested in reusing the gradient fill code, check out _setGradient
in L.WeightedLineSegment in leaflet.dvf.experimental.js.

On Thu, Dec 12, 2013 at 11:27 AM, Scott Fairgrieve <
sfairgrieve2003@gmail.com> wrote:

Let me give this some thought. I believe I have code that will position
gradients correctly based on the direction, so let me dig that up and you
can try that out. I'll also try to see if I can fix the rotation plus
radiusX/radiusY so that it As far as custom SVG, there's nothing in Leaflet
or the framework that supports that at the moment (it's probably a good
addition) but also nothing that prevents you from writing your own handler
for that. It would just be a matter of calling latLngToLayerPoint to get
the center point in SVG coordinates for a given lat/lng, then positioning
the SVG element at the center point and rotating it correctly. I'll also
see what's up with radiusX/radiusY and rotation - I'm guessing that's a bug.

On Thu, Dec 12, 2013 at 5:10 AM, ingsoc notifications@github.com wrote:

Hi,

Thanks for the pointers, I have this working now.

I am tracking vehicles and displaying position info of where the vehicle
has been through the day. Originally I was using .png markers but when
there are hundreds on the map things can get slow. Using polygon markers is
so much faster which is cool but at the moment I am using a 3 sided
RegularPolygonMarker to show the position.

The problem is that because it is equilateral triangle the actual
direction can be confusing. I tried changing radiusX/radiusY to try to make
it more obvious but this does not do what I want. I also was seeing if I
could make the gradient go from the direction point back but just not sure
how to do this once rotated.

I have a custom svg file with the kind of direction arrow I would like.
can this be used ?

Any ideas on how I could achieve this.

Many thanks.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/10#issuecomment-30403648
.

[ingsoc]

Hi,

Just wondered if you ever had a chance to look into the fix for rotation plus radiusX/radiusY to enable use of rotated non equilateral triangles.

Many thanks

[sfairgrieve]

Yes, I believe I have a fix that should be checked in tomorrow at some point. Just need to do a little more testing.

Thanks,

Scott

Sent from my iPhone

On Jan 15, 2014, at 11:25 AM, ingsoc notifications@github.com wrote:

Hi,

Just wondered if you ever had a chance to look into the fix for rotation plus radiusX/radiusY to enable use of rotated non equilateral triangles.

Many thanks

—
Reply to this email directly or view it on GitHub.

[sfairgrieve]

I just pushed an update that hopefully should solve the radiusX/radiusY/rotation issue you were experiencing before. When you get a chance, can you pull down the latest and let me know if that works better?

[ingsoc]

Hi there,

Yes, this is working great now !!!

Now, if only I could use custom defined SVG polygons as map markers... :D

Thanks again, really appreciated.

[ingsoc]

I am just wondering, are there any special steps I need to get RegularPolygonMarker working with the heap of crap that is IE8 :)

I have downloaded and tried referencing core-1.0.5.js and core-1.0.5.js from https://code.google.com/p/core-framework/ in my html but to no avail :(

[sfairgrieve]

Good question. There's another issue out there related to this:
#14. For some reason, I
thought that Leaflet automatically handled some of the VML conversion for
path elements, but I may have been wrong or that may have changed. I'll do
some more research and figure out a good way to fix/test this.

On Thu, Jan 16, 2014 at 9:41 AM, ingsoc notifications@github.com wrote:

I am just wondering, are there any special steps I need to get
RegularPolygonMarker working with the heap of crap that is IE8 :)

I have downloaded and tried referencing core-1.0.5.js and core-1.0.5.js
from https://code.google.com/p/core-framework/ in my html but to no avail
:(

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/10#issuecomment-32473965
.

[sfairgrieve]

I just pushed a potential fix for this. I noticed a typo in my code for writing out VML path data. I haven't tested the fix, though. I'm going to download an IE 8 VM, but would appreciate your help in testing out the latest code to see if things work better.

[ingsoc]

Just done a pull of the changes but the polygons are still not showing on IE8 - note, I am assuming/hoping I have everything set up correctly but cannot be certain.

In the IE8 developer tools I get this message in the console...
Expected identifier, string or number (leaflet.dvf.markers.js, line 260 character 4)

Not sure if this is causing any problems but this error does not appear in chrome or firefox afaict.

Cheers

[sfairgrieve]

I think I know what the issue is. I'm assuming you're using leaflet.dvf.markers.js from the src directory. Do you mind using one of the compiled Leaflet DVF files in the dist directory (e.g. leaflet-dvf.js or leaflet-dvf.markers.js)? I believe the issue is that "in" is a reserved word, and the JavaScript object being created around line 260 has a property called "in" that isn't surrounded by quotes. When the files get compiled, UglifyJS solves this issue by wrapping reserved words like "in" with quotes. I'll fix this in the src file, but in the meantime, I believe moving to one of the dist files will fix your issue.

[ingsoc]

Still no RegularPolygonMarkers being displayed in IE8

OS environment...
Windows XP/IE8

Leaflet plugins...
leaflet.js (ver 0.7.1)
leaflet.label.js (plugin for popup hover labels)
core-1.0.5.js (maybe required for ie8 support of dvf ?) - tried with and without this enabled
leaflet-dvf.markers.min.js (this is the only file I am using from dvf dist - i am no longer referencing anything from src)

Cheers

[ingsoc]

Just to add, I am no longer getting any errors in the IE8 dev tools console

[ingsoc]

One more thing... :)
Although it would be nice to get this working in IE8 don't stress about it as we all would like to move on from IE8, the unfortunate thing is some corporate users still use it : /. In fact, I am currently assessing the amount of work involved in supporting IE on my current project right now as there are other problems I have come across in my own code and other libs I use.

[sfairgrieve]

I'll investigate further. #14 is basically the same issue, and he got things working, so there's hope ;). Just trying to figure out what's different.

[sfairgrieve]

Are you including leaflet.ie.css? I was playing around with an IE 8 VM and noticed that nothing shows up until leaflet.ie.css is included.

[ingsoc]

Hi,

The leaflet website states that the versions of leaflet I am using (0.7.1/0.7.2) includes all the CSS to support IE8 in the main css file now. I have also tried including the separate ie css file from the 0.6.4 but still regularpolygonmarker does not seem to display. Are you saying you can get a triangle to display in IE8 ?

Cheers

[sfairgrieve]

Ok, great. I haven't been using the newest version of Leaflet yet. Yes,
I've been able to get the earthquakes example (which uses
RegularPolygonMarkers) to work in IE 8 with a few minor tweaks. I can send
you the example setup if you want it, just to see if anything jumps out as
being different.

BTW, I also have a class that will allow you to put custom SVG items on the
map. It's still a work in progress and a bit of a hack, but I'll include
it in the next push.

On Tuesday, February 4, 2014, ingsoc notifications@github.com wrote:

Hi,

The leaflet website states that the versions of leaflet I am using
(0.7.1/0.7.2) includes all the CSS to support IE8 in the main css file now.
I have also tried including the separate ie css file from the 0.6.4 but
still regularpolygonmarker does not seem to display. Are you saying you can
get a triangle to display in IE8 ?

Cheers

Reply to this email directly or view it on GitHubhttps://github.com//issues/10#issuecomment-34066191
.

[ingsoc]

Yeah, it would be great to see your setup. How would you like to send it ?, is it on github I can clone ? or email me ?

Also, custom SVG and the ability to rotate them would be AWESOME !!!

Many thanks for your help with this.

[sfairgrieve]

I'll include the IE 8 example and the custom SVG class in my next push
(hopefully today).

On Wed, Feb 5, 2014 at 7:19 AM, ingsoc notifications@github.com wrote:

Yeah, it would be great to see your setup. How would you like to send it
?, is it on github I can clone ? or email me ?

Also, custom SVG and the ability to rotate them would be AWESOME !!!

Many thanks for your help with this.

Reply to this email directly or view it on GitHubhttps://github.com//issues/10#issuecomment-34160800
.

[sfairgrieve]

Should be pushed. Checkout:
http://humangeo.github.io/leaflet-dvf/examples/html/earthquakes.ie8.html.
The markers example includes examples of using the new L.SVGMarker class
as well.

On Wed, Feb 5, 2014 at 8:04 AM, Scott Fairgrieve
sfairgrieve2003@gmail.comwrote:

I'll include the IE 8 example and the custom SVG class in my next push
(hopefully today).

On Wed, Feb 5, 2014 at 7:19 AM, ingsoc notifications@github.com wrote:

Yeah, it would be great to see your setup. How would you like to send it
?, is it on github I can clone ? or email me ?

Also, custom SVG and the ability to rotate them would be AWESOME !!!

Many thanks for your help with this.

Reply to this email directly or view it on GitHubhttps://github.com//issues/10#issuecomment-34160800
.

[christianbeland]

Hi,

Were you able to fix that flickering effect when mouseover on marker? (multiple mouseover/mouseout event as my pointer moves across the marker). I get the same. And it also seem to prevent me from clicking on the marker most of the time.

Any idea where I should start? (tested in chrome)

[sfairgrieve]

@christianbeland can you clarify what you mean by flickering effect? When I view the markers example in Chrome and mouseover markers/move the mouse around, everything seems to be working fine. Are you talking about the fact that certain markers (e.g. the chart markers) become more transparent and the border width increases when you hover over certain sections, or does the issue you're describing occur with all markers?

[christianbeland]

I was able to fix my problem. It turn out the on-hover default popup was being displayed (with size 0 / hidden) under my cursor and changed the focus as I was moving my cursor on the marker. This generated a bunch of mouseover / mouseout events and caused a flickering effect.

Thanks for the quick response though.

I found out that mouseout event are triggers whenever the cursor goes over the marker text label or the inner radius (hole) of a marker. Do you know any workaround to avoid this behavior?

[sfairgrieve]

Glad you were able to fix it. I'm not sure of a workaround to the mouseout event firing. It makes sense that it fires in those situations, but I don't know of a good work around off the top of my head. Let me give it some thought. I'm sure there's probably a workaround.