Last active
January 20, 2021 08:27
-
-
Save oscarlorentzon/d99e59952f64a3692c0ae660b4252c60 to your computer and use it in GitHub Desktop.
Indicate hovered tag
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset='utf-8'> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <script src='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.js'></script> | |
| <link href='https://unpkg.com/mapillary-js@3.1.0/dist/mapillary.min.css' rel='stylesheet' /> | |
| <style> | |
| html, body { margin: 0; padding: 0; height: 100%; } | |
| #mly { height: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='mly'></div> | |
| <script> | |
| var tagKey = '6YEHDch0Co4JPLcU5rdiRQ'; | |
| var mly = new Mapillary.Viewer({ | |
| apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0", | |
| component: { | |
| cover: false, | |
| tag: true, | |
| }, | |
| container: "mly", | |
| imageKey: tagKey, | |
| }); | |
| // Define regular and hover properties | |
| var regularColor = 0xffff00; | |
| var regularOpacity = 0.2; | |
| var hoverColor = 0xffa500; | |
| var hoverOpacity = 0.5; | |
| // Retrieve tag component | |
| var tagComponent = mly.getComponent("tag"); | |
| // Create an outline tag showing a polygon with options options | |
| var polygon = [ | |
| [0.042, 0.558], | |
| [0.051, 0.444], | |
| [0.071, 0.445], | |
| [0.074, 0.412], | |
| [0.063, 0.405], | |
| [0.063, 0.403], | |
| [0.065, 0.402], | |
| [0.064, 0.400], | |
| [0.096, 0.381], | |
| [0.183, 0.386], | |
| [0.244, 0.440], | |
| [0.253, 0.449], | |
| [0.266, 0.467], | |
| [0.265, 0.468], | |
| [0.266, 0.471], | |
| [0.258, 0.472], | |
| [0.257, 0.475], | |
| [0.247, 0.621], | |
| [0.176, 0.623], | |
| [0.040, 0.610], | |
| [0.045, 0.566], | |
| [0.042, 0.558], | |
| ]; | |
| polygonGeometry = new Mapillary.TagComponent.PolygonGeometry(polygon); | |
| var polygonTag = new Mapillary.TagComponent.OutlineTag( | |
| 'polygonTag', | |
| polygonGeometry, | |
| { | |
| fillColor: regularColor, | |
| fillOpacity: regularOpacity, | |
| lineColor: regularColor, | |
| }); | |
| // Create an outline tag showing a rectangle with options | |
| var rect = [0.68, 0.51, 0.72, 0.56]; | |
| var rectGeometry = new Mapillary.TagComponent.RectGeometry(rect); | |
| var rectTag = new Mapillary.TagComponent.OutlineTag( | |
| 'rectTag', | |
| rectGeometry, | |
| { | |
| fillColor: regularColor, | |
| fillOpacity: regularOpacity, | |
| lineColor: regularColor, | |
| }); | |
| // State | |
| var tags = {}; | |
| tags[polygonTag.id] = polygonTag; | |
| tags[rectTag.id] = rectTag; | |
| var hoveredTag = null; | |
| var lastPos = null; | |
| // Functions for setting colors and changing hovered tag | |
| var setRegularColors = function(tag) { | |
| tag.setOptions({ | |
| fillColor: regularColor, | |
| fillOpacity: regularOpacity, | |
| lineColor: regularColor, | |
| }); | |
| }; | |
| var setHoverColors = function(tag) { | |
| tag.setOptions({ | |
| fillColor: hoverColor, | |
| fillOpacity: hoverOpacity, | |
| lineColor: hoverColor, | |
| }); | |
| } | |
| var setHoveredTag = function(pixelPoint) { | |
| tagComponent.getTagIdsAt(pixelPoint) | |
| .then(function(tagIds) { | |
| if (tagIds.length > 0) { | |
| var hoveredTagId = tagIds[0]; | |
| if (hoveredTag != null && hoveredTag.id !== hoveredTagId) { | |
| setRegularColors(hoveredTag); | |
| hoveredTag = null; | |
| } | |
| if (hoveredTag == null) { | |
| hoveredTag = tags[hoveredTagId]; | |
| setHoverColors(hoveredTag); | |
| } | |
| } else { | |
| if (hoveredTag != null) { | |
| setRegularColors(hoveredTag); | |
| hoveredTag = null; | |
| } | |
| } | |
| }); | |
| } | |
| // Viewer event handling | |
| // Listen to mousemove, mouseover and mouseup (which occurs | |
| // just before a moveend) to set hovered tag and to keep | |
| // track of last position. | |
| var onMouseEvent = function(event) { | |
| lastPos = event.pixelPoint; | |
| setHoveredTag(event.pixelPoint); | |
| } | |
| mly.on("mousemove", onMouseEvent); | |
| mly.on("mouseup", onMouseEvent); | |
| mly.on("mouseover", onMouseEvent); | |
| // Clear last positions and hovered tag on mouse out. | |
| mly.on("mouseout", function(event) { | |
| lastPos = null; | |
| if (hoveredTag != null) { | |
| setRegularColors(hoveredTag); | |
| hoveredTag = null; | |
| } | |
| }); | |
| // Change hovered tag on mouse end if last position is | |
| // defined (i.e. mouse is over Viewer). | |
| mly.on("moveend", function(event) { | |
| if (lastPos != null) { | |
| setHoveredTag(lastPos); | |
| } | |
| }); | |
| // Add tags when the related node is shown, otherwise remove them. | |
| mly.on(Mapillary.Viewer.nodechanged, function(node) { | |
| if (node.key === tagKey) { | |
| tagComponent.add([polygonTag, rectTag]); | |
| } else { | |
| tagComponent.removeAll(); | |
| } | |
| }); | |
| window.addEventListener("resize", function() { mly.resize(); }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment