Zoom to or highlight polygon using drop down list

151 views
Skip to first unread message

Rick

unread,
Sep 11, 2011, 3:40:18 AM9/11/11
to google-map...@googlegroups.com
http://www.yohman.com/students/ricardo/survey3.html

I am working on a survey that incorporates a map for reference. The user votes for streets from a drop down list. I would like the map to zoom to and either highlight the polyline for the selected street, drop a marker on it, or only display that polyline on the map. The goal is to give a user a visual reference of the to/from limits of the street they are selecting. What is the best approach to accomplish this?

The drop down list was entered using HTML. I have seen similar examples http://www.advocacy.ucla.edu/Maps/Assembly_map.html using fusion tables. Am i better off using this approach? If this approach is better, how can I convert my KML into a visualized fusion table that keeps the same color formatting?

Thank You


geoco...@gmail.com

unread,
Sep 11, 2011, 9:51:48 AM9/11/11
to Google Maps JavaScript API v3
On Sep 11, 3:40 am, Rick <mr.ricardogutier...@gmail.com> wrote:
> http://www.yohman.com/students/ricardo/survey3.html
>
> I am working on a survey that incorporates a map for reference. The user
> votes for streets from a drop down list. I would like the map to zoom to and
> either highlight the polyline for the selected street, drop a marker on it,
> or only display that polyline on the map. The goal is to give a user a
> visual reference of the to/from limits of the street they are selecting.
> What is the best approach to accomplish this?

It can't be done directly with either KmlLayer or FusionTablesLayer
(at least currently).

>
> The drop down list was entered using HTML. I have seen similar examples
http://www.advocacy.ucla.edu/Maps/Assembly_map.html
> using fusion tables. Am i better off using this approach?

Depends on what you are comfortable with. That map uses the geoxml3
extension to google maps.
Your kml is fairly complex (lots of small polylines), so you probably
want to use either KmlLayer or FusionTablesLayer to display it, then
implement the highlighting/zoom to functionality using geoxml3.

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/existing_kml.xml

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/fiveyr_kml.xml

> If this approach is better, how can I convert my KML into a visualized fusion table that keeps the same color
> formatting?

I don't know of any way. You might vote for this enhancement request:
http://code.google.com/p/fusion-tables/issues/detail?id=594

The only way I know to do it is to create a column and use that to
style the polylines, given that the styling already exists in your
kml, it would be really nice if you could import that with your kml.

-- Larry

>
> Thank You

geoco...@gmail.com

unread,
Sep 11, 2011, 10:57:39 AM9/11/11
to Google Maps JavaScript API v3
On Sep 11, 9:51 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Sep 11, 3:40 am, Rick <mr.ricardogutier...@gmail.com> wrote:
>
> >http://www.yohman.com/students/ricardo/survey3.html
>
> > I am working on a survey that incorporates a map for reference. The user
> > votes for streets from a drop down list. I would like the map to zoom to and
> > either highlight the polyline for the selected street, drop a marker on it,
> > or only display that polyline on the map. The goal is to give a user a
> > visual reference of the to/from limits of the street they are selecting.
> > What is the best approach to accomplish this?
>
> It can't be done directly with either KmlLayer or FusionTablesLayer
> (at least currently).

Another option: you might be able to use FusionTablesLayer "dynamic"
styling to highlight the line.

-- Larry

>
>
>
> > The drop down list was entered using HTML. I have seen similar examples
>
> http://www.advocacy.ucla.edu/Maps/Assembly_map.html
>
> > using fusion tables. Am i better off using this approach?
>
> Depends on what you are comfortable with.  That map uses the geoxml3
> extension to google maps.
> Your kml is fairly complex (lots of small polylines), so you probably
> want to use either KmlLayer or FusionTablesLayer to display it, then
> implement the highlighting/zoom to functionality using geoxml3.
>
> http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.htm...
>
> http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.htm...

Rick

unread,
Sep 26, 2011, 4:23:14 PM9/26/11
to google-map...@googlegroups.com
Thanks for the response. How would I populate a drop down list with the KML names so that the zoom to functionality in the geoxml3 can be used via a drop down list?

Thanks

geoco...@gmail.com

unread,
Sep 26, 2011, 5:11:33 PM9/26/11
to Google Maps JavaScript API v3
Instead of creating a "sidebar", change the code to create a drop down
list (this question has come up before, there are examples of how to
do that both in this group, the v2 group and on the web; it really
isn't a google maps API question...)

-- Larry

>
> Thanks

Rick

unread,
Nov 15, 2011, 1:12:32 AM11/15/11
to Google Maps JavaScript API v3
I wanted to thank you again for trying to help me out. I ended up
finishing the site today: http://yohman.com/students/ricardo/BPIT/survey.html
Unfortunately, my javascript skills were not up to the challenge of
implementing the examples you shared with me but nonetheless I wanted
to thank you again for showing me that it was possible and giving me
something to think about.

Rick

On Sep 26, 1:11 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Sep 26, 1:23 pm, Rick <mr.ricardogutier...@gmail.com> wrote:
>
> > Thanks for the response. How would I populate adropdownlist with the KML
> > names so that thezoomto functionality in the geoxml3 can be used via a
Reply all
Reply to author
Forward
0 new messages