mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-13 12:55:05 +02:00
Mapillary Js, second stab
This commit is contained in:
Kushan Joshi
@@ -63,7 +63,8 @@
|
||||
"osmAuth": false,
|
||||
"sexagesimal": false,
|
||||
"toGeoJSON": false,
|
||||
"marked": false
|
||||
"marked": false,
|
||||
"Mapillary": false,
|
||||
},
|
||||
|
||||
"env": {
|
||||
|
||||
@@ -312,6 +312,11 @@ D3_FILES = \
|
||||
node_modules/d3/src/xhr/index.js \
|
||||
node_modules/d3/src/end.js
|
||||
|
||||
mapillary:
|
||||
cp node_modules/mapillary-js/dist/mapillary-js.min.css dist/mapillary/mapillary.css
|
||||
cp node_modules/mapillary-js/dist/*.svg dist/mapillary
|
||||
cp node_modules/mapillary-js/dist/mapillary-js.min.js dist/mapillary/mapillary.js
|
||||
|
||||
d3:
|
||||
node_modules/.bin/smash $(D3_FILES) > js/lib/d3.v3.js
|
||||
@echo 'd3 rebuilt. Please reapply 7e2485d, 4da529f, and 223974d'
|
||||
|
||||
+18
-10
@@ -669,18 +669,13 @@ button.save.has-count .count::before {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mapillary-image a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
bottom: 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.mapillary-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mapillary-image img.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -692,12 +687,25 @@ button.save.has-count .count::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mapillary-image button {
|
||||
.mapillary-image .uil-ripple-css {
|
||||
top: -22px;
|
||||
left: -16px;
|
||||
}
|
||||
.mapillary-image button.thumb-hide {
|
||||
border-radius: 0;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.mly-wrapper {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mly-wrapper.active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.feature-list-pane .inspector-body {
|
||||
|
||||
+16
@@ -1519,6 +1519,22 @@ text.gpx {
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.layer-mapillary-images .viewfield-group.loading * {
|
||||
stroke-width: 2;
|
||||
stroke: #222;
|
||||
fill: #ff9900;
|
||||
z-index: 60;
|
||||
animation-name: viewfield-group-loading;
|
||||
animation-duration: 0.8s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes viewfield-group-loading {
|
||||
from {fill: #ff9900;}
|
||||
to {fill: #ff5800;}
|
||||
}
|
||||
|
||||
.layer-mapillary-images .viewfield-group:hover path.viewfield,
|
||||
.layer-mapillary-images .viewfield-group.selected path.viewfield,
|
||||
.layer-mapillary-images .viewfield-group path.viewfield {
|
||||
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
.mapillary-js{background-color:#000;width:320px;height:240px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rectContainer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10}.Rect{position:absolute;outline:#0f0 solid 2px}
|
||||
.Attribution{background-color:rgba(0,0,0,.5);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:11px;position:absolute;bottom:0;right:0;z-index:10;padding:4px 2px}.Attribution a,.Attribution span{color:#fff;text-decoration:none;margin:0 2px 4px}.Attribution a:hover{color:#35af6d}
|
||||
.Background p,.BackgroundWrapper{font-family:Helvetica,Arial,sans-serif}.BackgroundWrapper{background-color:#000;position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;color:#fff;text-align:center;padding-top:30%}.Background p{position:relative;padding:5px;font-size:12px;text-shadow:0 0 5px rgba(0,0,0,.75)}
|
||||
@-webkit-keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}@keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}.uil-ripple-css{background:0 0;position:relative;width:100px;height:100px;top:-32px;left:-28px}.uil-ripple-css div{position:absolute;top:50%;left:50%;margin:0;width:0;height:0;opacity:0;border-radius:50%;border-width:12px;border-style:solid;-webkit-animation:uil-ripple 2s ease-out infinite;animation:uil-ripple 2s ease-out infinite}.uil-ripple-css div:nth-of-type(1){border-color:rgba(255,255,255,.5)}.uil-ripple-css div:nth-of-type(2){border-color:#fff;-webkit-animation-delay:1s;animation-delay:1s}.Cover{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5);z-index:20;overflow:hidden;cursor:pointer;transition:visibility linear .5s}.CoverBackground{transition:all ease-in-out 250ms,-webkit-filter ease-in-out .1s;transition:all ease-in-out 250ms,filter ease-in-out .1s;transition:all ease-in-out 250ms,filter ease-in-out .1s,-webkit-filter ease-in-out .1s;-webkit-filter:blur(3px);filter:blur(3px);position:absolute;top:-50px;right:-50px;bottom:-50px;left:-50px;background-size:cover;z-index:-10}.Cover:hover .CoverBackground{-webkit-filter:blur(0);filter:blur(0)}.Cover.CoverDone>.CoverBackground{top:0;right:0;bottom:0;left:0;z-index:100}.CoverDone{visibility:hidden}.CoverButton{position:absolute;top:50%;left:50%;width:80px;height:70px;margin-left:-40px;margin-top:-35px;overflow:hidden;background-color:rgba(0,0,0,.6);color:#fff;border-radius:6px;border:none;padding:5px}.CoverButton:focus{outline:0}.CoverButtonIcon{display:inline-block;height:60px;width:60px;background:url(pano.svg);background-size:contain}.CoverButton:hover{background-color:rgba(0,0,0,.8);cursor:pointer}
|
||||
.Debug,.DebugButton{background-color:#0f0;z-index:100}.Debug{position:fixed;top:0;right:0;bottom:0;width:30em;font-size:12px;padding:1em;font-family:Input,Menlo,monospace}.DebugButton{color:#fff;border:1px solid #fff;border-radius:2px;cursor:pointer;cursor:hand}.DebugButtonFixed{position:absolute;bottom:2px;left:2px}
|
||||
.Directions,.DirectionsWrapper{display:block;position:absolute}.domRenderer{width:100%;height:100%;position:absolute;z-index:10}.Directions{width:165px;height:165px;bottom:-10px;left:50%;margin-left:-82px;pointer-events:none}.DirectionsWrapper{width:100%;height:100px;bottom:0;overflow:visible}.DirectionsArrowDisabled,.DirectionsArrowPano,.DirectionsArrowStep{position:absolute;top:50%;left:50%;margin-left:-27px;margin-top:-27px;width:54px;height:54px;pointer-events:all}.DirectionsArrowPano,.DirectionsArrowStep{opacity:.8}.DirectionsArrowDisabled,.DirectionsArrowStep{background:url(arrow-up-white.svg);background-size:contain}.DirectionsArrowDisabled{opacity:.2;z-index:-10}.DirectionsArrowPano{background:url(arrow-up-wheat.svg);background-size:contain}.TurnLeft,.TurnRight{background:url(arrow-left.svg)}.DirectionsArrowPano:hover,.DirectionsArrowStep:hover{cursor:pointer;cursor:hand;opacity:1!important}.TurnAround,.TurnLeft,.TurnRight{opacity:.8;position:absolute;height:54px;width:54px;bottom:40px;-webkit-filter:drop-shadow(1px 1px 1px rgba(0, 0, 0, .8));filter:drop-shadow(1px 1px 1px rgba(0, 0, 0, .8));cursor:pointer;cursor:hand}.NextInSeq:hover,.PrevInSeq:hover,.TurnAround:hover,.TurnLeft:hover,.TurnRight:hover{opacity:1}.TurnLeft{left:10px;background-size:contain}.TurnRight{right:10px;background-size:contain;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.TurnAround{left:10px;bottom:0;background:url(arrow-left.svg);background-size:contain}.InSeq{position:absolute;top:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,0) 10%,rgba(0,0,0,.65) 50%,rgba(0,0,0,0) 90%);width:24px}.NextInSeq,.PrevInSeq{background:url(next-prev.svg);background-size:contain;opacity:.8;width:24px;height:48px;cursor:pointer;cursor:hand;-webkit-filter:drop-shadow(0 0 1px rgba(0, 0, 0, .8));filter:drop-shadow(0 0 1px rgba(0, 0, 0, .8))}.NextInSeq{margin-top:14px}.PrevInSeq{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.InSeqDisabled,.InSeqDisabled:hover{background:url(next-prev.svg);cursor:not-allowed;opacity:.5}.PanoIndication{position:absolute;top:5px;right:5px;width:32px;height:24px;background:url(pano-icon.svg);background-size:contain;opacity:.8}
|
||||
.Loading{width:100%;height:2px;z-index:100;position:absolute;top:0}.LoadingBar{height:4px;position:relative;background-color:rgba(53,175,109,.8);transition:opacity .1s}
|
||||
.mapillary-js .btn{border:none;background-color:transparent;cursor:pointer;display:inline-block;height:auto;margin:0;vertical-align:middle}.NavigationComponent{bottom:0;left:0;position:absolute;right:0;top:0;z-index:5}.Direction{color:#fff;font-family:Helvetica,Arial,sans-serif;position:absolute;margin:.1rem;text-shadow:0 0 5px rgba(0,0,0,.75);background:url(arrow-up-white.svg);background-size:contain;width:1.3rem;height:1.3rem;display:block}.DirectionHidden{display:none}.DirectionForward{top:0;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.DirectionBackward{bottom:0;left:50%;-webkit-transform:translate(-50%,0) rotate(180deg);transform:translate(-50%,0) rotate(180deg)}.DirectionLeft{left:0;top:50%;-webkit-transform:translate(0,-50%) rotate(-90deg);transform:translate(0,-50%) rotate(-90deg)}.DirectionRight{right:0;top:50%;-webkit-transform:translate(0,-50%) rotate(90deg);transform:translate(0,-50%) rotate(90deg)}.DirectionTurnleft{left:0;top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.DirectionTurnright{right:0;top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.DirectionTurnaround{left:0;bottom:0;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}
|
||||
.RouteFrame{background-color:rgba(0,0,0,.5);outline:rgba(255,255,255,.5) solid 1px;width:80%;height:40px;text-align:center;color:#fff;margin:0 auto;position:absolute;z-index:40;bottom:30%;left:10%}.RouteFrame p{margin:0;padding:10px;font-family:Helvetica,Arial,sans-serif;font-size:14px;text-shadow:0 0 5px rgba(0,0,0,.75)}
|
||||
Vendored
-27
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
+1
@@ -14,6 +14,7 @@
|
||||
<script src='iD.js'></script>
|
||||
<script src='presets.js'></script>
|
||||
<script src='imagery.js'></script>
|
||||
<script src='mapillary/mapillary.js'></script>
|
||||
<!--<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
.mapillary-js{background-color:#000;width:320px;height:240px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Rect,.domRenderer,.rectContainer{position:absolute}.domRenderer{width:100%;height:100%;z-index:10;overflow:hidden}.rectContainer{top:0;right:0;bottom:0;left:0;z-index:10}.Rect{outline:#0f0 solid 2px}
|
||||
.Attribution{background-color:rgba(0,0,0,.5);color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:11px;position:absolute;bottom:0;right:0;z-index:10;padding:4px 2px}.Attribution a,.Attribution span{color:#fff;text-decoration:none;margin:0 2px 4px}.Attribution a:hover{color:#35af6d}
|
||||
.Background p,.BackgroundWrapper{font-family:Helvetica,Arial,sans-serif}.BackgroundWrapper{background-color:#000;position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;color:#fff;text-align:center;padding-top:30%}.Background p{position:relative;padding:5px;font-size:12px;text-shadow:0 0 5px rgba(0,0,0,.75)}
|
||||
@-webkit-keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}@keyframes uil-ripple{0%{width:0;height:0;opacity:0;margin:0}33%{width:44%;height:44%;margin:-22% 0 0 -22%;opacity:1}100%{width:88%;height:88%;margin:-44% 0 0 -44%;opacity:0}}.uil-ripple-css{background:0 0;position:relative;width:100px;height:100px;top:-32px;left:-28px}.uil-ripple-css div{position:absolute;top:50%;left:50%;margin:0;width:0;height:0;opacity:0;border-radius:50%;border-width:12px;border-style:solid;-webkit-animation:uil-ripple 2s ease-out infinite;animation:uil-ripple 2s ease-out infinite}.Cover,.CoverBackground{top:0;right:0;bottom:0;left:0}.uil-ripple-css div:nth-of-type(1){border-color:rgba(255,255,255,.5)}.uil-ripple-css div:nth-of-type(2){border-color:#fff;-webkit-animation-delay:1s;animation-delay:1s}.Cover{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:20;overflow:hidden;cursor:pointer;transition:opacity .2s ease-in-out}.CoverBackground{transition:all ease-in-out 250ms,-webkit-filter ease-in-out .1s;transition:all ease-in-out 250ms,filter ease-in-out .1s;transition:all ease-in-out 250ms,filter ease-in-out .1s,-webkit-filter ease-in-out .1s;-webkit-filter:blur(3px);filter:blur(3px);position:absolute;background-size:cover;background-position:center;z-index:-10}.Cover:hover .CoverBackground{-webkit-filter:blur(0);filter:blur(0)}.Cover.CoverDone>.CoverBackground{top:0;right:0;bottom:0;left:0;z-index:100}.CoverDone{visibility:hidden;opacity:0}.CoverButton{position:absolute;top:50%;left:50%;width:80px;height:70px;margin-left:-40px;margin-top:-35px;overflow:hidden;background-color:rgba(0,0,0,.6);color:#fff;border-radius:6px;border:none;padding:5px}.CoverButton:focus{outline:0}.CoverButtonIcon{display:inline-block;height:60px;width:60px;background:url(pano.svg);background-size:contain}.CoverButton:hover{background-color:rgba(0,0,0,.8);cursor:pointer}
|
||||
.Debug,.DebugButton{background-color:#0f0;z-index:100}.Debug{position:fixed;top:0;right:0;bottom:0;width:30em;font-size:12px;padding:1em;font-family:Input,Menlo,monospace}.DebugButton{color:#fff;border:1px solid #fff;border-radius:2px;cursor:pointer;cursor:hand}.DebugButtonFixed{position:absolute;bottom:2px;left:2px}
|
||||
.rectContainer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.Rect{position:absolute;outline:#0f0 solid 2px}
|
||||
.Directions,.DirectionsWrapper{display:block;pointer-events:none;position:absolute}.Directions{bottom:75px;left:50%}.DirectionsWrapper{width:100%;height:100px;bottom:0;overflow:visible}.DirectionsArrowDisabled,.DirectionsArrowPano,.DirectionsArrowStep{position:absolute;top:50%;left:50%;margin-left:-27px;margin-top:-27px;width:54px;height:54px;pointer-events:all}.DirectionsArrowPano,.DirectionsArrowStep{opacity:.8}.DirectionsArrowDisabled,.DirectionsArrowStep{background:url(arrow-up-white.svg);background-size:contain}.DirectionsArrowDisabled{opacity:.2;z-index:-10}.DirectionsArrowPano{background:url(arrow-up-wheat.svg);background-size:contain}.TurnLeft,.TurnRight{background:url(arrow-left.svg)}.DirectionsArrowPano:hover,.DirectionsArrowStep:hover{cursor:pointer;cursor:hand;opacity:1!important}.TurnAround,.TurnLeft,.TurnRight{opacity:.8;position:absolute;height:54px;width:54px;bottom:40px;cursor:pointer;cursor:hand;pointer-events:all}.TurnLeft,.TurnRight{-webkit-filter:drop-shadow(0 2px 1px rgba(0, 0, 0, .8));filter:drop-shadow(0 2px 1px rgba(0, 0, 0, .8))}.TurnAround:hover,.TurnLeft:hover,.TurnRight:hover{opacity:1}.TurnLeft{left:10px;background-size:contain;-webkit-transform:rotateX(60deg);transform:rotateX(60deg)}.TurnRight{right:10px;background-size:contain;-webkit-transform:rotateX(60deg) scaleX(-1);transform:rotateX(60deg) scaleX(-1)}.TurnAround{-webkit-filter:drop-shadow(-2px 0 1px rgba(0, 0, 0, .8));filter:drop-shadow(-2px 0 1px rgba(0, 0, 0, .8));left:10px;bottom:0;background:url(arrow-left.svg);background-size:contain;-webkit-transform:rotateX(60deg) rotateZ(270deg) scale(1.15,1.15);transform:rotateX(60deg) rotateZ(270deg) scale(1.15,1.15)}
|
||||
.Loading{width:100%;height:2px;z-index:100;position:absolute;top:0}.LoadingBar{height:4px;position:relative;background-color:rgba(53,175,109,.8);transition:opacity .1s}
|
||||
.NavigationComponent{bottom:0;left:0;position:absolute;right:0;top:0;z-index:5}.Direction{color:#fff;font-family:Helvetica,Arial,sans-serif;position:absolute;margin:.1rem;text-shadow:0 0 5px rgba(0,0,0,.75);background:url(arrow-up-white.svg);background-size:contain;width:1.3rem;height:1.3rem;display:block}.DirectionHidden{display:none}.DirectionForward{top:0;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.DirectionBackward{bottom:0;left:50%;-webkit-transform:translate(-50%,0) rotate(180deg);transform:translate(-50%,0) rotate(180deg)}.DirectionLeft{left:0;top:50%;-webkit-transform:translate(0,-50%) rotate(-90deg);transform:translate(0,-50%) rotate(-90deg)}.DirectionRight{right:0;top:50%;-webkit-transform:translate(0,-50%) rotate(90deg);transform:translate(0,-50%) rotate(90deg)}.DirectionTurnleft{left:0;top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.DirectionTurnright{right:0;top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.DirectionTurnaround{left:0;bottom:0;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}
|
||||
.RouteFrame{background-color:rgba(0,0,0,.5);outline:rgba(255,255,255,.5) solid 1px;width:80%;height:40px;text-align:center;color:#fff;margin:0 auto;position:absolute;z-index:40;bottom:30%;left:10%}.RouteFrame p{margin:0;padding:10px;font-family:Helvetica,Arial,sans-serif;font-size:14px;text-shadow:0 0 5px rgba(0,0,0,.75)}
|
||||
.InSeq{position:absolute;top:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,0) 10%,rgba(0,0,0,.65) 50%,rgba(0,0,0,0) 90%);width:24px}.NextInSeq:hover,.PrevInSeq:hover{opacity:1}.NextInSeq,.PrevInSeq{background:url(next-prev.svg);background-size:contain;opacity:.8;width:24px;height:48px;cursor:pointer;cursor:hand;-webkit-filter:drop-shadow(0 0 1px rgba(0, 0, 0, .8));filter:drop-shadow(0 0 1px rgba(0, 0, 0, .8))}.NextInSeq{margin-top:14px}.PrevInSeq{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.InSeqDisabled,.InSeqDisabled:hover{background:url(next-prev.svg);cursor:not-allowed;opacity:.5}.PanoIndication{position:absolute;top:5px;right:5px;width:32px;height:24px;background:url(pano-icon.svg);background-size:contain;opacity:.8}
|
||||
.SliderWrapper{text-align:center;position:absolute;bottom:40px;left:0;right:0}.SliderControl{max-width:60%;padding:4px;box-sizing:border-box;display:block;width:100%;margin:0 auto;marginTop:10px;cursor:pointer;color:inherit;background-color:rgba(255,255,255,.2);background-clip:'content-box';border-radius:999px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.SliderControl::-webkit-slider-thumb{width:22px;height:22px;background:#474A4E;box-shadow:0 2px 4px 0 rgba(0,0,0,.5);border:2px solid #fff;border-radius:999px;-webkit-appearance:none}.SliderControl::-moz-range-thumb{width:22px;height:22px;background:#474A4E;box-shadow:0 2px 4px 0 rgba(0,0,0,.5);border:2px solid #fff;border-radius:999px;-moz-appearance:none;appearance:none}.SliderControl:focus{outline:0}
|
||||
.TagMover,.TagResizer,.TagVertex{-webkit-transform:translate(-50%,-50%)}.TagContainer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.TagSymbol{cursor:default}.TagMover,.TagResizer{transform:translate(-50%,-50%);pointer-events:all}.TagMover{border-radius:7px;width:14px;height:14px;opacity:.2}.TagMover:hover{opacity:.5}.TagResizer{border-radius:10px;width:20px;height:20px;opacity:0}.TagResizer:hover{opacity:.3}.TagVertex{transform:translate(-50%,-50%);pointer-events:none;border-radius:3px;width:6px;height:6px}.TagInteractor,.TagSpotInteractor{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:all;border-radius:7px;width:14px;height:14px;opacity:0}.TagInteractor{background:#ff4500}.TagInteractor:hover{opacity:.6}.TagSpotInteractor:hover{opacity:.3}
|
||||
Vendored
+39
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 906 B After Width: | Height: | Size: 906 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
+1
-4
@@ -32,7 +32,6 @@
|
||||
<script src='js/lib/sexagesimal.js'></script>
|
||||
<script src='js/lib/togeojson.js'></script>
|
||||
<script src='js/lib/marked.js'></script>
|
||||
|
||||
<script src='js/id/id.js'></script>
|
||||
|
||||
<script src='js/id/util.js'></script>
|
||||
@@ -41,9 +40,6 @@
|
||||
|
||||
<script src='js/id/services.js'></script>
|
||||
<script src='js/id/services/mapillary.js'></script>
|
||||
<link href="css/mapillary-js/mapillary-js.min.css" rel="stylesheet">
|
||||
<script src="js/lib/mapillary-js.min.js" type="text/javascript"></script>
|
||||
|
||||
<script src='js/id/services/nominatim.js'></script>
|
||||
<script src='js/id/services/taginfo.js'></script>
|
||||
<script src='js/id/services/wikipedia.js'></script>
|
||||
@@ -248,6 +244,7 @@
|
||||
|
||||
<script src='js/lib/locale.js'></script>
|
||||
<script src='data/introGraph.js'></script>
|
||||
<script src='dist/mapillary/mapillary.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='id-container'></div>
|
||||
|
||||
+57
-45
@@ -2,9 +2,9 @@ iD.services.mapillary = function() {
|
||||
var mapillary = {},
|
||||
dispatch = d3.dispatch('loadedImages', 'loadedSigns'),
|
||||
apibase = 'https://a.mapillary.com/v2/',
|
||||
urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
|
||||
clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
|
||||
maxResults = 1000,
|
||||
mly, thumbnail,
|
||||
tileZoom = 14;
|
||||
|
||||
|
||||
@@ -75,8 +75,8 @@ iD.services.mapillary = function() {
|
||||
|
||||
function loadTiles(which, url, projection, dimensions) {
|
||||
var tiles = getTiles(projection, dimensions).filter(function(t) {
|
||||
var xyz = t.id.split(',');
|
||||
return !nearNullIsland(xyz[0], xyz[1], xyz[2]);
|
||||
var xyz = t.id.split(',');
|
||||
return !nearNullIsland(xyz[0], xyz[1], xyz[2]);
|
||||
});
|
||||
|
||||
_.filter(which.inflight, function(v, k) {
|
||||
@@ -205,7 +205,7 @@ iD.services.mapillary = function() {
|
||||
return iD.services.mapillary.sign_defs[country][type];
|
||||
};
|
||||
|
||||
mapillary.showThumbnail = function(imageKey, position) {
|
||||
mapillary.showThumbnail = function(imageKey, position, interactive) {
|
||||
if (!imageKey) return;
|
||||
|
||||
var positionClass = {
|
||||
@@ -213,62 +213,74 @@ iD.services.mapillary = function() {
|
||||
'al': (position === 'left')
|
||||
};
|
||||
|
||||
if(thumbnail === undefined) {
|
||||
var thumbnail = d3.select('#content').selectAll('.mapillary-image')
|
||||
.data([0]);
|
||||
|
||||
thumbnail = d3.select('#content').selectAll('.mapillary-image')
|
||||
.data([0]);
|
||||
// Enter
|
||||
var enter = thumbnail.enter().append('div')
|
||||
.attr('class', 'mapillary-image ar');
|
||||
|
||||
// Enter
|
||||
var enter = thumbnail.enter().append('div')
|
||||
.attr('class', 'mapillary-image ar');
|
||||
enter.append('button')
|
||||
.attr('class', 'thumb-hide')
|
||||
.on('click', function () {
|
||||
mapillary.hideThumbnail();
|
||||
})
|
||||
.append('div')
|
||||
.call(iD.svg.Icon('#icon-close'));
|
||||
|
||||
enter.append('button')
|
||||
.on('click', function () {
|
||||
mapillary.hideThumbnail();
|
||||
})
|
||||
.append('div')
|
||||
.call(iD.svg.Icon('#icon-close'));
|
||||
enter.append('div')
|
||||
.attr('class', 'mly-wrapper')
|
||||
.attr('id', 'mly');
|
||||
} else {
|
||||
var pos = 'ar';
|
||||
if(positionClass.al) {
|
||||
pos = 'al';
|
||||
}
|
||||
var im = d3.select('#content').selectAll('.mapillary-image');
|
||||
im
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('opacity', 100)
|
||||
.attr('class','mapillary-image ' + pos);
|
||||
enter.append('img');
|
||||
|
||||
enter.append('div')
|
||||
.attr('class', 'mly-wrapper inactive')
|
||||
.attr('id', 'mly');
|
||||
|
||||
|
||||
// Update
|
||||
thumbnail.selectAll('img')
|
||||
.attr('src', urlThumb + imageKey + '/thumb-320.jpg')
|
||||
.classed('active', !interactive);
|
||||
|
||||
thumbnail.selectAll('.mly-wrapper')
|
||||
.classed('active', interactive);
|
||||
|
||||
if (position) {
|
||||
thumbnail.classed(positionClass);
|
||||
}
|
||||
if(mly === undefined) {
|
||||
mly = new Mapillary.Viewer('mly', 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',imageKey, {
|
||||
|
||||
if(!iD.services.mapillary.viewer) {
|
||||
iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, {
|
||||
'imagePlane': false,
|
||||
'image': true,
|
||||
'cover': false,
|
||||
'debug': true
|
||||
'debug': false
|
||||
});
|
||||
}
|
||||
mly.moveToKey(imageKey);
|
||||
mly.on('nodechanged', function (node) {
|
||||
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
|
||||
.classed('selected', function (d) {
|
||||
return d.key === node.key;
|
||||
});
|
||||
});
|
||||
if (interactive) {
|
||||
iD.services.mapillary.viewer.moveToKey(imageKey);
|
||||
}
|
||||
|
||||
thumbnail
|
||||
.classed('hidden', false);
|
||||
};
|
||||
|
||||
mapillary.hideThumbnail = function() {
|
||||
if (iD.services.mapillary && iD.services.mapillary.thumb != null) {
|
||||
d3.select('#content').selectAll('.mapillary-image')
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style('opacity', 0);
|
||||
if (iD.services.mapillary) {
|
||||
iD.services.mapillary.thumb = null;
|
||||
}
|
||||
d3.select('#content').selectAll('.mapillary-image')
|
||||
.classed('hidden', true);
|
||||
d3.select('#content').selectAll('.mly-wrapper')
|
||||
.classed('active', false);
|
||||
|
||||
};
|
||||
|
||||
mapillary.killThumbnail = function() {
|
||||
if (iD.services.mapillary) {
|
||||
iD.services.mapillary.thumb = null;
|
||||
iD.services.mapillary.viewer = null;
|
||||
}
|
||||
d3.select('#content').selectAll('.mapillary-image')
|
||||
.remove();
|
||||
};
|
||||
|
||||
mapillary.selectedThumbnail = function(d) {
|
||||
|
||||
@@ -2,7 +2,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
|
||||
minZoom = 12,
|
||||
layer = d3.select(null),
|
||||
_mapillary;
|
||||
_mapillary, _viewer, _mlyLoading, pendingImg;
|
||||
|
||||
|
||||
function init() {
|
||||
@@ -20,7 +20,15 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
return _mapillary;
|
||||
}
|
||||
|
||||
function showThumbnail(image) {
|
||||
function showLoading(image) {
|
||||
var mapillary = getMapillary();
|
||||
if (!mapillary) return;
|
||||
pendingImg = image;
|
||||
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
|
||||
.classed('loading', function(d) { return d.key === image.key; });
|
||||
}
|
||||
|
||||
function showThumbnail(image, interactive) {
|
||||
var mapillary = getMapillary();
|
||||
if (!mapillary) return;
|
||||
|
||||
@@ -34,16 +42,37 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
.classed('selected', function(d) { return d.key === thumb.key; });
|
||||
}
|
||||
|
||||
mapillary.showThumbnail(image.key, position);
|
||||
mapillary.showThumbnail(image.key, position, interactive);
|
||||
|
||||
if (!_viewer && interactive) {
|
||||
_viewer = iD.services.mapillary.viewer;
|
||||
_viewer.on('nodechanged', viewerNavHandler);
|
||||
|
||||
// To avoid edge case, when network is too slow and user clicks on multiple
|
||||
// viewfield-groups.
|
||||
_viewer.on('loadingchanged', function(s) {
|
||||
if (!s && pendingImg) {
|
||||
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
|
||||
.classed('loading', function() { return false; });
|
||||
mapillary.selectedThumbnail(pendingImg);
|
||||
context.map().centerEase(pendingImg.loc);
|
||||
showThumbnail(pendingImg, true);
|
||||
pendingImg = null;
|
||||
}
|
||||
_mlyLoading = s;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function hideThumbnail() {
|
||||
function removeThumbnail(permanent) {
|
||||
|
||||
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
|
||||
.classed('selected', false);
|
||||
|
||||
var mapillary = getMapillary();
|
||||
if (mapillary) {
|
||||
mapillary.hideThumbnail();
|
||||
if (permanent) return mapillary.killThumbnail();
|
||||
return mapillary.hideThumbnail();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,7 +88,15 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
|
||||
function hideLayer() {
|
||||
debouncedRedraw.cancel();
|
||||
hideThumbnail();
|
||||
removeThumbnail(true);
|
||||
if (_viewer) {
|
||||
_viewer.off('nodechanged');
|
||||
_viewer.off('loadingchanged');
|
||||
}
|
||||
_mlyLoading = null;
|
||||
pendingImg = null;
|
||||
_viewer = null;
|
||||
|
||||
layer
|
||||
.transition()
|
||||
.duration(500)
|
||||
@@ -114,9 +151,6 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
}
|
||||
|
||||
function drawImages(selection) {
|
||||
selection.selectAll('.mapillary-js')
|
||||
.data([0]);
|
||||
|
||||
var enabled = iD.svg.MapillaryImages.enabled,
|
||||
mapillary = getMapillary();
|
||||
|
||||
@@ -133,11 +167,13 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
var d = d3.event.target.__data__,
|
||||
thumb = mapillary.selectedThumbnail();
|
||||
if (thumb && thumb.key === d.key) {
|
||||
hideThumbnail();
|
||||
removeThumbnail();
|
||||
} else if (_mlyLoading) {
|
||||
showLoading(d);
|
||||
} else {
|
||||
mapillary.selectedThumbnail(d);
|
||||
context.map().centerEase(d.loc);
|
||||
showThumbnail(d);
|
||||
showThumbnail(d, true);
|
||||
}
|
||||
})
|
||||
.on('mouseover', function() {
|
||||
@@ -150,9 +186,9 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
if (!mapillary) return;
|
||||
var thumb = mapillary.selectedThumbnail();
|
||||
if (thumb) {
|
||||
showThumbnail(thumb);
|
||||
showThumbnail(thumb, true);
|
||||
} else {
|
||||
hideThumbnail();
|
||||
removeThumbnail();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -170,6 +206,23 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
|
||||
}
|
||||
}
|
||||
|
||||
function viewerNavHandler(node) {
|
||||
var mapillary = getMapillary();
|
||||
if (!mapillary) return;
|
||||
|
||||
var thumb = mapillary.selectedThumbnail();
|
||||
if (!thumb || thumb.key === node.key) return;
|
||||
|
||||
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
|
||||
.classed('selected', function(d) {
|
||||
if (d.key === node.key) {
|
||||
mapillary.selectedThumbnail(d);
|
||||
context.map().centerEase(d.loc);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
drawImages.enabled = function(_) {
|
||||
if (!arguments.length) return iD.svg.MapillaryImages.enabled;
|
||||
iD.svg.MapillaryImages.enabled = _;
|
||||
|
||||
@@ -20,7 +20,7 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
|
||||
return _mapillary;
|
||||
}
|
||||
|
||||
function showThumbnail(image) {
|
||||
function showThumbnail(image, interactive) {
|
||||
var mapillary = getMapillary();
|
||||
if (!mapillary) return;
|
||||
|
||||
@@ -34,7 +34,7 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
|
||||
.classed('selected', function(d) { return d.key === thumb.key; });
|
||||
}
|
||||
|
||||
mapillary.showThumbnail(image.key, position);
|
||||
mapillary.showThumbnail(image.key, position, interactive);
|
||||
}
|
||||
|
||||
function hideThumbnail() {
|
||||
@@ -95,7 +95,7 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
|
||||
} else {
|
||||
mapillary.selectedThumbnail(d);
|
||||
context.map().centerEase(d.loc);
|
||||
showThumbnail(d);
|
||||
showThumbnail(d, true);
|
||||
}
|
||||
})
|
||||
.on('mouseover', showThumbnail)
|
||||
@@ -104,7 +104,7 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
|
||||
if (!mapillary) return;
|
||||
var thumb = mapillary.selectedThumbnail();
|
||||
if (thumb) {
|
||||
showThumbnail(thumb);
|
||||
showThumbnail(thumb, true);
|
||||
} else {
|
||||
hideThumbnail();
|
||||
}
|
||||
|
||||
Vendored
-28
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+5
-1
@@ -9,7 +9,9 @@
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "rm -rf node_modules/.bin/phantomjs",
|
||||
"test": "eslint js/id && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html dot && make && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index_packaged.html dot"
|
||||
"test": "eslint js/id && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html dot && make && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index_packaged.html dot",
|
||||
"start": "http-server .",
|
||||
"lint": "eslint js/id"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -27,10 +29,12 @@
|
||||
"eslint": "~1.10.3",
|
||||
"glob": "~3.1.21",
|
||||
"happen": "0.1.2",
|
||||
"http-server": "^0.9.0",
|
||||
"js-yaml": "~3.3.1",
|
||||
"jsonschema": "~0.3.2",
|
||||
"lodash-cli": "4.12.0",
|
||||
"maki": "0.5.0",
|
||||
"mapillary-js": "^1.3.0",
|
||||
"minimist": "~1.2.0",
|
||||
"mocha": "~2.3.4",
|
||||
"mocha-phantomjs-core": "^1.3.0",
|
||||
|
||||
Reference in New Issue
Block a user