Simple Map Diagrams is a versatile JavaScript library that streamlines the creation of highly specific and customizable interactive mini-maps for your webpage.
Sample use case of the Simple Map Diagrams library on a University's website, showing an interactive campus map. Streets are arranged in a grid, and different types of places, such as parks, buildings, roads, and events are located across the map.
// initialization
const e1_smd = new SimpleMapDiagram(10, 5, 'Main Campus Map',
'University of Simple Map Diagrams Campus Map. Click around for ongoing events and information!',
'example1')
// add some connections
e1_smd.addMultipleConnections([
[0, 0, 8, 0],
[0, 0, 0, 4],
[0, 4, 8, 4],
[8, 0, 8, 4],
[2, 0, 2, 4],
[0, 3, 8, 3],
[7, 0, 7, 4],
[3, 0, 3, 4],
[4, 0, 4, 4],
[0, 2, 8, 2]
])
// add some block places
e1_smd.addBlockPlace(4, 2, 1, 2, 'park', 'Central Park', 'The main park on campus. ')
e1_smd.addBlockPlace(0, 1, 1, 1, 'park', 'North Park', 'Smaller park on the north side of campus.')
e1_smd.addBlockPlace(6, 3, 1, 1, 'park', 'John\'s Park', 'Small park in downtown with a pond.')
e1_smd.addBlockPlace(7, 3, 1, 1, 'water', 'Small Pond', 'Small pond south of campus.')
e1_smd.addBlockPlace(3, 3, 1, 1, 'building', 'Chem Lab', 'Chemistry lab at the University of SMD.')
e1_smd.addBlockPlace(1, 3, 1, 1, 'building', 'CS Dept.', 'Department of Computer Science at the University of SMD.')
e1_smd.addBlockPlace(1, 2, 1, 1, 'building', 'Student Centre', 'Student centre at the University of SMD. Come here to ask questions.')
e1_smd.addBlockPlace(2, 3, 1, 1, 'hospital', 'SMD Hospital', 'University of SMD Hospital.')
// add some line places
e1_smd.addLinePlace(0, 0, 8, 0, 'street', 'Main Street', 'Main street north of campus. No closures. Lots of traffic right now.')
e1_smd.addLinePlace(4, 0, 4, 4, 'street', 'University Street', 'Major road through the campus. No closures. Traffic moving well.')
e1_smd.addLinePlace(3, 0, 3, 4, 'transitLine', 'Subway Line 1', 'Line 1 of the city\'s subway system.')
// add some node places
e1_smd.addNodePlace(3, 2, 'poi', 'University Station', 'University subway station, right by campus. Access subway line 1 and bus route 2. No disruptions ongoing.')
e1_smd.addNodePlace(3, 4, 'poi', 'Downtown Station', 'Downtown subway station. Access subway line 1 and bus route 3. No disruptions ongoing.')
e1_smd.addNodePlace(6, 2, 'specialEvent', 'Special Event', 'Club fair happening here today 3-4pm.')
e1_smd.addNodePlace(6, 4, 'incident', 'Road closure', 'Construction ongoing. Please avoid the area.')
// use the default set up
e1_smd.defaultSetUp()
Sample use case of the Simple Map Diagrams library on a Transit Agency's website, showing an interactive subway map. The stations can be clicked on by users of the site, in order to display more information about them.
// initialization
const e2_smd = new SimpleMapDiagram(6, 10, 'TTC Subway Line 1',
'Line 1 Subway of the Toronto Transit Commission in Toronto, Ontario, Canada.',
'example3')
// add some connections
e2_smd.addMultipleConnections([
[5, 0, 5, 9],
[3, 5, 3, 9],
[3, 9, 5, 9],
[1, 5, 3, 5],
[1, 0, 1, 5]
])
// the subway line
e2_smd.addLinePlace(5, 0, 5, 9, 'transitLine')
e2_smd.addLinePlace(3, 5, 3, 9, 'transitLine')
e2_smd.addLinePlace(3, 9, 5, 9, 'transitLine')
e2_smd.addLinePlace(1, 5, 3, 5, 'transitLine')
e2_smd.addLinePlace(1, 0, 1, 5, 'transitLine')
// the stations
e2_smd.addNodePlace(1, 0, 'poi', 'Downsview Station', 'End of the line.')
e2_smd.addNodePlace(1, 2, 'poi', 'St. Clair West Station')
e2_smd.addNodePlace(1, 4, 'poi', 'Spadina Station', 'Connection to Line 2.')
e2_smd.addNodePlace(3, 4, 'poi', 'St. George Station', 'Transfer here to Line 2.')
e2_smd.addNodePlace(3, 5, 'poi', 'Museum Station ')
e2_smd.addNodePlace(3, 6, 'poi', 'Queen\'s Park Station', 'Construction ongoing. Expect delays.')
e2_smd.addNodePlace(3, 7, 'poi', 'St. Patrick Station')
e2_smd.addNodePlace(3, 8, 'poi', 'Osgoode Station')
e2_smd.addNodePlace(3, 9, 'poi', 'St. Andrew Station')
e2_smd.addNodePlace(4, 9, 'poi', 'Union Station', 'Connection to GO Train and VIA.')
e2_smd.addNodePlace(5, 9, 'poi', 'King Station')
e2_smd.addNodePlace(5, 8, 'poi', 'Queen Station')
e2_smd.addNodePlace(5, 7, 'poi', 'Dundas Station')
e2_smd.addNodePlace(5, 6, 'poi', 'College Station', 'Elevator out of service.')
e2_smd.addNodePlace(5, 5, 'poi', 'Wellesley Station ')
e2_smd.addNodePlace(5, 4, 'poi', 'Bloor-Yonge Station', 'Connection to Line 2.')
e2_smd.addNodePlace(5, 2, 'poi', 'St. Clair Station')
e2_smd.addNodePlace(5, 0, 'poi', 'Finch Station', 'End of the line.')
// add some menus
e2_smd.addFilterByNameBox()
e2_smd.addNavigationMenu()
Sample use case of the Simple Map Diagrams library on a website for a special event, showing an interactive map of the event grounds.
// initialization
const e3_smd = new SimpleMapDiagram(6, 6, 'Summer Festival 2022',
'Event ground of the Summer Festival for 2022, in Toronto. ',
'example3')
// add some connections
e3_smd.addMultipleConnections([
[0, 0, 5, 0],
[2, 0, 2, 4],
[0, 0, 0, 4],
[4, 0, 4, 4],
[0, 3, 4, 3],
[0, 4, 4, 4],
[5, 0, 5, 2],
[0, 2, 5, 2]
])
// add the places
e3_smd.addBlockPlace(0, 3, 4, 1, 'park', 'Lakeside Park', 'Today\'s events: ')
e3_smd.addBlockPlace(0, 0, 2, 2, 'park', 'Robert Smith Park', 'Today\'s events: ')
e3_smd.addBlockPlace(0, 2, 2, 1, 'building', 'Community Centre', 'Today\'s events: ')
e3_smd.addBlockPlace(0, 4, 5, 1, 'water', 'Lake Ontario')
e3_smd.addLinePlace(2, 0, 2, 4, 'street', 'Lakefront Road', 'ROAD CLOSED DUE TO ONGOING FESTIVAL.')
e3_smd.addNodePlace(2, 1, 'incident', 'Road Closure', 'Follow detour signs placed at the intersection.')
e3_smd.addNodePlace(0, 2, 'specialEvent', 'Live Show!', 'Come see the live show from 1-2pm today!')
e3_smd.addNodePlace(2, 3, 'specialEvent', 'Live Show!', 'Come see the live show from 1-2pm today!')
// add some menus
e3_smd.addInfoBox()
e3_smd.addFilterByNameBox()