images and hover for nodes

1 view
Skip to first unread message

Harri

unread,
Jul 8, 2011, 1:10:08 PM7/8/11
to Cartagen
I tried to apply Gss for nodes but it did not work, then I created a
stupid way with only one node. While the node is now drawn, neither
image or hover actually does anything. I would like to achieve
clickable nodes like traffic lights which would alter the map via some
javascript.

Jeffrey Warren

unread,
Jul 9, 2011, 5:22:21 AM7/9/11
to cartag...@googlegroups.com

I think there's a "visible:true" parameter in the node itself to get nodes to show; perhaps we could create a rule that if there is an image: parameter on a node it defaults to visible:true instead of false.

I know I asked already but if you do have your changes in a git repo, or just on github, I'd love to pull them into trunk.

Thanks!
Jeff

> --
> You received this message because you are subscribed to the Google Groups "Cartagen" group.
> To post to this group, send email to cartag...@googlegroups.com.
> To unsubscribe from this group, send email to cartagen-dev...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/cartagen-dev?hl=en.
>

Harri

unread,
Jul 10, 2011, 1:22:50 PM7/10/11
to Cartagen
I checked my OSM map and the visible param is set to true for the
node but it doesn't work. Anyways, I found a bug in my changes to the
original code, that caused the image not to show when using a way (and
learned that there is no method overloading in Javascript as I had two
draw_image methods where the latter one was expecting width and height
of the image to be provided). I got the image to be shown (added
imageWidth and imageHeight GSS attributes to control the size of the
icon).

The next issue is that as the original way is only one pixel (if even
that... the length and width are 0), the mousemove observer doesn't
call the hover function for this way, as geohash points to a single
point (or an area of 0 length and width) and doesn't get found by
Geohash.get_current_features_upward.

I was wondering if I could attach event listener to the actual image
but this isn't supported on canvas as the DOM image is converted into
a bitmap... so the only solution that comes to my mind is to redefine
the geohash of this way according to the boundaries of the drawn
image. However for this I would need to have some code to actually
give the boundaries of the image on the current coordinates. Most
probably Projection.x_to_lon(...) and Projection.y_to_lat(...) would
do it.

Then somehow from the shape function I would have to change the
geohash of the feature or collect the styles and calculate the "real"
x and y in Way.initialize before putting the way into the geohash
object.

Any ideas?

Harri

On Jul 9, 12:22 pm, Jeffrey Warren <jywar...@gmail.com> wrote:
> I think there's a "visible:true" parameter in the node itself to get nodes
> to show; perhaps we could create a rule that if there is an image: parameter
> on a node it defaults to visible:true instead of false.
>
> I know I asked already but if you do have your changes in a git repo, or
> just on github, I'd love to pull them into trunk.
>
> Thanks!
> Jeff
> On Jul 8, 2011 8:10 PM, "Harri" <harri.hoht...@gmail.com> wrote:> I tried to apply Gss for nodes but it did not work, then I created a

Jeffrey Warren

unread,
Jul 10, 2011, 4:07:33 PM7/10/11
to cartag...@googlegroups.com
just fyi, if you go to http://cartagen.org/utility/geocode it generates correct JSON, and oddly it uses "visible:true" AND "display:true" -- so one of those or both are necessary. Egads.

Example:

{"osm":{"node":[{"lat":"42.1010549","lon":"-71.0212903","visible":"true","display":true,"img":"image-url.png"}]}}

Sorry, it's gonna take me a day or two to respond to the rest... kinda hectic at the moment.

Harri

unread,
Jul 11, 2011, 4:22:00 PM7/11/11
to Cartagen
display:true solved it for the node, although I initially had tag
child in the node element in order to use GSS to control the outcome
but that doesn't work so I continued to play around with the hackish
way solution. I was able to create artificial nodes following the
edges of the image in order to activate the hover and mousedown
styles. This works almost everytime :) Sometimes the mouse needs to be
moved in and out of the area to activate the styles.

This is a hack but for those who follow this, here we go:

in Way.initialize it used to be

if (this.coastline) {
Coastline.coastlines.push(this)
} else {
Style.parse_styles(this,Style.styles.way)
Geohash.put_object(this)
}

now I changed the latter part of if...else to

var operator = [1,-1,1,-1]
var operator2= [1,1,-1,-1]
Style.parse_styles(this,Style.styles.way)
if (this.imageWidth != 'auto') {
if (this.nodes.length == 1) {
var firstNode = null
this.nodes.clear()
for (var i = 0; i < 4; i++) {
var n = new Node
n.h = 10
n.w = 10
n.color = Glop.random_color()
n.timestamp = new Date
n.id = Math.floor(Math.random() * 10000)
n.x = this.bbox[1] - operator[i] *
this.imageWidth/2;
n.y = this.bbox[0] - operator2[i] *
this.imageWidth/2;
n.lon = Projection.x_to_lon(n.x)
n.lat = Projection.y_to_lat(n.y)
this.nodes.push(n)
if (firstNode == null) firstNode = n;
}
this.nodes.push(firstNode)
if (this.nodes.length > 1 && this.nodes.first().x ==
this.nodes.last().x && this.nodes.first().y == this.nodes.last().y)
this.closed_poly = true

this.area = Geometry.poly_area(this.nodes)
this.bbox = Geometry.calculate_bounding_box(this.nodes)

this.width = Math.abs(Projection.x_to_lon(this.bbox[1])-
Projection.x_to_lon(this.bbox[3]))
this.height = Math.abs(Projection.y_to_lat(this.bbox[0])-
Projection.y_to_lat(this.bbox[2]))
}
}
Geohash.put_object(this)

so basicly if the way is a single node way, and there is an explicit
image size defined (the default is auto, perhaps one should actually
check for image, and if auto then check the real image size...), a new
values are calculated for the way based on the image boundaries, this
way the hover and mousedown work based on the image size.

Harri

On Jul 10, 11:07 pm, Jeffrey Warren <j...@unterbahn.com> wrote:
> just fyi, if you go tohttp://cartagen.org/utility/geocodeit generates
> correct JSON, and oddly it uses "visible:true" AND "display:true" -- so one
> of those or both are necessary. Egads.
>
> Example:
>
> {"osm":{"node":[{"lat":"42.1010549","lon":"-71.0212903","visible":"true","d isplay":true,"img":"image-url.png"}]}}
Reply all
Reply to author
Forward
0 new messages