html handling geoxml feed

62 views
Skip to first unread message

Christopher Watson

unread,
Jul 23, 2011, 8:23:20 PM7/23/11
to google-map...@googlegroups.com
hey all, 

i have a very long list of markers in an xml file (...to be longer). they flow the xml into 4 columns underneath the map through a javascript function but letting me render them into html tables. 


now the problem is if you click 'london' and it loads the placemarks, they all go into a giant long list in the 1st column, rather than spread/spill over into the 4 columns. i'm trying to limit the height of the columns so they have to flow over by using div's, but its not restricting the height. is it possible and how can i make it restrict columns to a certain height and them spill over?

i'm using div's so that if there are too many for all four columns i can use div overflow attributes on the last one. if i put the height size in the div thats in the body, it flows straight past it, and overlays the list over the top of my webpage.

(think this is happening because the 4 columns are recognising how many xmls there are and has shared the whole xml - as there are some in manchester, la - and if you click manchester, they are in the 3rd and 4th columns) can they all automatically shuffle, start displaying at the beginning?

geoco...@gmail.com

unread,
Jul 23, 2011, 8:44:12 PM7/23/11
to Google Maps JavaScript API v3
On Jul 23, 8:23 pm, Christopher Watson <chris.watso...@googlemail.com>
wrote:
This line in the function addAddbbarEntry determines how many entries
are in each column:

var bbar_entries = Math.floor(doc.placemarks.length/numColumns);

doc.placemarks.length is the total number of placemarks in your kml.
You need to change it to be the total number of placemarks that are
going to be displayed in the "list".

-- Larry

geoco...@gmail.com

unread,
Jul 24, 2011, 9:12:35 AM7/24/11
to Google Maps JavaScript API v3
On Jul 23, 8:44 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
Note that computing the "total number of placemarks that are currently
displayed" without slowing down the load of the map is going to take
some thought. You don't want to process through the array of
placemarks more than once if you can help it, particularly as the
number of placemarks gets larger.

  -- Larry

Christopher Watson

unread,
Jul 24, 2011, 9:33:12 AM7/24/11
to google-map...@googlegroups.com
hey, 

i'm just perplexing myself over it now. found the  function addAddbbarEntry and not the faintest, although i try and search endlessly through geocodezip.com and the geoxml3 http://code.google.com/p/geoxml3.


function AddbbarEntry(index, numColumns, doc, bbarObj, bbarHtml) {
   var bbar_entries = Math.floor(doc.placemarks.list/numColumns);
   var column = Math.floor(index/bbar_entries)+1;
// alert("column="+column+", index="+index+", total number="+doc.placemarks.list.size == 10);   
   bbarObj[column] += bbarHtml;
}

but i dont know how to make it calculate the 'number of placemarks that are 
going to be displayed in the "list".'


i could imagine it slowing the map. i'm suspecting it would keep having to perform that calculation as the user might say, 

  1. click and center map on london
  2. move the map to navigate around it
  3. search their area of london with geolocate search box i put there, because it isnt in view and they see it as easier to find with that
  4. click on a placemark (map centers on that)
  5. if they like my site that much, think "i'm in manchester regularly, whats there?"
  6. hmm, whats this placemark (map moves again to center on placemark)
  7. click show all in sidebar as they have been zooming a little and want a refresh - or - click london again to refres
...i'm assuming these all would be making it perform this calculation of how many placemarks are on show? does it need to know the total number?

say there are 50 in the map window, but my columns at 10 each are 4 = 40, cant the remaining just display in a... what i assumed... hoped a <div overflow=drop down> (not checked the div code yet, just seen it before)? does it need to calculate how many are on show?


but yeah, not sure how to make them spill into 4 columns with list, this is my attempt above. cant find any examples or documentation to see it done.


geoco...@gmail.com

