Created
July 3, 2023 14:58
-
-
Save tmdesigned/6b009bf5af2b7349d6981f65b41f358b to your computer and use it in GitHub Desktop.
map marker setup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // set up individual marker | |
| const setUpMarker = (id, data) => { | |
| if(!data.attributeValues?.location){ | |
| return false; | |
| } | |
| // Pull marker from dictionary, or create new | |
| let marker = markers[id]; | |
| if(!marker){ | |
| marker = new AdvancedMarkerElement({ | |
| map: map | |
| }); | |
| // toggle selected on click | |
| marker.addListener('click',()=>{ | |
| marker.selected = !marker.selected; // save selected state in marker obj | |
| if(marker.selected){ | |
| marker.content.classList.add('selected'); | |
| numSelected += 1; | |
| marker.zIndex = numSelected; | |
| }else{ | |
| marker.content.classList.remove('selected'); | |
| numSelected -= 1; | |
| } | |
| }); | |
| markers[id] = marker; | |
| } | |
| // Create icons for all attributes for this device | |
| // 1 of these will serve as marker on map | |
| // others used when marker is selected | |
| // NOTE: Must be rebuilt on every update for new data | |
| const attributes = ['battery','temperature','humidity']; | |
| const icons = {}; | |
| attributes.forEach( (attr) => { | |
| try { | |
| // Build icon | |
| icons[attr] = buildIcon(data,attr); | |
| } catch (error) { | |
| if (error instanceof TypeError) { | |
| icons[attr] = null; | |
| return false; // we dont have this attribute for this device | |
| }else { | |
| console.error(error) | |
| } | |
| } | |
| }, {}); | |
| // If device does not have selected attribute, show no marker for it | |
| if(!icons[selectedAttribute]){ | |
| return false; | |
| } | |
| // Set up marker content = the selected icon + the expandable window | |
| const container = document.createElement('div'); | |
| container.classList.add('marker-container'); | |
| container.appendChild(icons[selectedAttribute].icon); | |
| container.appendChild(iconWindowHTML(data,icons)); | |
| marker.content = container; | |
| // Update position | |
| marker.position = parseLocation(data.attributeValues?.location); | |
| bounds.extend(marker.position); | |
| // if marker is already selected, make sure it still has marker window open | |
| if(marker.selected){ | |
| marker.content.classList.add('selected'); | |
| } | |
| return true; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment