how can i overlay multiple images into the same map?

[Christopher Watson]

hey i have this map, how can i load more images into the overlay layer?

i have one overlay in one part of the map but then i want to load another in an different part of the same map?

here's my map: http://visualisationmagazine.com/dineography.htm

thanks in advance

chris

[Rossko]

> i have one overlay in one part of the map but then i want to load another in
> an different part of the same map?

I see several icon images on your map already. Would you not just add
more placemarks to your KML?

[Christopher Watson]

hi, not more icon's that i'm wanting to add, more of my own jpeg images. 

i updated the map so you can see the overlaid jpeg now. 

more of these:

function overlayAdd()

{

var sw = new google.maps.LatLng(53.389062, -1.307373) ;

var ne = new google.maps.LatLng(53.360387, -1.240082) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds, {percentOpacity:100}) ;

document.getElementById("overlayToggle").innerHTML = '<a href="javascript:overlayRemove()">Remove Overlay</a>' ;

}

so for instance:

function overlayAdd()

{

var sw = new google.maps.LatLng(53.389062, -1.307373) ;

var ne = new google.maps.LatLng(53.360387, -1.240082) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds, {percentOpacity:100}) ;

var sw = new google.maps.LatLng(51.987062, -1.007373) ;

var ne = new google.maps.LatLng(56.360387, -1.940082) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

overlay = new ProjectedOverlay(map,'california.jpg', bounds, {percentOpacity:100}) ;

document.getElementById("overlayToggle").innerHTML = '<a href="javascript:overlayRemove()">Remove Overlay</a>' ;

}

More jpegs added to the map at different co-ordinates.

Can I do this? and how? doesnt work doing what i did above.

[geoco...@gmail.com]

On Jul 19, 5:51 am, Christopher Watson <chris.watso...@googlemail.com>
wrote:

> hi, not more icon's that i'm wanting to add, more of my own jpeg images.
>
> i updated the map so you can see the overlaid jpeg now.
>
> more of these:
>

> *function overlayAdd()*
> *{*
> *var sw = new google.maps.LatLng(53.389062, -1.307373) ;*
> *var ne = new google.maps.LatLng(53.360387, -1.240082) ;*
> *var bounds = new google.maps.LatLngBounds(sw,ne) ;*
> *overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds,
> {percentOpacity:100}) ;*
> *document.getElementById("overlayToggle").innerHTML = '<a
> href="javascript:overlayRemove()">Remove Overlay</a>' ;*
> *}*
>
> so for instance:
>
> *function overlayAdd()*
> *{*
> *var sw = new google.maps.LatLng(53.389062, -1.307373) ;*
> *var ne = new google.maps.LatLng(53.360387, -1.240082) ;*
> *var bounds = new google.maps.LatLngBounds(sw,ne) ;*
> *overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds,
> {percentOpacity:100}) ;*
> *
> *
> *var sw = new google.maps.LatLng(51.987062, -1.007373) ;*
> *var ne = new google.maps.LatLng(56.360387, -1.940082) ;*
> *var bounds = new google.maps.LatLngBounds(sw,ne) ;*
> *overlay = new ProjectedOverlay(map,'california.jpg', bounds,
> {percentOpacity:100}) ;*
> *
> *
> *document.getElementById("overlayToggle").innerHTML = '<a
> href="javascript:overlayRemove()">Remove Overlay</a>' ;*
> *}*
> *
> *

> More jpegs added to the map at different co-ordinates.
>
> Can I do this? and how? doesnt work doing what i did above.

It should work (although I would suggest using different variables for
the different overlays).
Where is the map that you attempted this on?
What javascript errors do you get?
What do you mean by "doesn't work?

-- Larry

[Christopher Watson]

my apologies. trying a few things out at once. double checked the code now, working and put it on here: http://visualisationmagazine.com/dineography.htm

what were you suggesting about different variables?

Chris Watson

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

Blog | Muyment App

tweeted: "Connected States of America" graphics by AT&T and the SENSEable City Lab at MIT http://t.co/5qexCyg via @SenseableCity Follow @visualthinkmap Reply Retweet   23:02 Jul-18

  Get this email app!  

Signature powered by WiseStamp

--
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]

On Jul 19, 7:03 am, Christopher Watson <chris.watso...@googlemail.com>
wrote:

> my apologies. trying a few things out at once. double checked the code now,
> working and put it on here:http://visualisationmagazine.com/dineography.htm
>
> what were you suggesting about different variables?