unread,
Jul 24, 2011, 10:54:56 AM7/24/11
to Google Maps JavaScript API v3
On Jul 24, 9:33 am, Christopher Watson <chris.watso...@googlemail.com>
wrote:
> hey,
>
> i'm just perplexing myself over it now. found the  function addAddbbarEntry
> and not the faintest, although i try and search endlessly through
> geocodezip.com and the geoxml3http://code.google.com/p/geoxml3.
>
> i got to this so far:http://creativemaps.vism.ag/indexheight.htm
>
> function AddbbarEntry(index, numColumns, doc, bbarObj, bbarHtml) {
>    var bbar_entries = Math.floor(doc.placemarks.list/numColumns);
>    var column = Math.floor(index/bbar_entries)+1;
> // alert("column="+column+", index="+index+", total
> number="+doc.placemarks.list.size == 10);  
>    bbarObj[column] += bbarHtml;
>
> }
>
> but i dont know how to make it calculate the 'number of placemarks that are
> going to be displayed in the "list".'
>
> i could imagine it slowing the map. i'm suspecting it would keep having to
> perform that calculation as the user might say,
>
>    1. click and center map on london
>    2. move the map to navigate around it
>    3. search their area of london with geolocate search box i put there,
>    because it isnt in view and they see it as easier to find with that
>    4. click on a placemark (map centers on that)
>    5. if they like my site that much, think "i'm in manchester regularly,
>    whats there?"
>    6. hmm, whats this placemark (map moves again to center on placemark)
>    7. click show all in sidebar as they have been zooming a little and want
>    a refresh - or - click london again to refres
>
> ...i'm assuming these all would be making it perform this calculation of how
> many placemarks are on show? does it need to know the total number?
>
> say there are 50 in the map window, but my columns at 10 each are 4 = 40,
> cant the remaining just display in a... what i assumed... hoped a <div
> overflow=drop down> (not checked the div code yet, just seen it before)?
> does it need to calculate how many are on show?
>
> but yeah, not sure how to make them spill into 4 columns with list, this is
> my attempt above. cant find any examples or documentation to see it done.

There aren't any examples that do that. I wrote the code that divides
the sidebar into columns as a proof of concept for you. The code that
just displays the items currently visible was already there. I didn't
have a good general solution to this problem at that time either. The
"best" solution for you will depend on your desired result and the
number of placemarks that are expected to be displayed.

-- Larry

geoco...@gmail.com

unread,
Jul 24, 2011, 11:07:21 AM7/24/11
to Google Maps JavaScript API v3
On Jul 24, 10:54 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
Actually, if the ordering of the list doesn't matter. If instead of:
A F K ...
B G L ...
C H M ...
D I N ...
E J O ...

having:
A B C D
E F G H
I J K L
...

You could just have the code fill in the columns as it goes, without
needing to know the total number expected.

-- Larry

Christopher Watson

unread,
Jul 24, 2011, 3:13:14 PM7/24/11
to google-map...@googlegroups.com
that would be great. so what ever is visible in the map at any time just fills the bottom bar sideways as you say,

A B C D
E F G H 

... rather than try to limit the vertical as it's doing now,

A
B
C
D
E
F
G
H

... would solve adding more code functions, not really concerned as you say with any totals visible. 

can the dividing of the bottom bar into 4 columns be easily made to flow horizontally as you suggest rather than trying to fix the vertical?

how? 


thats a perfect solution if it can fill columns sideways. was a design problem of it taking you so far away from the map doing it vertically, when i have all that page space that i want it to go into.

Christopher Watson

unread,
Aug 11, 2011, 10:37:42 AM8/11/11
to google-map...@googlegroups.com
hey larry, 

how can i do this, 

'You could just have the code fill in the columns as it goes, without 
needing to know the total number expected.'

so to achieve this

A B C D
E F G H 

thanks

chris

Rossko

unread,
Aug 11, 2011, 1:13:22 PM8/11/11
to Google Maps JavaScript API v3
> how can i do this,
>
> 'You could just have the code fill in the columns as it goes, without
> needing to know the total number expected.'

