How to change dinamically an image accordingly with users choice?

Hi Experts!

I'm facing a chalenge in make an image, presented by maps, to be actualized accordingly with the user's choice.

Accordingly with the picture:
img001
The check box option bellow the map will make the map changes. Only the map changes.

Could you give me suggestions and explanations on what tecnologies may I start the task?

Thanks in advance!
Eduardo FuerteDeveloper and AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
that depends a little bit how your map is generated. Is it a static Image?
You should bind a change event to your checkboxes (can only one be selected?) and update the img source to the associated Image file.

HTH
Rainer
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
I'm using mapbox, so the map is obtained dinamically, the code is embeded in a PHP page
Example
        <?php $random = rand(10,1000) ?>
        <iframe width='105%' height='600px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/efxdadad.o31213822h8/attribution.html?q=<?php echo($random) ?>&access_token=pk.eyJ1IjoanbsasbdansdhuqyiqwueqoiwuioadmpoaspdoI0In0.Bx7VRSAwHbuEQtGyYiugBA'></iframe>
    	</div>

Open in new window


If the user changes the option another map from mapbox must be charged....

I have a  concern about how the checkbutton position interfere on the actualization, maybe it's better to put the checkbox on the top of the map.
0
zephyr_hex (Megan)DeveloperCommented:
You could likely do this with JQuery by triggering an event on selection of the checkbox, and depending on which box is selected, display the appropriate map.

Here is an example

This demo shows how to tie a change event to radio inputs based on class.  The map is changed depending on which radio is selected.

I'm assuming you already have the logic for how to actually display the map.  So you would need to modify this example to use your method for map display.

To help you along, I'll explain how my example works:

HTML (for reference)
<input type="hidden" value="http://www.lonelyplanet.com/maps/north-america/usa/los-angeles/map_of_los-angeles.jpg" id="hdnLA">
<input type="hidden" value="http://i.infopls.com/images/mnewyork.gif" id="hdnNY">
<img id="myMap" alt="LA" src="http://www.lonelyplanet.com/maps/north-america/usa/los-angeles/map_of_los-angeles.jpg" height="100" width="200">
<br/>
<input class="myRadio" type="radio" name="map" value="NY">NY
<br>
<input class="myRadio" type="radio" name="map" value="LA" checked>LA

Open in new window


JQuery:
$('.myRadio').change(function () {
    $('#myMap').prop('src', $('#hdn' + $(this).val()).val());
});

Open in new window


The JQuery above is linked to the radio inputs that have the class "myRadio".  When one of those inputs is changed, the JQuery gets the value of the newly selected radio:

 $(this).val()

Open in new window


This will be either NY or LA.  It then appends NY or LA to the string "#hdn", which results in either #hdnLA or #hdnNY.  Those correspond to the id's of two hidden inputs.  Those hidden inputs allow me to easily reference the link to each map.  I can refer to $('#hdnNY').val() to get the NY map, or $('#hdnLA').val() to get the LA map.  So, if the NY radio is selected, this code:

$('#myMap').prop('src', $('#hdn' + $(this).val()).val());

Open in new window


is shorthand for:

$('#myMap').prop('src', $('#hdnNY').val());

Open in new window


That code takes the value of the hidden field and uses it as the image source for the img tag.

So, you can use a similar structure and find what radio was selected using JQuery, and this will tell you which map you should call / display.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
I need to understand what it is you want to happen when the checkbox is checked - you say the map changes - from what to what, how does it change?

Also bear in mind that your map is inside an <iframe> unless your page creates the iframe with script then you can only change the src of the iframe - you cannot interact with the contents of the iframe.

Please can you elaborate on exactly what happens when the checkbox is checked
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Thank you for the replies.
I'm going to check just now.

Julian

When the PNAE check box is checked an appropriated map that references cities where a set of  a kind of "purchasing editals" is open - the kind is PNAE.

When the PPAIS check box is checked an appropriated map that references cities where a set of  a kind of "purchasing editals" is open - the kind is PPAIS.

If the 02 check box are marked, the 02 kinds of editals are presented.

Just for curiosity: purchasing of horticultural products from familiar farms  PNAE -
school Lunch  and PPAIS - prison food
The map is São Paulo state - Brazil and the work attends our Department of Agriculture.
So you are helping us with your posts!

I just declare the iframe at my PHP page and use the http reference...  something else must be done?
0
Julian HansenCommented:
What I am trying to establish is how the map changes - do you change the src of the iframe or do you actually need to manipulate the page the map is contained in.

