Features Portfolio Home
Vector Image Interactive Map
Used to display information related to areas in a map when clicked.
To close the information the icon needs a to clicked a second time.
On desktop the map will display a pop up element wih can store any kind of information in this exmaple it has teh school logo, name and some extra info.
There are 4 different element states:
Disabled: Light gray - Element has no interaction.
Inactive: Dark gray - Element has interaction but it hasn't been activated.
Hover: Light primary color - Element has the cursor over it but interaction ain't been triggered.
Active: Primary color - Element were clicked and interaction is active
On mobile the map will turn all the interactive elements into their active state, disable the click action and display al the information as accordions below the map.
Amount can be determined by the coder.
On desktop the map will display a pop up element wih can store any kind of information in this exmaple it has teh school logo, name and some extra info.
There are 4 different element states:
Disabled: Light gray - Element has no interaction.
Inactive: Dark gray - Element has interaction but it hasn't been activated.
Hover: Light primary color - Element has the cursor over it but interaction ain't been triggered.
Active: Primary color - Element were clicked and interaction is active
On mobile the map will turn all the interactive elements into their active state, disable the click action and display al the information as accordions below the map.
Amount can be determined by the coder.
Oregon
Oregon Public School 180 Students
California
California High School 300 Students
Utah
Utah High School 130 Students
Wyoming
Wyoming Preparatory 130 Students
North Dakota
Dakota Elementary School 180 Students
Nebraska
Nebraska High School 300 Students
Oklahoma
Oklahoma Academy 136 Students
Texas
Texas Academy 240 Students
Missouri
Missouri Preparatory 230 Students
Wisconsin
Wisconsin Academy 413 Students
Ohio
Ohio Elementary 120 Students
West Virginia
Virginia Middle School 120 Students
Tennessee
Tennessee Preparatory 130 Students
Mississippi
Mississippi Academy 186 Students
South Carolina
Carolina High School 130 Students
Vermont
Vermont High School 120 StudentsAccordion Panel
1.-Oregon
Oregon
Oregon Public School 180 Students2.-California
California
California High School 300 Students3.-Utah
Utah
California High School 300 Students4.-Wyoming
Wyoming
Wyoming Preparatory 130 Students5.-North Dakota
North Dakota
Dakota Elementary School 180 Students6.-Nebrazka
Nebrazka
Nebraska High School 300 Students7.-Oklahoma
Oklahoma
Oklahoma Academy 136 Students8.-Texas
Texas
Texas Academy 240 Students9.-Missouri
Missouri
Mississippi Academy 186 Students10.-Wisconsin
Wisconsin
Wisconsin Academy 413 Students11.-Ohio
Ohio
Ohio Elementary 120 Students12.-West Virginia
West Virginia
Virginia Middle School 120 Students13.-Tennessee
Tennessee
Tennessee Preparatory 130 Students14.-Mississippi
Mississippi
Mississippi Academy 186 Students15.-South Carolina
South Carolina
Carolina High School 130 Students16.-Vermont
Vermont
Vermont High School 120 StudentsPNG/JPG/JPEG Image Interactive Map
Used to display the location and information related to the school clicked in the side panel.
On desktop the is displayed as and image with a side panel containing a list of schools to locate in the map
On click the map will move through the map to display the information container with the location icon.
On mobile The map is replaced with a accordion pannel displaying all the schools listed as colapsable items.
Amount is determined by the coder.
On desktop the is displayed as and image with a side panel containing a list of schools to locate in the map
On click the map will move through the map to display the information container with the location icon.
On mobile The map is replaced with a accordion pannel displaying all the schools listed as colapsable items.
Amount is determined by the coder.
Edlio Elementary School
Address: Evergreen St. 123
Edlio Junior High School
Address: Evergreen St. 123
Edlio Montessori School
Address: Evergreen St. 123
Edlio Academy
Address: Evergreen St. 123
Edlio Middle School
Address: Evergreen St. 123
Edlio Art Institute
Address: Evergreen St. 123
Edlio Boys School
Address: Evergreen St. 123
Edlio Girls School
Address: Evergreen St. 123
Edlio Preparatory
Address: Evergreen St. 123
Another Edlio Montessori School
Address: Evergreen St. 123
Another Edlio Art Institute
Address: Evergreen St. 123
Accordion Panel
Edlio Elementary School
Edlio Elementary School
Address: Evergreen St. 123
Edlio Junior High School
Edlio Junior High School
Address: Evergreen St. 123
Edlio Montessori School
Edlio Montessori School
Address: Evergreen St. 123
Edlio Academy
Edlio Academy
Address: Evergreen St. 123
Edlio Middle School
Edlio Middle School
Address: Evergreen St. 123
Edlio Art Institute
Edlio Art Institute
Address: Evergreen St. 123
Edlio Boys School
Edlio Boys School
Address: Evergreen St. 123
Edlio Girls School
Edlio Girls School
Address: Evergreen St. 123
Edlio Preparatory
Edlio Preparatory
Address: Evergreen St. 123
Another Edlio Montessori School
Another Edlio Montessori School
Address: Evergreen St. 123
Another Edlio Art Institute
Another Edlio Art Institute
Address: Evergreen St. 123