Column pointer = 1
loop over column data
do whatever with data into column indicated by pointer
increment pointer
if pointer > max (say four) then pointer = 1
next data item

geoco...@gmail.com

unread,
Aug 11, 2011, 2:18:03 PM8/11/11
to Google Maps JavaScript API v3
I think it is easier than that (I thought I had put together an
example, but apparently not).
Put first result in column 1, second result in column, etc
wrap to first column for result 5, put result 6 in column, etc

-- Larry

Christopher Watson

unread,
Aug 11, 2011, 4:54:37 PM8/11/11
to google-map...@googlegroups.com
sorry guys. the example might have been right in front of me and I am no doubt stretching my coding skills but i'm not sure how to change the code to make it fill 

A B C D 
E F ....

if i could see where it is in documentation i can trial and error, and i'm assuming i'd change here: 

function AddbbarEntry(index, numColumns, doc, bbarObj, bbarHtml) {
   var bbar_entries = Math.floor(doc.placemarks.length/numColumns);
   var column = Math.floor(index/bbar_entries)+1;
// alert("column="+column+", index="+index+", total number="+doc.placemarks.length);   
   bbarObj[column] += bbarHtml;
}


but, dont know what to do with it. sorry. any links you can share to help would be great.

cheers

chris



Chris Watson

Portfolio | http://vism.ag/inkplay 
Vis Mag | http://vism.ag
Creative Maps | http://vism.ag/maps 

Twitter tweeted: The Visual Think Map Daily is out! http://bit.ly/b8a7pV ▸ Top stories today via @armano
  Get this email app!  


Chris Watson

Portfolio | http://vism.ag/inkplay 
Vis Mag | http://vism.ag
Creative Maps | http://vism.ag/maps 

Twitter tweeted: The Visual Think Map Daily is out! http://bit.ly/b8a7pV ▸ Top stories today via @armano
  Get this email app!  

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


geoco...@gmail.com

unread,
Aug 11, 2011, 7:03:00 PM8/11/11
to Google Maps JavaScript API v3
On Aug 11, 1:54 pm, Christopher Watson <chris.watso...@googlemail.com>
wrote:
> sorry guys. the example might have been right in front of me and I am no
> doubt stretching my coding skills but i'm not sure how to change the code to
> make it fill
>
> A B C D
> E F ....
>
> if i could see where it is in documentation i can trial and error, and i'm
> assuming i'd change here:

There is no documentation that describes this, it is software
algorithm design.

As I said, I started on an example that did this (it should be pretty
simple/straightforward), but apparently got interrupted and didn't
finish it and post it. I will try to find it and finish it as time
permits, but I don't know when that will be.

-- Larry

>
> function AddbbarEntry(index, numColumns, doc, bbarObj, bbarHtml) {
>    var bbar_entries = Math.floor(doc.placemarks.length/numColumns);
>    var column = Math.floor(index/bbar_entries)+1;
> // alert("column="+column+", index="+index+", total
> number="+doc.placemarks.length);
>    bbarObj[column] += bbarHtml;
>
> }
>
> but, dont know what to do with it. sorry. any links you can share to help
> would be great.
>
> cheers
>
> chris
>
> Chris Watson
>
> Portfolio |http://vism.ag/inkplay
> Vis Mag |http://vism.ag<http://vism.ag/inkplay>
> Creative Maps |http://vism.ag/maps
> Blog | Photo Data
> App<http://visualisationmagazine.com/blogvisualthinkmap/2011/08/photo-dat...>
> [image: Twitter] <http://twitter.com/visualthinkmap>tweeted: The Visual
> Think Map Daily is out!http://bit.ly/b8a7pV▸ Top stories today via @armano
> Follow @visualthinkmap <http://twitter.com/visualthinkmap>
> <http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=1...>
> Reply<http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=1...>
> <http://twitter.com/?status=RT%20%40visualthinkmap%3A%20The%20Visual%2...>
> Retweet<http://twitter.com/?status=RT%20%40visualthinkmap%3A%20The%20Visual%2...>
>    19:29 Aug-11<http://twitter.com/visualthinkmap/statuses/101721884831395840>
>   Get this email app!
> <http://www.wisestamp.com/apps/twitter?utm_source=extension&utm_medium...>
>
>  Signature powered by
> <http://r1.wisestamp.com/r/landing?promo=4&dest=http%3A%2F%2Fwww.wises...>
> WiseStamp<http://r1.wisestamp.com/r/landing?promo=4&dest=http%3A%2F%2Fwww.wises...>
>
> Chris Watson
>
> Portfolio |http://vism.ag/inkplay
> Vis Mag |http://vism.ag<http://vism.ag/inkplay>
> Creative Maps |http://vism.ag/maps
> Blog | Photo Data
> App<http://visualisationmagazine.com/blogvisualthinkmap/2011/08/photo-dat...>
> [image: Twitter] <http://twitter.com/visualthinkmap>tweeted: The Visual
> Think Map Daily is out!http://bit.ly/b8a7pV▸ Top stories today via @armano
> Follow @visualthinkmap <http://twitter.com/visualthinkmap>
> <http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=1...>
> Reply<http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=1...>
> <http://twitter.com/?status=RT%20%40visualthinkmap%3A%20The%20Visual%2...>
> Retweet<http://twitter.com/?status=RT%20%40visualthinkmap%3A%20The%20Visual%2...>
>    19:29 Aug-11<http://twitter.com/visualthinkmap/statuses/101721884831395840>
>   Get this email app!
> <http://www.wisestamp.com/apps/twitter?utm_source=extension&utm_medium...>
>
>  Signature powered by
> <http://r1.wisestamp.com/r/landing?promo=4&dest=http%3A%2F%2Fwww.wises...>
> WiseStamp<http://r1.wisestamp.com/r/landing?promo=4&dest=http%3A%2F%2Fwww.wises...>
> On Thu, Aug 11, 2011 at 7:18 PM, geocode...@gmail.com
> <geocode...@gmail.com>wrote:

geoco...@gmail.com

unread,
Aug 11, 2011, 10:45:00 PM8/11/11
to Google Maps JavaScript API v3
On Aug 11, 7:03 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Aug 11, 1:54 pm, Christopher Watson <chris.watso...@googlemail.com>
> wrote:
>
> > sorry guys. the example might have been right in front of me and I am no
> > doubt stretching my coding skills but i'm not sure how to change the code to
> > make it fill
>
> > A B C D
> > E F ....
>
> > if i could see where it is in documentation i can trial and error, and i'm
> > assuming i'd change here:
>
> There is no documentation that describes this, it is software
> algorithm design.
>
> As I said, I started on an example that did this (it should be pretty
> simple/straightforward), but apparently got interrupted and didn't
> finish it and post it.  I will try to find it and finish it as time
> permits, but I don't know when that will be.

Not perfect, but does the four column thing.
http://www.geocodezip.com/geoxml3_test/creativemaps_vism_ag_indexheightB.html

Christopher Watson

unread,
Aug 12, 2011, 5:47:32 PM8/12/11
to google-map...@googlegroups.com
thanks so much larry. perfect. 

was just a few lines extra here and there but i'd have had no idea what to write. 

its sad but for me designer those little things are important and was annoying that they fell down one side. 

thanks



Chris Watson

Portfolio | http://vism.ag/inkplay 
Vis Mag | http://vism.ag

Creative Maps | http://vism.ag/maps 

Twitter tweeted: The Visual Think Map Daily is out! http://t.co/lLMGBTa ▸ Top stories today via @mslima @burodestruct @interbrand @blprnt
  Get this email app!  
Reply all
Reply to author
Forward
0 new messages