1. Can all checkboxes be selected or do they operate as radio buttons
2. When you click a checkbox - what actually happens in the code to change the map - I understand from a user interface perspective what is happening - but how are you creating each of the maps? Is each checkbox linked to a map or do the maps overlay each other when a checkbox is clicked?
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Ok, now I finally meant.

The maps are actualized in mapbox site, where I configure the city icons from date to date and the references are obtained there.

img001
0
Julian HansenCommented:
Ok so are you saying that with each click of a checkbox you want to change the src of the iframe?

Are you also saying that the checkboxes are exclusive - i.e. you can only click one at a time - more like a radio button?
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
To be precise

if I  only check PNAE the PNAE  only map appears (the map defined  for PNAE in mapbox) .
if I  only check PPAIS the PPAIS only map appears (the map defined  for PPAIS in mapbox) .

If I check PNAE and PPAIS a third map defined in mapbox for the composition of PNAE and PPAIS must be charged.
All the src(s) are well defined in mapbox.
The src of iframe must be change accordingly to it.
0
Julian HansenCommented:
Switching between maps is easy - what is going to be more tricky is the combinations of checkboxes

With 7 possible combinations (including nothing selected) you would need 6 different map urls is that correct.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
My biggest concern is a code (html/ css)  that could manage the src of the iframe, after that I could simply limit the combinations.

(Just as an example
Only 02 check boxes  PNAE and PPAIS
The PNAE check box appear checked by default with PNAE map
If the user check PPAIS after the combined map appears.
If the user deselect PNAE check box, only PPAIS map appears
If the user deselect PNAE and PPAIS, return to defauilt.)
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
@zephyr_hex

Just to positioning you.
The code you suggested  is very good but unfortunatelly it doesn't run with the maps the way I changed

<html>

<input type="hidden" value="https://a.tiles.mapbox.com/v4/exxxx.xxxxx/attribution.html?access_token=pk.eyJ1xxxx" id="hdnLA">
<input type="hidden" value="https://a.tiles.mapbox.com/v4/exxxx.xxxx/page.html?access_token=pk.xxxx" id="hdnNY">

<img id="myMap" alt="PNAE" src="https://a.tiles.mapbox.com/v4/efuerte.o30822h8/attribution.html?access_token=pk.xxxx" height="500" width="1000">
<br/>
<input class="myRadio" type="radio" name="map" value="PNAE">PNAE
<br>
<input class="myRadio" type="radio" name="map" value="PPAIS" checked>PPAIS
</html>

Open in new window


Produces:
img001
Could you suggest something else?
0
Julian HansenCommented:
The simplest way of doing this is to have all 7 iframes defined on the page
<iframe src="..." id="todos" class="map-frame" />
<iframe src="..." id="pnae" class="map-frame"/>
<iframe src="..." id="ppais" class="map-frame" />
<iframe src="..." id="todospnae" class="map-frame" />
<iframe src="..." id="todosppais" class="map-frame" />
<iframe src="..." id="pnaeppais" class="map-frame" />
<iframe src="..." id="todospnaeppais" class="map-frame" />

Open in new window

Three checkboxes
<input type="checkbox" data-target="todos" class="map-select" /> TODOS
<input type="checkbox" data-target="pnae" class="map-select" /> PNAE
<input type="checkbox" data-target="ppais" class="map-select" /> PPAIS

Open in new window

CSS
.map-frame {
  display: none;
}

Open in new window

