Last active
January 20, 2021 08:37
-
-
Save oscarlorentzon/b05a698c4a84c06c4af59ee1a2897a9f to your computer and use it in GitHub Desktop.
Add and drag markers
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> | |
| <meta charset='utf-8' /> | |
| <title></title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,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> | |
| // Setup viewer | |
| var mly = new Mapillary.Viewer({ | |
| apiClient: 'QjI1NnU0aG5FZFZISE56U3R5aWN4Zzo3NTM1MjI5MmRjODZlMzc0', | |
| component: { | |
| marker: { | |
| // Set visible bounding box size | |
| visibleBBoxSize: 80, | |
| }, | |
| mouse: { | |
| // Disable double click zoom in when adding markers by click | |
| doubleClickZoom: false, | |
| }, | |
| }, | |
| container: 'mly', | |
| }); | |
| mly.moveToKey('6Zhtztzt67fWmdd4OYH44w').then( | |
| function() { /* noop */ }, | |
| function(e) { console.error(e); }); | |
| // Get marker component | |
| var markerComponent = mly.getComponent('marker'); | |
| // Show a flat circle marker in the viewer when hovering the ground in the viewer | |
| var indicatorMarker = null; | |
| var indicatorMarkerId = "indicator-id"; | |
| var dragging = false; | |
| var moving = false; | |
| var lastPos = null; | |
| var setIndicator = function(latLon) { | |
| indicatorMarker = new Mapillary.MarkerComponent.CircleMarker( | |
| indicatorMarkerId, | |
| latLon, | |
| { color: '#0f0' }); | |
| markerComponent.add([indicatorMarker]); | |
| } | |
| var removeIndicator = function() { | |
| if (!!indicatorMarker && markerComponent.has(indicatorMarker.id)) { | |
| markerComponent.remove([indicatorMarker.id]); | |
| indicatorMarker = null; | |
| } | |
| } | |
| var moveIndicator = function(latLon) { | |
| if (dragging) { return; } | |
| if (latLon == null) { | |
| removeIndicator(); | |
| } else { | |
| setIndicator({ lat: latLon.lat, lon: latLon.lon }); | |
| } | |
| } | |
| var onViewerMouseEvent = function(event) { | |
| lastPos = event.pixelPoint; | |
| moveIndicator(event.latLon); | |
| } | |
| // Listen to viewer mouse events | |
| mly.on(Mapillary.Viewer.mouseup, onViewerMouseEvent); | |
| mly.on(Mapillary.Viewer.mouseover, onViewerMouseEvent); | |
| mly.on(Mapillary.Viewer.mousedown, onViewerMouseEvent); | |
| mly.on(Mapillary.Viewer.mousemove, function(event) { | |
| // Store last mouse position for later unprojection | |
| lastPos = event.pixelPoint; | |
| if (moving || dragging) { return; } | |
| moveIndicator(event.latLon); | |
| }); | |
| mly.on(Mapillary.Viewer.mouseout, function(event) { | |
| lastPos = null; | |
| removeIndicator(); | |
| }); | |
| var unproject = function(pos) { | |
| // Unproject the position and move indicator marker if latLon exist | |
| if (!pos) { return; } | |
| mly.unproject(pos).then(moveIndicator); | |
| } | |
| // Set state variables based on viewer and marker component events | |
| // and act on last position if | |
| mly.on(Mapillary.Viewer.movestart, function(event) { moving = true; }); | |
| mly.on(Mapillary.Viewer.moveend, function(event) { | |
| moving = false; | |
| if (!dragging) { | |
| unproject(lastPos); | |
| } | |
| }); | |
| markerComponent.on(Mapillary.MarkerComponent.MarkerComponent.dragstart, function() { | |
| // Remove indicators when dragging marker in the viewer | |
| dragging = true; | |
| removeIndicator(); | |
| }); | |
| markerComponent.on(Mapillary.MarkerComponent.MarkerComponent.dragend, function() { | |
| dragging = false; | |
| if (!moving) { | |
| unproject(lastPos); | |
| } | |
| }); | |
| // Create markers on click in viewer | |
| var newMarkerId = 0; | |
| var addMarker = function(id, latLon) { | |
| // Create an interactive marker to be able to drag it in viewer | |
| // and retrieve it with getMarkerIdAt method | |
| var marker = new Mapillary.MarkerComponent.SimpleMarker( | |
| id, | |
| latLon, | |
| { interactive: true }); | |
| markerComponent.add([marker]); | |
| } | |
| mly.on(Mapillary.Viewer.click, function(e) { | |
| if (!e.latLon) { return; } | |
| markerComponent.getMarkerIdAt(e.pixelPoint).then(function(markerId) { | |
| // Only create a new marker if no interactive markers are hovered | |
| if (markerId != null) { return; } | |
| var id = (newMarkerId++).toString(); | |
| addMarker(id, e.latLon); | |
| }); | |
| }); | |
| // Viewer size is dynamic so resize should be called every time the window size changes | |
| 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