Both ProjectedOverlays use the same variable.

overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds,
{percentOpacity:100}) ;

overlay = new ProjectedOverlay(map,'sketchbook%20-%20idea%20of
%20dineography%20-%20lres.jpg', bounds, {percentOpacity:100}) ;

Use different variable names (overlay1, overlay2 for example), you
might get it to "work" that way but you won't be able to control them
after they are created.

-- Larry

>
> Chris Watson
>
> Portfolio |http://vism.ag/inkplay

> Vis Mag |http://vism.ag<http://vism.ag/inkplay>
> Creative Maps |http://vism.ag/maps
> Blog | Muyment App<http://visualisationmagazine.com/blogvisualthinkmap/2011/07/muyment-a...>
> [image: Twitter] <http://twitter.com/visualthinkmap>tweeted: "Connected

> States of America" graphics by AT&T and the SENSEable City Lab at MIThttp://t.co/5qexCygvia @SenseableCity

> Follow @visualthinkmap <http://twitter.com/visualthinkmap>
> <http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=9...>
> Reply<http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=9...>
> <http://twitter.com/?status=RT%20%40visualthinkmap%3A%20%22Connected%2...>
> Retweet<http://twitter.com/?status=RT%20%40visualthinkmap%3A%20%22Connected%2...>
>    23:02 Jul-18<http://twitter.com/visualthinkmap/statuses/93078109481484290>
>   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 Tue, Jul 19, 2011 at 11:47 AM, geocode...@gmail.com <geocode...@gmail.com

[Christopher Watson]

ok. see what you mean. i dont mind controlling them all at once leaving them all under overlay variable. 

thanks

can you help with these:

http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic%2Fgoogle-maps-js-api-v3%2FeNgSdbcq6xU%2Fdiscussion

http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic%2Fgoogle-maps-js-api-v3%2Fq4fl1FBC55I%2Fdiscussion

chris

Chris Watson

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

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

Blog | Muyment App

tweeted: http://t.co/ZTgW5X5 - interesting idea Follow @visualthinkmap Reply Retweet   12:13 Jul-19

  Get this email app!  

Signature powered by WiseStamp

[geoco...@gmail.com]

On Jul 19, 7:50 am, Christopher Watson <chris.watso...@googlemail.com>
wrote:

> ok. see what you mean. i dont mind controlling them all at once leaving them
> all under overlay variable.

You can't control them all, only the last one assigned.

>
> thanks
>
> can you help with these:
>

> http://code.google.com/apis/maps/documentation/javascript/forum.html?...
>
> h
> ttp://code.google.com/apis/maps/documentation/javascript/forum.html?place=t opic%2Fgoogle-maps-js-api-v3%2Fq4fl1FBC55I%2Fdiscussion

>
> chris
>
> Chris Watson
>
> Portfolio |http://vism.ag/inkplay

> Vis Mag |http://vism.ag<http://vism.ag/inkplay>
> Creative Maps |http://vism.ag/maps
> Blog | Muyment App<http://visualisationmagazine.com/blogvisualthinkmap/2011/07/muyment-a...>

> [image: Twitter] <http://twitter.com/visualthinkmap>tweeted:http://t.co/ZTgW5X5- interesting idea

> Follow @visualthinkmap <http://twitter.com/visualthinkmap>
> <http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=9...>
> Reply<http://twitter.com/?status=@visualthinkmap%20&in_reply_to_status_id=9...>

> <http://twitter.com/?status=RT%20%40visualthinkmap%3A%20http%3A%2F%2Ft...>
> Retweet<http://twitter.com/?status=RT%20%40visualthinkmap%3A%20http%3A%2F%2Ft...>
>    12:13 Jul-19<http://twitter.com/visualthinkmap/statuses/93277265646977020>

>   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 Tue, Jul 19, 2011 at 12:30 PM, geocode...@gmail.com <geocode...@gmail.com

[Christopher Watson]

ok. no probs. last one is alright.

Chris Watson

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

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

Signature powered by WiseStamp

[Christopher Watson]

Hey, thought about another mapping project i want to do, how would i control all the overlays? could they be grouped to one?

[geoco...@gmail.com]

On Jul 20, 8:03 am, Christopher Watson <chris.watso...@googlemail.com>
wrote:

> Hey, thought about another mapping project i want to do, how would i control
> all the overlays? could they be grouped to one?

I'm not sure what you mean by "grouped to one". If you want to
control them, you need to keep a variable which will let you do that
(maintains a unique reference to each overlay). You could push all
the references in an array and write a function which allows you to do
the same thing to all of them.

-- Larry

[Armand Lems]

Hi

just create an array and push them in
then you can access each overlay with the indice, or with a for-loop
There is an example with markers here :

http://code.google.com/apis/maps/documentation/javascript/overlays.html#RemovingOverlays

On Jul 20, 2:03 pm, Christopher Watson <chris.watso...@googlemail.com>
wrote:

[Christopher Watson]

hey, even with an example, i'm struggling to adapt. sorry. can anyone point out where its going wrong?

if i can push the overlays into this array:

var overlay = [];

with this it just keeps error'ing as not defined. 

can i still use the setOpacity to control all the overlays and change their opacity? or have i to settle on using the clearOverlays()?

<a href="javascript:overlay.setOpacity(25)" style="text-decoration: none;">25%</a>

appreciate the help.

thanks

chris

[Christopher Watson]

forgot a link: 

http://visualisationmagazine.com/dineography2.htm

[geoco...@gmail.com]

On Jul 20, 8:28 pm, Christopher Watson <chris.watso...@googlemail.com>
wrote:

> hey, even with an example, i'm struggling to adapt. sorry. can anyone point
> out where its going wrong?

forgot a link:
http://visualisationmagazine.com/dineography2.htm

>

> if i can push the overlays into this array:
>
> var overlay = [];
>
> with this it just keeps error'ing as not defined.

function overlayAdd()
{
overlays.push(overlay); <-------- what is overlay here?

var sw = new google.maps.LatLng(53.389062, -1.307373) ;

var ne = new google.maps.LatLng(53.360387, -1.240082) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds,

{percentOpacity:100}) ; <--- now overlay is something useful

---
try something more like this:
function overlayAdd()
{

var sw = new google.maps.LatLng(53.389062, -1.307373) ;

var ne = new google.maps.LatLng(53.360387, -1.240082) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

var overlay = new ProjectedOverlay(map,'dinnington.jpg', bounds,
{percentOpacity:100}) ; <--- now overlay is something useful
overlays.push(overlay); <-------- now push it on the array

>
> can i still use the setOpacity to control all the overlays and change their
> opacity?

Yes. By iterating through the array:

for (var i=0; i < overlays.length; i++) {
overlay[i].setOpacity(desiredOpacity);

}

> or have i to settle on using the clearOverlays()?
>
> <a href="javascript:overlay.setOpacity(25)" style="text-decoration:
> none;">25%</a>

to use it like this I would write a function:
function setOpacities(desiredOpacity) {
for (var i=0; i < overlays.length; i++) {
overlay[i].setOpacity(desiredOpacity);
}
}
then this should work:
<a href="javascript:setOpacities(25)" style="text-decoration:

[Christopher Watson]

Yay. been testing out your codes larry and finally I managed to get it to work. was throwing me when it was saying overlays not defined. 

After enough tweaking of realising it was the fact that:

 var overlay = []; 

didn't have an 's' on the end like:

overlays.push(overlay);

it helped fix the rest. 

I was trying this:

var sw = new google.maps.LatLng(53.578442,-1.495214) ;

var ne = new google.maps.LatLng(53.587869,-1.4747) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

var overlay = new ProjectedOverlay(map,'eastfield.jpg', bounds, {percentOpacity:100}) ;

overlays.push(overlay);

  for (var i=0; i < overlays.length; i++) { 

    overlays[i].setOpacity(desiredOpacity); 

  } 

But desiredOpacity wasn't defining. So when i changed into its own function like you suggested:

var sw = new google.maps.LatLng(53.578442,-1.495214) ;

var ne = new google.maps.LatLng(53.587869,-1.4747) ;

var bounds = new google.maps.LatLngBounds(sw,ne) ;

var overlay = new ProjectedOverlay(map,'eastfield.jpg', bounds, {percentOpacity:100}) ;

overlays.push(overlay);

}

function setOpacities(desiredOpacity) { 

  for (var i=0; i < overlays.length; i++) { 

    overlays[i].setOpacity(desiredOpacity); 

  } 

} 

}

It worked and was defined. So annoying that it was something as small as an s that kept bugging it. 

if needed, working example here: http://visualisationmagazine.com/dineography.htm

thanks again larry, would have really struggled to write the setOpacities to keep them all controlled by the javascripts. would have needed to see it in an example somewhere. 

but again many thanks everyone.