Javascript / jQuery
<script>
$(function() {
  $('.map-select').change(function() {
     var selector = '';
     $('.map-select:checked').each(function() {
        selector += $(this).data('target');
     });
     $('.map-frame').hide();
     $('#' + selector).show();
  });
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
A sample incorporating the code above can be seen here

The sample uses coloured div's in the place of iframes but the principle is the same
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
First of all, thanks for so elaborated solution

I modificated your code to:

<!doctype html>
<html>
<head>
<title>electively switching elements on/off based on combined checkbox values</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />

<style type="text/css">
.map-frame {
  display: none;
}
</style>

</head>

<body>

<div class="wrapper">
  <header>
    <div class="container">
    <h1 class="col-lg-9">Selectively switching elements on/off based on combined checkbox values</h1>
    
    </div>
  </header>

<div class="container">
<h5>Author: Julian Hansen, November 2015</h5>
<p>Click the checkboxes to see how they enable and disable layers based on the different combinations</p>


<div id="pnae">
    <iframe src="https://a.tiles.mapbox.com/v4/efuerte.o30822h8/attribution.html?access_token=pk.asjhsjhajdhajdqodqodho/-22.406/-48.647" id="pnae" class="map-frame"/>
</div>

<div id="ppais">
    <iframe src="https://a.tiles.mapbox.com/v4/efuerte.o361e76o/page.html?access_token=pk.asjhsjhajdhajdqodqodho/-22.406/-48.647" id="ppais" class="map-frame"/>
</div>


<input type="checkbox" data-target="pnae" class="map-select" /> PNAE
<input type="checkbox" data-target="ppais" class="map-select" /> PPAIS

</div>
</div>
<footer>
<div class="container">
     Copyright  &copy; 2015
</div>
</footer>


<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
  $('.map-select').change(function() {
     var selector = '';
     $('.map-select:checked').each(function() {
        selector += $(this).data('target');
     });
     $('.map-frame').hide();
     $('#' + selector).show();
  });
});
</script>
</body>
</html>

Open in new window


But it still doesn't run. Could you please give a look and point what's wrong?
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
I found what was wrong....

It runs well, naturally some adjusts needed

img001
0
Julian HansenCommented:
I am getting an unauthorized error on those URL's however what I did notice was this
<div id="pnae">
    <iframe src="..." id="pnae" class="map-frame"/>
</div>

<div id="ppais">
    <iframe src="..." id="ppais" class="map-frame"/>
</div>

Open in new window

You are enclosing your <iframe>'s in <div>'s that have the same id's as the iframe's

id's MUST be unique - you cannot have duplicate id's and expect your page to function correctly.

In my original code the <Div>'s were placeholders for the <iframes> so what you want to be doing is this
    <iframe src="..." id="pnae" class="map-frame"/>
    <iframe src="..." id="ppais" class="map-frame"/>

Open in new window

0
Julian HansenCommented:
It runs well, naturally some adjusts needed
Can I take that the problem is solved?
0
Julian HansenCommented:
One other thing I noticed you are not closing your <iframe>'s with an </iframe> but rather using the single element version <iframe/>

I have seen some erratic behaviour with doing it this way - my advice always do it like this

<iframe src="..."> ...</iframe>

Open in new window

0
Julian HansenCommented:
Final point - there need to be the same number of iframes as there are combinations of checkboxes
i.e 2^N -1

So for 2 check boxes there need to be 3 iframes
A checked on its own
B checked on its own
A AND B checked

For 3 checkboxes you would need 7 iframes

In each case you give the iframes id's named for the combination of maps they contain
TODOS on its own is todos
TODOS with PNAE is todospnae

The order is important - the concatenation of the names must be in the same order as the checkboxes are listed i.e. if you have checkboxes
<input type="checkbox" data-target="todos" /> TODOS
<input type="checkbox" data-target="pnae" /> PNAE
<input type="checkbox" data-target="ppais" /> PPAIS

Then in any concatenation of names for a combined map
todos must come before pnae and ppais
pnae must come before ppais
ppais must always be on the end.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Julian I'm going to carefully read your text

In advance what I done to run was

<div id="todos" class="map-frame">
      <iframe width='100%' height='500px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/efuerte.o3ff3f77/attribution.html?q=<?php echo($random) ?>&access_token=pk.xxxxxxx.Bx7VRSAwHbuEQtGyYiugBA'></iframe>
</div>

<div id="pnae" class="map-frame">
     <iframe width='105%' height='600px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/efuerte.o361e76o/attribution.html?q=<?php echo($random) ?>&access_token=pk.xxxxxxx'></iframe>
</div>

<div id="ppais" class="map-frame">
    <iframe width='105%' height='600px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/efuerte.o30822h8/attribution.html?q=<?php echo($random) ?>&access_token=pk.xxxxxxx.Bx7VRSAwHbuEQtGyYiugBA'></iframe>'></iframe>
</div>

Open in new window


Just of a matter of security since I'm working in a State Department and someone else could read it I had to change the token.

Our site  (been upgraded) is
http://www.codeagro.sp.gov.br/icahome/ppais

I'm  changing to radio-buttons too (with the same logic you give)
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Very qualified assistance!

To be fair I'm going to open another question to continue.

Thank you very much!
0
Julian HansenCommented:
You are most welcome.
0
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Hello Julian!

I post another question continuing this!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.