Using dropdowns with multiple if statements

Ask the community
,
1

Hi

I have an image of a map and have placed some VectorImage icons on it to show certain towns (e.g. ‘London’, ‘Birmingham’, ‘Glasgow’, ‘Cardiff’, ‘Manchester’, ‘Bristol’). I have two dropdowns which I want to control which icons are shown. The dropdowns are ‘journey time’ and ‘country’.

What I want is to be able to control which towns(icons) are shown, depending on which options are selected on the dropdown.

For example, if journey time was set to ‘less than 2 hours’ and country was set to ‘england’, i would want all cities to be hidden except Birmingham and London. If journey time was set to ‘less than 4 hours’ and ‘wales’, i would want all cities to be hidden, except for Cardiff

What is the best way of doing this? I had thought that using a series of nested if statements would be the way to do it, but can’t seem to make them work

Thank you!

2

The best way of doing this, is to create a DATABASE with all cities and their x-y-coordinates (or even use latitudes and longitudes) to determine the distances between two selected cities in two corresponding dropdowns and then show all founded cities which fits this distance-criteria in your Cities-DATABASE.

Then you won’t have to hardcode if-queries for every distance-scenario. :wink:

Edit: This way…(to be continued)…

https://www.media-junkie.com/uk-map

656×624 58 KB

909×819 93.7 KB

Take also a look onto CONSOLE :slightly_smiling_face:

3

Hey
Thanks so much for the quick reply - looks like it could be a great way of doing it, especially as you say that the tool and the database avoid the need to hard-code stuff.

Stupid question perhaps, but the map tool you provide the link to, how do you actually import it into Wix?

4

I created this tool yesterday by using an map-image + a map-PIN-image (RED + GREEN) and some Code, which i will show you later, when i am at my PC

5

Hello again, you will need this…

import wixWindow from 'wix-window';import wixData from 'wix-data';var greenPicSrc, query

$w.onReady(function () {find_CityData ()let redPicSrc = "https://static.wixstatic.com/media/b03143_0db0ef393f4b45d2a155fa87fa115cce~mv2.png"$w("#GRP").children.forEach(e => {
        e.onMouseIn(event => {let itemID = event.target.id
            $w('#'+itemID).src = greenPicSrc
            $w('#'+itemID).tooltip = itemID
        })

        e.onMouseOut(event => {let itemID = event.target.id
 
            $w('#'+itemID).src = redPicSrc
            $w('#'+itemID).tooltip = itemID
        })

        e.onClick(event => {let itemID = event.target.id
            console.log("ID/City: ", itemID)find_CityData(itemID)})})})function find_CityData (itemID) {if(itemID!==undefined) {
        wixData.query("United-Kingdom").eq("city", itemID).find().then((res)=>{query=res.items
 let firstItem = res.items[0];   console.log("City-Data: ", firstItem)
            greenPicSrc = firstItem.pic;    console.log(greenPicSrc)if(firstItem.xcoordinate!==undefined && firstItem.ycoordinate!==undefined) {let xCoordinate = Number(firstItem.xcoordinate); console.log("X-Coordinate: ", xCoordinate)let yCoordinate = Number(firstItem.ycoordinate); console.log("Y-Coordinate: ", yCoordinate)
                wixWindow.scrollTo((xCoordinate), (yCoordinate/3), {"scrollAnimation": true});}else {"This CITY has no koordinates in DB !!!"}})}else{
        wixData.query("United-Kingdom").find().then((res)=>{query=res.items
 let firstItem = res.items[0];   console.log("City-Data: ", firstItem)
            greenPicSrc = firstItem.pic;    console.log("Green-Pic-src: ", greenPicSrc)})}}

Try to rebuild the shown example.
Your next step would be to make some calculations of x-y-coordinates and something like a multiplier and the map which you choose should have a suitable scale.

Than you would be able to find the right multiplier and multiply it with the calculated distance (between the given koordinates of two different cities on your map).

This was my idea related to your question.
And also do not forget to create the related DATABASE, for this little project.

Good luck and happy coding.:wink: