From 427dfc1b15bcb611ed45f514942d622bb4fd38da Mon Sep 17 00:00:00 2001 From: Shawna Paradee Date: Tue, 20 Mar 2018 12:50:31 -0700 Subject: [PATCH 1/7] adding streetside points --- modules/services/streetside.js | 924 +++++++++++++++++++++++++++++++++ modules/svg/streetside.js | 268 ++++++++++ 2 files changed, 1192 insertions(+) create mode 100644 modules/services/streetside.js create mode 100644 modules/svg/streetside.js diff --git a/modules/services/streetside.js b/modules/services/streetside.js new file mode 100644 index 0000000000..72cedd60cf --- /dev/null +++ b/modules/services/streetside.js @@ -0,0 +1,924 @@ +/* global Mapillary:false */ +import _filter from 'lodash-es/filter'; +import _find from 'lodash-es/find'; +import _flatten from 'lodash-es/flatten'; +import _forEach from 'lodash-es/forEach'; +import _isEmpty from 'lodash-es/isEmpty'; +import _map from 'lodash-es/map'; +import _some from 'lodash-es/some'; +import _union from 'lodash-es/union'; + +import { range as d3_range } from 'd3-array'; +import { dispatch as d3_dispatch } from 'd3-dispatch'; + +import { + request as d3_request, + json as d3_json +} from 'd3-request'; + +import { + select as d3_select, + selectAll as d3_selectAll +} from 'd3-selection'; + +import rbush from 'rbush'; + +import { jsonpRequest } from '../util/jsonp_request'; +import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; +import { geoExtent } from '../geo'; +import { utilDetect } from '../util/detect'; +import { utilQsString, utilRebind } from '../util'; + + +var msapi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/'; +var apibase = 'https://a.mapillary.com/v3/', + appkey = 'An-VWpS-o_m7aV8Lxa0oR9cC3bxwdhdCYEGEFHMP9wyMbmRJFzWfMDD1z3-DXUuE', + viewercss = 'mapillary-js/mapillary.min.css', + //viewerjs = 'mapillary-js/mapillary.min.js', + viewerjs = 'mapillary-js/mapillary.js', + clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi', + maxResults = 1000, + tileZoom = 14, + dispatch = d3_dispatch('loadedImages', 'loadedSigns'), + _mlyFallback = false, + _mlyCache, + _mlyClicks, + _mlySelectedImage, + _mlySignDefs, + _mlySignSprite, + _mlyViewer; + + +function abortRequest(i) { + i.abort(); +} + + +function nearNullIsland(x, y, z) { + if (z >= 7) { + var center = Math.pow(2, z - 1), + width = Math.pow(2, z - 6), + min = center - (width / 2), + max = center + (width / 2) - 1; + return x >= min && x <= max && y >= min && y <= max; + } + return false; +} + + +function maxPageAtZoom(z) { + if (z < 15) return 2; + if (z === 15) return 5; + if (z === 16) return 10; + if (z === 17) return 20; + if (z === 18) return 40; + if (z > 18) return 80; +} + + +function localeTimestamp(s) { + if (!s) return null; + var detected = utilDetect(); + var options = { + day: 'numeric', month: 'short', year: 'numeric' + //hour: 'numeric', minute: 'numeric', second: 'numeric', + //timeZone: 'UTC' + }; + var d = new Date(s); + if (isNaN(d.getTime())) return null; + return d.toLocaleString(detected.locale, options); +} + +// using d3.geo.tiles.js from lib, gets tile extents for the current +// map view extent +function getTiles(projection) { + var s = projection.scale() * 2 * Math.PI, + z = Math.max(Math.log(s) / Math.log(2) - 8, 0), + ts = 256 * Math.pow(2, z - tileZoom), + origin = [ + s / 2 - projection.translate()[0], + s / 2 - projection.translate()[1]]; + + return d3_geoTile() + .scaleExtent([tileZoom, tileZoom]) + .scale(s) + .size(projection.clipExtent()[1]) + .translate(projection.translate())() + .map(function (tile) { + var x = tile[0] * ts - origin[0], + y = tile[1] * ts - origin[1]; + + return { + id: tile.toString(), + xyz: tile, + extent: geoExtent( + projection.invert([x, y + ts]), + projection.invert([x + ts, y]) + ) + }; + }); +} + + +function loadTiles(which, url, projection) { + //console.log("loading tiles from streetside service..."); + var s = projection.scale() * 2 * Math.PI, + currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0)); + //console.log(" var projection = ", projection); + //console.log(" var s = ", s); + + // breakup the map view into tiles + var tiles = getTiles(projection).filter(function (t) { + return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]); + }); + //console.log(" var tiles = ", tiles); + //console.log(" which.inflight ", which.inflight); + + // which.inflight seems to always be undefined + _filter(which.inflight, function (v, k) { + var wanted = _find(tiles, function (tile) { return k === (tile.id + ',0'); }); + if (!wanted) delete which.inflight[k]; + return !wanted; + }).map(abortRequest); + + tiles.forEach(function (tile) { + //console.log(" tile to load = ", tile); + // console.log(" tile extent to load = ", tile.extent[0][1] + ',' + tile.extent[0][0] + ',' + tile.extent[1][1] + ',' + tile.extent[1][0]); + // console.log(" tile extent to load (MS): n=", tile.extent[1][1] + '&s=' + tile.extent[0][1] + '&e=' + tile.extent[1][0] + '&w=' + tile.extent[0][0]); + loadNextTilePage(which, currZoom, url, tile); + }); +} + +// load data for the next tile page in line +function loadNextTilePage(which, currZoom, url, tile) { + var cache = _mlyCache[which], + rect = tile.extent.rectangle(), + maxPages = maxPageAtZoom(currZoom), + nextPage = cache.nextPage[tile.id] || 0; + switch (which) { + case 'bubbles': + if (nextPage > maxPages) return; + + var id = tile.id + ',' + String(nextPage); + if (cache.loaded[id] || cache.inflight[id]) return; + + cache.inflight[id] = true; + getBubbles(url, tile, function (bubbles) { + cache.loaded[id] = true; + delete cache.inflight[id]; + // console.log("bubbles: ", bubbles); + if (!bubbles) return; + // remove first element, statistic info on request, not a bubble + bubbles.shift(); + var features = bubbles.map(function (bubble) { + // console.log("bubble: ", bubble); + var loc = [bubble.lo, bubble.la]; + var d = { + loc: loc, + key: bubble.id, + ca: bubble.he, + captured_at: bubble.cd, + captured_by: "microsoft", + nbn: bubble.nbn, + pbn: bubble.pbn, + rn: bubble.rn, + pano: true + }; + var feature = { + geometry: { + coordinates: [bubble.lo, bubble.la], + type: "Point" + }, + properties: d, + type: "Feature" + }; + var bubbleId = bubble.id; + cache.points[bubbleId] = feature; + cache.forImageKey[bubbleId] = bubbleId; + // return false; // because no `d` data worth loading into an rbush + return { + minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + }; + + }).filter(Boolean); + // console.log("bubble features: ", features); + cache.rtree.load(features); + + }); + break; + default: + var nextURL = cache.nextURL[tile.id] || url + + utilQsString({ + per_page: maxResults, + page: nextPage, + client_id: clientId, + bbox: [rect[0], rect[1], rect[2], rect[3]].join(','), + }); + //console.log("cache for loadNextTilePage: ", cache); + if (nextPage > maxPages) return; + + var id = tile.id + ',' + String(nextPage); + if (cache.loaded[id] || cache.inflight[id]) return; + //console.log("get nextURL: ", nextURL); + cache.inflight[id] = d3_request(nextURL) + .mimeType('application/json') + .response(function (xhr) { + var linkHeader = xhr.getResponseHeader('Link'); + if (linkHeader) { + var pagination = parsePagination(xhr.getResponseHeader('Link')); + if (pagination.next) { + cache.nextURL[tile.id] = pagination.next; + } + } + //console.log(" reponse from nextURL:",xhr.responseText); + return JSON.parse(xhr.responseText); + }) + .get(function (err, data) { + cache.loaded[id] = true; + delete cache.inflight[id]; + if (err || !data.features || !data.features.length) return; + // console.log("features returned by mapillary: ", data.features); + var features = data.features.map(function (feature) { + var loc = feature.geometry.coordinates, + d; + + if (which === 'images') { + d = { + loc: loc, + key: feature.properties.key, + ca: feature.properties.ca, + captured_at: feature.properties.captured_at, + captured_by: feature.properties.username, + pano: feature.properties.pano + }; + cache.forImageKey[d.key] = d; // cache imageKey -> image + + } else if (which === 'sequences') { + // console.log("sequence", feature); + var sequenceKey = feature.properties.key; + cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString + feature.properties.coordinateProperties.image_keys.forEach(function (imageKey) { + cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey + }); + return false; // because no `d` data worth loading into an rbush + + } else if (which === 'objects') { + d = { + loc: loc, + key: feature.properties.key, + value: feature.properties.value, + package: feature.properties.package, + detections: feature.properties.detections + }; + + // cache imageKey -> detectionKey + feature.properties.detections.forEach(function (detection) { + var imageKey = detection.image_key; + var detectionKey = detection.detection_key; + if (!_mlyCache.detections[imageKey]) { + _mlyCache.detections[imageKey] = {}; + } + if (!_mlyCache.detections[imageKey][detectionKey]) { + _mlyCache.detections[imageKey][detectionKey] = {}; + } + }); + } + + return { + minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + }; + + }).filter(Boolean); + //console.log("mapillary features: ", features); + cache.rtree.load(features); + + if (which === 'images' || which === 'sequences') { + dispatch.call('loadedImages'); + } else if (which === 'objects') { + dispatch.call('loadedSigns'); + } + + if (data.features.length === maxResults) { // more pages to load + cache.nextPage[tile.id] = nextPage + 1; + loadNextTilePage(which, currZoom, url, tile); + } else { + cache.nextPage[tile.id] = Infinity; // no more pages to load + } + // console.log("_mlyCache: ", _mlyCache); + }); + break; + } +} + +// call the bubble api and get the json data +// for the tile extent +function getBubbles(url, tile, callback) { + var rect = tile.extent.rectangle() + jsonpRequest(url + utilQsString({ + n: rect[3], + s: rect[1], + e: rect[2], + w: rect[0], + appkey: appkey, + jsCallback: '{callback}' + }), function (data) { + if (!data || data.error) { + callback(null); + } else { + callback(data); + } + }); +} + +// extract links to pages of API results +function parsePagination(links) { + return links.split(',').map(function (rel) { + var elements = rel.split(';'); + if (elements.length === 2) { + return [ + /<(.+)>/.exec(elements[0])[1], + /rel="(.+)"/.exec(elements[1])[1] + ]; + } else { + return ['', '']; + } + }).reduce(function (pagination, val) { + pagination[val[1]] = val[0]; + return pagination; + }, {}); +} + + +// partition viewport into `psize` x `psize` regions +function partitionViewport(psize, projection) { + var dimensions = projection.clipExtent()[1]; + psize = psize || 16; + var cols = d3_range(0, dimensions[0], psize), + rows = d3_range(0, dimensions[1], psize), + partitions = []; + + rows.forEach(function (y) { + cols.forEach(function (x) { + var min = [x, y + psize], + max = [x + psize, y]; + partitions.push( + geoExtent(projection.invert(min), projection.invert(max))); + }); + }); + + return partitions; +} + + +// no more than `limit` results per partition. +function searchLimited(psize, limit, projection, rtree) { + limit = limit || 3; + + var partitions = partitionViewport(psize, projection); + var results; + + // console.time('previous'); + results = _flatten(_map(partitions, function (extent) { + return rtree.search(extent.bbox()) + .slice(0, limit) + .map(function (d) { return d.data; }); + })); + // console.timeEnd('previous'); + + // console.time('new'); + // results = partitions.reduce(function(result, extent) { + // var found = rtree.search(extent.bbox()) + // .map(function(d) { return d.data; }) + // .sort(function(a, b) { + // return a.loc[1] - b.loc[1]; + // // return a.key.localeCompare(b.key); + // }) + // .slice(0, limit); + + // return (found.length ? result.concat(found) : result); + // }, []); + // console.timeEnd('new'); + + return results; +} + + + +export default { + // initialize streetside + init: function () { + if (!_mlyCache) { + this.reset(); + } + + this.event = utilRebind(this, dispatch, 'on'); + }, + // reset the cache + reset: function () { + var cache = _mlyCache; + + if (cache) { + if (cache.bubbles && cache.bubbles.inflight) { + _forEach(cache.bubbles.inflight, abortRequest); + } + if (cache.images && cache.images.inflight) { + _forEach(cache.images.inflight, abortRequest); + } + if (cache.objects && cache.objects.inflight) { + _forEach(cache.objects.inflight, abortRequest); + } + if (cache.sequences && cache.sequences.inflight) { + _forEach(cache.sequences.inflight, abortRequest); + } + } + + _mlyCache = { + bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} }, + images: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {} }, + objects: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() }, + sequences: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, lineString: {} }, + detections: {} + }; + + _mlySelectedImage = null; + _mlyClicks = []; + }, + + + images: function (projection) { + var psize = 16, limit = 3; + return searchLimited(psize, limit, projection, _mlyCache.images.rtree); + }, + + + signs: function (projection) { + var psize = 32, limit = 3; + return searchLimited(psize, limit, projection, _mlyCache.objects.rtree); + }, + + + sequences: function (projection) { + var viewport = projection.clipExtent(); + var min = [viewport[0][0], viewport[1][1]]; + var max = [viewport[1][0], viewport[0][1]]; + var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); + var sequenceKeys = {}; + + // all sequences for images in viewport + _mlyCache.images.rtree.search(bbox) + .forEach(function (d) { + var sequenceKey = _mlyCache.sequences.forImageKey[d.data.key]; + if (sequenceKey) { + sequenceKeys[sequenceKey] = true; + } + }); + + // Return lineStrings for the sequences + return Object.keys(sequenceKeys).map(function (sequenceKey) { + return _mlyCache.sequences.lineString[sequenceKey]; + }); + }, + + + bubbles: function (projection) { + var psize = 32, limit = 3; + return searchLimited(psize, limit, projection, _mlyCache.bubbles.rtree); + }, + + signsSupported: function () { + var detected = utilDetect(); + if (detected.ie) return false; + if ((detected.browser.toLowerCase() === 'safari') && (parseFloat(detected.version) < 10)) return false; + return true; + }, + + + signHTML: function (d) { + if (!_mlySignDefs || !_mlySignSprite) return; + var position = _mlySignDefs[d.value]; + if (!position) return '
'; + var iconStyle = [ + 'background-image:url(' + _mlySignSprite + ')', + 'background-repeat:no-repeat', + 'height:' + position.height + 'px', + 'width:' + position.width + 'px', + 'background-position-x:-' + position.x + 'px', + 'background-position-y:-' + position.y + 'px', + ]; + + return '
'; + }, + + // this is called a bunch of times repeatedly + loadImages: function (projection) { + // console.log("loadImages called..."); + loadTiles('bubbles', msapi + 'GetBubbles.ashx?', projection); + loadTiles('images', apibase + 'images?', projection); + loadTiles('sequences', apibase + 'sequences?', projection); + }, + + + loadSigns: function (context, projection) { + // if we are looking at signs, we'll actually need to fetch images too + loadTiles('images', apibase + 'images?', projection); + loadTiles('objects', apibase + 'objects?', projection); + + // load traffic sign defs + if (!_mlySignDefs) { + _mlySignSprite = context.asset('img/traffic-signs/traffic-signs.png'); + _mlySignDefs = {}; + d3_json(context.asset('img/traffic-signs/traffic-signs.json'), function (err, data) { + if (err) return; + _mlySignDefs = data; + }); + } + }, + + + loadViewer: function (context) { + // add mly-wrapper + var wrap = d3_select('#photoviewer').selectAll('.mly-wrapper') + .data([0]); + + var wrapEnter = wrap.enter() + .append('div') + .attr('id', 'mly') + .attr('class', 'photo-wrapper mly-wrapper') + .classed('hide', true); + + wrapEnter + .append('div') + .attr('class', 'photo-attribution-streetside fillD'); + + + // load mapillary-viewercss + d3_select('head').selectAll('#mapillary-viewercss') + .data([0]) + .enter() + .append('link') + .attr('id', 'mapillary-viewercss') + .attr('rel', 'stylesheet') + .attr('href', context.asset(viewercss)); + + // load mapillary-viewerjs + d3_select('head').selectAll('#mapillary-viewerjs') + .data([0]) + .enter() + .append('script') + .attr('id', 'mapillary-viewerjs') + .attr('src', context.asset(viewerjs)); + }, + + + showViewer: function () { + var wrap = d3_select('#photoviewer') + .classed('hide', false); + + var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size(); + + if (isHidden) { + wrap + .selectAll('.photo-wrapper:not(.mly-wrapper)') + .classed('hide', true); + + wrap + .selectAll('.photo-wrapper.mly-wrapper') + .classed('hide', false); + + _mlyViewer.resize(); + } + + return this; + }, + + + hideViewer: function () { + _mlySelectedImage = null; + + if (!_mlyFallback && _mlyViewer) { + _mlyViewer.getComponent('sequence').stop(); + } + + var viewer = d3_select('#photoviewer'); + if (!viewer.empty()) viewer.datum(null); + + viewer + .classed('hide', true) + .selectAll('.photo-wrapper') + .classed('hide', true); + + d3_selectAll('.viewfield-group, .sequence, .icon-sign') + .classed('selected', false); + + return this.setStyles(null, true); + }, + + + parsePagination: parsePagination, + + + updateViewer: function (imageKey, context) { + if (!imageKey) return this; + + if (!_mlyViewer) { + this.initViewer(imageKey, context); + } else { + _mlyViewer.moveToKey(imageKey) + .catch(function (e) { console.error('mly3', e); }); // eslint-disabe-line no-console + } + + return this; + }, + + + initViewer: function (imageKey, context) { + var that = this; + if (Mapillary && imageKey) { + var opts = { + baseImageSize: 320, + component: { + cover: false, + keyboard: false, + tag: true + } + }; + + // Disable components requiring WebGL support + if (!Mapillary.isSupported() && Mapillary.isFallbackSupported()) { + _mlyFallback = true; + opts.component = { + cover: false, + direction: false, + imagePlane: false, + keyboard: false, + mouse: false, + sequence: false, + tag: false, + image: true, // fallback + navigation: true // fallback + }; + } + + _mlyViewer = new Mapillary.Viewer('mly', clientId, null, opts); + _mlyViewer.on('nodechanged', nodeChanged); + _mlyViewer.moveToKey(imageKey) + .catch(function (e) { console.error('mly3', e); }); // eslint-disable-line no-console + } + + // nodeChanged: called after the viewer has changed images and is ready. + // + // There is some logic here to batch up clicks into a _mlyClicks array + // because the user might click on a lot of markers quickly and nodechanged + // may be called out of order asychronously. + // + // Clicks are added to the array in `selectedImage` and removed here. + // + function nodeChanged(node) { + if (!_mlyFallback) { + _mlyViewer.getComponent('tag').removeAll(); // remove previous detections + } + + var clicks = _mlyClicks; + var index = clicks.indexOf(node.key); + var selectedKey = _mlySelectedImage && _mlySelectedImage.key; + + if (index > -1) { // `nodechanged` initiated from clicking on a marker.. + clicks.splice(index, 1); // remove the click + // If `node.key` matches the current _mlySelectedImage, call `selectImage()` + // one more time to update the detections and attribution.. + if (node.key === selectedKey) { + that.selectImage(_mlySelectedImage, node.key, true); + } + } else { // `nodechanged` initiated from the Mapillary viewer controls.. + var loc = node.computedLatLon ? [node.computedLatLon.lon, node.computedLatLon.lat] : [node.latLon.lon, node.latLon.lat]; + context.map().centerEase(loc); + that.selectImage(undefined, node.key, true); + } + } + }, + + + // Pass the image datum itself in `d` or the `imageKey` string. + // This allows images to be selected from places that dont have access + // to the full image datum (like the street signs layer or the js viewer) + selectImage: function (d, imageKey, fromViewer) { + if (!d && imageKey) { + // If the user clicked on something that's not an image marker, we + // might get in here.. Cache lookup can fail, e.g. if the user + // clicked a streetsign, but images are loading slowly asynchronously. + // We'll try to carry on anyway if there is no datum. There just + // might be a delay before user sees detections, captured_at, etc. + d = _mlyCache.bubbles.forImageKey[imageKey]; + } + + _mlySelectedImage = d; + var viewer = d3_select('#photoviewer'); + if (!viewer.empty()) viewer.datum(d); + + imageKey = (d && d.key) || imageKey; + if (!fromViewer && imageKey) { + _mlyClicks.push(imageKey); + } + + this.setStyles(null, true); + + var wrap = d3_select('#photoviewer .mly-wrapper'); + var attribution = wrap.selectAll('.photo-attribution-streetside').html(''); + var year = (new Date()).getFullYear(); + + if (d) { + if (d.captured_by) { + attribution + .append('a') + .attr('class', 'captured_by') + .attr('target', '_blank') + .attr('href', 'https://www.microsoft.com/en-us/maps/streetside') + .text('©' + year +' Microsoft'); + + attribution + .append('span') + .text('|'); + } + + if (d.captured_at) { + attribution + .append('span') + .attr('class', 'captured_at') + .text(localeTimestamp(d.captured_at)); + } + + attribution + .append('a') + .attr('class', 'image_link') + .attr('target', '_blank') + .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' + encodeURIComponent(d.key) + + '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17') + .text('Report a privacy concern with this image'); + + this.updateDetections(d); + } + console.log("clicked a streetside image: ", d); + return this; + }, + + + getSelectedImage: function () { + return _mlySelectedImage; + }, + + + getSequenceKeyForImage: function (d) { + var imageKey = d && d.key; + return imageKey && _mlyCache.sequences.forImageKey[imageKey]; + }, + + + setStyles: function (hovered, reset) { + if (reset) { // reset all layers + d3_selectAll('.viewfield-group') + .classed('highlighted', false) + .classed('hovered', false) + .classed('selected', false); + + d3_selectAll('.sequence') + .classed('highlighted', false) + .classed('selected', false); + } + + var hoveredImageKey = hovered && hovered.key; + var hoveredBubbleKey = hovered && hovered.key; + var hoveredSequenceKey = this.getSequenceKeyForImage(hovered); + var hoveredLineString = hoveredSequenceKey && _mlyCache.sequences.lineString[hoveredSequenceKey]; + var hoveredImageKeys = (hoveredLineString && hoveredLineString.properties.coordinateProperties.image_keys) || []; + + var viewer = d3_select('#photoviewer'); + var selected = viewer.empty() ? undefined : viewer.datum(); + var selectedBubbleKey = selected && selected.key; + var selectedImageKey = selected && selected.key; + var selectedSequenceKey = this.getSequenceKeyForImage(selected); + var selectedLineString = selectedSequenceKey && _mlyCache.sequences.lineString[selectedSequenceKey]; + var selectedImageKeys = (selectedLineString && selectedLineString.properties.coordinateProperties.image_keys) || []; + + // highlight sibling viewfields on either the selected or the hovered sequences + var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey); + + d3_selectAll('.layer-streetside-images .viewfield-group') + .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; }) + .classed('hovered', function (d) { return d.key === hoveredBubbleKey; }) + .classed('selected', function (d) { return d.key === selectedBubbleKey; }); + + d3_selectAll('.layer-streetside-images .sequence') + .classed('highlighted', function (d) { return d.properties.key === hoveredSequenceKey; }) + .classed('selected', function (d) { return d.properties.key === selectedSequenceKey; }); + + return this; + }, + + + updateDetections: function (d) { + if (!_mlyViewer || _mlyFallback) return; + + var imageKey = d && d.key; + var detections = (imageKey && _mlyCache.detections[imageKey]) || []; + + _forEach(detections, function (data, k) { + if (_isEmpty(data)) { + loadDetection(k); + } else { + var tag = makeTag(data); + if (tag) { + var tagComponent = _mlyViewer.getComponent('tag'); + tagComponent.add([tag]); + } + } + }); + + + function loadDetection(detectionKey) { + var url = apibase + 'detections/' + + detectionKey + '?' + utilQsString({ + client_id: clientId, + }); + + d3_request(url) + .mimeType('application/json') + .response(function (xhr) { + return JSON.parse(xhr.responseText); + }) + .get(function (err, data) { + if (!data || !data.properties) return; + + var imageKey = data.properties.image_key; + _mlyCache.detections[imageKey][detectionKey] = data; + + var selectedKey = _mlySelectedImage && _mlySelectedImage.key; + if (imageKey === selectedKey) { + var tag = makeTag(data); + if (tag) { + var tagComponent = _mlyViewer.getComponent('tag'); + tagComponent.add([tag]); + } + } + }); + } + + + function makeTag(data) { + var valueParts = data.properties.value.split('--'); + if (valueParts.length !== 3) return; + + var text = valueParts[1].replace(/-/g, ' '); + var tag; + + // Currently only two shapes + if (data.properties.shape.type === 'Polygon') { + var polygonGeometry = new Mapillary + .TagComponent + .PolygonGeometry(data.properties.shape.coordinates[0]); + + tag = new Mapillary.TagComponent.OutlineTag( + data.properties.key, + polygonGeometry, + { + text: text, + textColor: 0xffff00, + lineColor: 0xffff00, + lineWidth: 2, + fillColor: 0xffff00, + fillOpacity: 0.3, + } + ); + + } else if (data.properties.shape.type === 'Point') { + var pointGeometry = new Mapillary + .TagComponent + .PointGeometry(data.properties.shape.coordinates[0]); + + tag = new Mapillary.TagComponent.SpotTag( + data.properties.key, + pointGeometry, + { + text: text, + color: 0xffff00, + textColor: 0xffff00 + } + ); + } + + return tag; + } + }, + + + cache: function () { + return _mlyCache; + }, + + + signDefs: function (_) { + if (!arguments.length) return _mlySignDefs; + _mlySignDefs = _; + return this; + } + +}; diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js new file mode 100644 index 0000000000..123350731c --- /dev/null +++ b/modules/svg/streetside.js @@ -0,0 +1,268 @@ +import _throttle from 'lodash-es/throttle'; +import { select as d3_select } from 'd3-selection'; +import { svgPath, svgPointTransform } from './index'; +import { services } from '../services'; + + +export function svgStreetside(projection, context, dispatch) { + var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); + var minZoom = 12; + var minMarkerZoom = 16; + var minViewfieldZoom = 18; + var layer = d3_select(null); + var _streetside; + + + function init() { + if (svgStreetside.initialized) return; // run once + svgStreetside.enabled = false; + svgStreetside.initialized = true; + // console.log("svg: streetside initialized...."); + } + + + function getService() { + if (services.streetside && !_streetside) { + _streetside = services.streetside; + _streetside.event.on('loadedImages', throttledRedraw); + } else if (!services.streetside && _streetside) { + _streetside = null; + } + + return _streetside; + } + + + function showLayer() { + var service = getService(); + if (!service) return; + + service.loadViewer(context); + editOn(); + + layer + .style('opacity', 0) + .transition() + .duration(250) + .style('opacity', 1) + .on('end', function () { dispatch.call('change'); }); + } + + + function hideLayer() { + var service = getService(); + if (service) { + service.hideViewer(); + } + + throttledRedraw.cancel(); + + layer + .transition() + .duration(250) + .style('opacity', 0) + .on('end', editOff); + } + + + function editOn() { + layer.style('display', 'block'); + } + + + function editOff() { + layer.selectAll('.viewfield-group').remove(); + layer.style('display', 'none'); + } + + + function click(d) { + // console.log("svg: map was clicked with streetside on, here is the passed object: ", d); + var service = getService(); + if (!service) return; + + service + .selectImage(d) + .updateViewer(d.key, context) + .showViewer(); + + context.map().centerEase(d.loc); + } + + + function mouseover(d) { + var service = getService(); + if (service) service.setStyles(d); + } + + + function mouseout() { + var service = getService(); + if (service) service.setStyles(null); + } + + + function transform(d) { + var t = svgPointTransform(projection)(d); + if (d.ca) { + t += ' rotate(' + Math.floor(d.ca) + ',0,0)'; + } + return t; + } + + + function update() { + // console.log("svg: update called...."); + var viewer = d3_select('#photoviewer'); + var selected = viewer.empty() ? undefined : viewer.datum(); + + var z = ~~context.map().zoom(); + var showMarkers = (z >= minMarkerZoom); + var showViewfields = (z >= minViewfieldZoom); + + var service = getService(); + // gets the features from service cache + var sequences = (service ? service.sequences(projection) : []); + var images = (service && showMarkers ? service.images(projection) : []); + var bubbles = (service && showMarkers ? service.bubbles(projection) : []); + // console.log(" svg: update() bubbles", bubbles); + // console.log(" svg: update() images", images); + // var traces = layer.selectAll('.sequences').selectAll('.sequence') + // .data(sequences, function(d) { return d.properties.key; }); + + // // exit + // traces.exit() + // .remove(); + + // // enter/update + // traces = traces.enter() + // .append('path') + // .attr('class', 'sequence') + // .merge(traces) + // .attr('d', svgPath(projection).geojson); + + + var groups = layer.selectAll('.markers').selectAll('.viewfield-group') + .data(bubbles, function(d) { return d.key; }); + + // exit + groups.exit() + .remove(); + + // enter + var groupsEnter = groups.enter() + .append('g') + .attr('class', 'viewfield-group') + .on('mouseover', mouseover) + .on('mouseout', mouseout) + .on('click', click); + + groupsEnter + .append('g') + .attr('class', 'viewfield-scale'); + + // update + var markers = groups + .merge(groupsEnter) + .sort(function(a, b) { + return (a === selected) ? 1 + : (b === selected) ? -1 + : b.loc[1] - a.loc[1]; // sort Y + }) + .attr('transform', transform) + .select('.viewfield-scale'); + + + markers.selectAll('circle') + .data([0]) + .enter() + .append('circle') + .attr('dx', '0') + .attr('dy', '0') + .attr('r', '6'); + + var viewfields = markers.selectAll('.viewfield') + .data(showViewfields ? [0] : []); + + viewfields.exit() + .remove(); + + viewfields.enter() // viewfields may or may not be drawn... + .insert('path', 'circle') // but if they are, draw below the circles + .attr('class', 'viewfield') + .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') + .attr('d', viewfieldPath); + + function viewfieldPath() { + var d = this.parentNode.__data__; + if (d.pano) { + return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; + } else { + return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z'; + } + } + } + + + function drawImages(selection) { + // console.log("svg: drawImages called ...."); + var enabled = svgStreetside.enabled, + service = getService(); + + layer = selection.selectAll('.layer-streetside-images') + .data(service ? [0] : []); + + layer.exit() + .remove(); + + var layerEnter = layer.enter() + .append('g') + .attr('class', 'layer-streetside-images') + .style('display', enabled ? 'block' : 'none'); + + // layerEnter + // .append('g') + // .attr('class', 'sequences'); + + layerEnter + .append('g') + .attr('class', 'markers'); + + layer = layerEnter + .merge(layer); + + if (enabled) { + if (service && ~~context.map().zoom() >= minZoom) { + editOn(); + update(); + // console.log("svg: calling loadImages...."); + service.loadImages(projection); + } else { + editOff(); + } + } + } + + + drawImages.enabled = function(_) { + if (!arguments.length) return svgStreetside.enabled; + svgStreetside.enabled = _; + if (svgStreetside.enabled) { + showLayer(); + } else { + hideLayer(); + } + dispatch.call('change'); + return this; + }; + + + drawImages.supported = function() { + return !!getService(); + }; + + + init(); + + return drawImages; +} From 2b50d36f6560661bd18f54e9ee06c38ba73decd9 Mon Sep 17 00:00:00 2001 From: Shawna Paradee Date: Tue, 20 Mar 2018 13:05:33 -0700 Subject: [PATCH 2/7] adding points for streetside images --- css/60_photos.css | 47 +++++++++++++++++++++++++++++++++ data/core.yaml | 3 +++ dist/locales/en.json | 4 +++ modules/behavior/select.js | 1 + modules/renderer/map.js | 1 + modules/services/index.js | 3 +++ modules/services/mapillary.js | 6 ++--- modules/services/streetside.js | 4 +++ modules/svg/index.js | 1 + modules/svg/layers.js | 2 ++ modules/svg/mapillary_images.js | 3 ++- modules/ui/init.js | 1 + modules/ui/map_data.js | 2 +- package.json | 5 ++++ test/spec/svg/layers.js | 1 + 15 files changed, 79 insertions(+), 5 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 3d2d8670fe..18a18f6433 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -42,6 +42,29 @@ color: #fff; } +/* streetside photo attribution */ +.photo-wrapper .photo-attribution-streetside { + width: 100%; + font-size: 10px; + position: absolute; + bottom: 0; + right: 0; + padding: 4px 2px; + z-index: 10; +} + +.photo-attribution-streetside a, +.photo-attribution-streetside a:visited, +.photo-attribution-streetside span { + padding: 4px 2px; + color: #fff; +} +.photo-attribution-streetside .image_link{ + color: #fff; + float: left; + line-height: 6px; +} + /* markers and sequences */ .viewfield-group { pointer-events: visible; @@ -113,6 +136,30 @@ } +/* Streetside Image Layer */ +.layer-streetside-images { + pointer-events: none; +} +.layer-streetside-images .viewfield-group * { + fill: #00d8f5; +} +.layer-streetside-images .viewfield-group * { + fill: #00d8f5; +} +.layer-streetside-images .viewfield-group.selected * { + fill: #fffc64 !important; + fill-opacity: 1; + +} +.layer-streetside-images .viewfield-group.hovered * { + fill: #fffc64 !important; + fill-opacity: .9; +} + +.layer-streetside-images .sequence { + stroke: #00d8f5; +} + /* Mapillary Image Layer */ .layer-mapillary-images { pointer-events: none; diff --git a/data/core.yaml b/data/core.yaml index 4d487fa0d2..ecfaf6998e 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -576,6 +576,9 @@ en: drag_drop: "Drag and drop a .gpx, .geojson or .kml file on the page, or click the button to the right to browse" zoom: "Zoom to layer" browse: "Browse for a file" + streetside: + tooltip: "Streetside photos from Microsoft" + title: "Photo Overlay (Streetside)" mapillary_images: tooltip: "Street-level photos from Mapillary" title: "Photo Overlay (Mapillary)" diff --git a/dist/locales/en.json b/dist/locales/en.json index ca16b9f298..5ed6b6d099 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -701,6 +701,10 @@ "zoom": "Zoom to layer", "browse": "Browse for a file" }, + "streetside": { + "tooltip": "Streetside photos from Microsoft", + "title": "Photo Overlay (Streetside)" + }, "mapillary_images": { "tooltip": "Street-level photos from Mapillary", "title": "Photo Overlay (Mapillary)" diff --git a/modules/behavior/select.js b/modules/behavior/select.js index 9a9c0b34d2..9232f6c58e 100644 --- a/modules/behavior/select.js +++ b/modules/behavior/select.js @@ -98,6 +98,7 @@ export function behaviorSelect(context) { function click() { + d3_select(window) .on('mouseup.select', null, true); diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 177fc6b42a..dc293b09cd 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -514,6 +514,7 @@ export function rendererMap(context) { // returns Lng/Lat map.mouseCoordinates = function() { var coord = map.mouse() || pxCenter(); + console.log("map.mouseCoordinates",projection.invert(coord)); return projection.invert(coord); }; diff --git a/modules/services/index.js b/modules/services/index.js index aa5055b5cd..052d2136b2 100644 --- a/modules/services/index.js +++ b/modules/services/index.js @@ -1,3 +1,4 @@ +import serviceStreetside from './streetside'; import serviceMapillary from './mapillary'; import serviceNominatim from './nominatim'; import serviceOpenstreetcam from './openstreetcam'; @@ -8,6 +9,7 @@ import serviceWikipedia from './wikipedia'; export var services = { geocoder: serviceNominatim, + streetside: serviceStreetside, mapillary: serviceMapillary, openstreetcam: serviceOpenstreetcam, osm: serviceOsm, @@ -17,6 +19,7 @@ export var services = { }; export { + serviceStreetside, serviceMapillary, serviceNominatim, serviceOpenstreetcam, diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 2c7bedf3c0..5f39a4170a 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -28,10 +28,10 @@ import { geoExtent } from '../geo'; import { utilDetect } from '../util/detect'; import { utilQsString, utilRebind } from '../util'; - var apibase = 'https://a.mapillary.com/v3/', viewercss = 'mapillary-js/mapillary.min.css', - viewerjs = 'mapillary-js/mapillary.min.js', + // viewerjs = 'mapillary-js/mapillary.min.js', + viewerjs = 'mapillary-js/mapillary.js', clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi', maxResults = 1000, tileZoom = 14, @@ -520,7 +520,7 @@ export default { this.initViewer(imageKey, context); } else { _mlyViewer.moveToKey(imageKey) - .catch(function(e) { console.error('mly3', e); }); // eslint-disable-line no-console + .catch(function(e) { console.error('mly3', e); }); // eslint-disabe-line no-console } return this; diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 72cedd60cf..99a362d2ce 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -23,6 +23,10 @@ import { import rbush from 'rbush'; +// photo sphere viewer +import _three from 'three/build/three'; +import _d from 'd.js/lib/d'; + import { jsonpRequest } from '../util/jsonp_request'; import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; import { geoExtent } from '../geo'; diff --git a/modules/svg/index.js b/modules/svg/index.js index 68e2f2f289..29944847d5 100644 --- a/modules/svg/index.js +++ b/modules/svg/index.js @@ -6,6 +6,7 @@ export { svgIcon } from './icon.js'; export { svgLabels } from './labels.js'; export { svgLayers } from './layers.js'; export { svgLines } from './lines.js'; +export { svgStreetside } from './streetside.js'; export { svgMapillaryImages } from './mapillary_images.js'; export { svgMapillarySigns } from './mapillary_signs.js'; export { svgMidpoints } from './midpoints.js'; diff --git a/modules/svg/layers.js b/modules/svg/layers.js index 08f92db184..8e6227dbf1 100644 --- a/modules/svg/layers.js +++ b/modules/svg/layers.js @@ -8,6 +8,7 @@ import { select as d3_select } from 'd3-selection'; import { svgDebug } from './debug'; import { svgGpx } from './gpx'; +import { svgStreetside } from './streetside'; import { svgMapillaryImages } from './mapillary_images'; import { svgMapillarySigns } from './mapillary_signs'; import { svgOpenstreetcamImages } from './openstreetcam_images'; @@ -22,6 +23,7 @@ export function svgLayers(projection, context) { layers = [ { id: 'osm', layer: svgOsm(projection, context, dispatch) }, { id: 'gpx', layer: svgGpx(projection, context, dispatch) }, + { id: 'streetside', layer: svgStreetside(projection, context, dispatch)}, { id: 'mapillary-images', layer: svgMapillaryImages(projection, context, dispatch) }, { id: 'mapillary-signs', layer: svgMapillarySigns(projection, context, dispatch) }, { id: 'openstreetcam-images', layer: svgOpenstreetcamImages(projection, context, dispatch) }, diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index fb8a4b4b84..72bbd94c0a 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -27,7 +27,7 @@ export function svgMapillaryImages(projection, context, dispatch) { } else if (!services.mapillary && _mapillary) { _mapillary = null; } - + return _mapillary; } @@ -76,6 +76,7 @@ export function svgMapillaryImages(projection, context, dispatch) { function click(d) { + console.log("mapillary image feature click: ", d); var service = getService(); if (!service) return; diff --git a/modules/ui/init.js b/modules/ui/init.js index adeb376fb4..26548c6fd6 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -249,6 +249,7 @@ export function uiInit(context) { .append('button') .attr('class', 'thumb-hide') .on('click', function () { + if (services.streetside) { services.streetside.hideViewer(); } if (services.mapillary) { services.mapillary.hideViewer(); } if (services.openstreetcam) { services.openstreetcam.hideViewer(); } }) diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 457a43be53..3e61f4669c 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -86,7 +86,7 @@ export function uiMapData(context) { function drawPhotoItems(selection) { - var photoKeys = ['mapillary-images', 'mapillary-signs', 'openstreetcam-images']; + var photoKeys = ['streetside','mapillary-images', 'mapillary-signs', 'openstreetcam-images']; var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; }); var data = photoLayers.filter(function(obj) { return obj.layer.supported(); }); diff --git a/package.json b/package.json index a819e512d9..378201d4f5 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,9 @@ "chai": "^4.1.0", "colors": "^1.1.2", "concat-files": "^0.1.1", + "d.js": "^0.7.5", "d3": "4.13.0", + "dot": "^1.1.2", "ecstatic": "^3.0.0", "editor-layer-index": "osmlab/editor-layer-index.git#gh-pages", "eslint": "^4.3.0", @@ -66,6 +68,7 @@ "name-suggestion-index": "0.1.4", "npm-run-all": "^4.0.0", "phantomjs-prebuilt": "~2.1.11", + "photo-sphere-viewer": "^3.3.1", "request": "^2.81.0", "rollup": "~0.56.3", "rollup-plugin-commonjs": "~8.3.0", @@ -79,6 +82,8 @@ "sinon-chai": "^2.14.0", "smash": "0.0", "svg-sprite": "1.3.7", + "three": "^0.91.0", + "uevent": "^1.0.0", "uglify-js": "^3.0.0", "xml2js": "^0.4.17", "xmlbuilder": "^9.0.6" diff --git a/test/spec/svg/layers.js b/test/spec/svg/layers.js index 75c957daaf..b0af6a0384 100644 --- a/test/spec/svg/layers.js +++ b/test/spec/svg/layers.js @@ -29,6 +29,7 @@ describe('iD.svgLayers', function () { expect(nodes.length).to.eql(6); expect(d3.select(nodes[0]).classed('data-layer-osm')).to.be.true; expect(d3.select(nodes[1]).classed('data-layer-gpx')).to.be.true; + expect(d3.select(nodes[2]).classed('data-layer-streetside')).to.be.true; expect(d3.select(nodes[2]).classed('data-layer-mapillary-images')).to.be.true; expect(d3.select(nodes[3]).classed('data-layer-mapillary-signs')).to.be.true; expect(d3.select(nodes[4]).classed('data-layer-openstreetcam-images')).to.be.true; From 40aafc2713fe500ed23e486fc423ff401bc45af6 Mon Sep 17 00:00:00 2001 From: Shawna Paradee Date: Tue, 1 May 2018 09:51:21 -0700 Subject: [PATCH 3/7] add connect to viewer and add footer --- css/60_photos.css | 25 ++++++++++++++++++ modules/services/streetside.js | 47 ++++++++++++++++------------------ modules/svg/streetside.js | 2 +- package.json | 5 ---- 4 files changed, 48 insertions(+), 31 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 18a18f6433..1022cd0ebb 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -64,6 +64,9 @@ float: left; line-height: 6px; } +.photo-attribution-streetside .image_link:hover{ + color: #06b8ff; +} /* markers and sequences */ .viewfield-group { @@ -210,6 +213,28 @@ } +/* Streetside viewer */ +#ms .domRenderer .TagSymbol { + font-size: 10px; + background-color: rgba(0,0,0,0.4); + padding: 0 4px; + border-radius: 4px; + top: -25px; +} +#ms .domRenderer .Attribution { + /* we will roll our own to avoid async update issues like #4526 */ + display: none; +} + +.ms-wrapper .photo-attribution a:active, +.ms-wrapper .photo-attribution a:hover { + color: #35af6d; +} + +.ms-wrapper .mapillary-js-dom { + z-index: 9; +} + /* Mapillary viewer */ #mly .domRenderer .TagSymbol { font-size: 10px; diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 99a362d2ce..c316df7fcc 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -1,4 +1,4 @@ -/* global Mapillary:false */ + import _filter from 'lodash-es/filter'; import _find from 'lodash-es/find'; import _flatten from 'lodash-es/flatten'; @@ -23,10 +23,6 @@ import { import rbush from 'rbush'; -// photo sphere viewer -import _three from 'three/build/three'; -import _d from 'd.js/lib/d'; - import { jsonpRequest } from '../util/jsonp_request'; import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; import { geoExtent } from '../geo'; @@ -38,7 +34,6 @@ var msapi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/'; var apibase = 'https://a.mapillary.com/v3/', appkey = 'An-VWpS-o_m7aV8Lxa0oR9cC3bxwdhdCYEGEFHMP9wyMbmRJFzWfMDD1z3-DXUuE', viewercss = 'mapillary-js/mapillary.min.css', - //viewerjs = 'mapillary-js/mapillary.min.js', viewerjs = 'mapillary-js/mapillary.js', clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi', maxResults = 1000, @@ -538,38 +533,40 @@ export default { } }, - + // create the streeside viewer loadViewer: function (context) { - // add mly-wrapper - var wrap = d3_select('#photoviewer').selectAll('.mly-wrapper') + // create ms-wrapper a photo wrapper class + var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper') .data([0]); + // inject ms-wrapper into the photoviewer div (used by all + // to house each custom photo viewer) var wrapEnter = wrap.enter() .append('div') - .attr('id', 'mly') - .attr('class', 'photo-wrapper mly-wrapper') + .attr('id', 'ms') + .attr('class', 'photo-wrapper ms-wrapper') .classed('hide', true); + // inject div to support photo attribution into ms-wrapper wrapEnter .append('div') .attr('class', 'photo-attribution-streetside fillD'); - - - // load mapillary-viewercss - d3_select('head').selectAll('#mapillary-viewercss') + + // load streetside viewer css + d3_select('head').selectAll('#streetside-viewercss') .data([0]) .enter() .append('link') - .attr('id', 'mapillary-viewercss') + .attr('id', 'streetside-viewercss') .attr('rel', 'stylesheet') .attr('href', context.asset(viewercss)); - // load mapillary-viewerjs - d3_select('head').selectAll('#mapillary-viewerjs') + // load streetside viewer js + d3_select('head').selectAll('#streetside-viewerjs') .data([0]) .enter() .append('script') - .attr('id', 'mapillary-viewerjs') + .attr('id', 'streetside-viewerjs') .attr('src', context.asset(viewerjs)); }, @@ -578,18 +575,18 @@ export default { var wrap = d3_select('#photoviewer') .classed('hide', false); - var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size(); + var isHidden = wrap.selectAll('.photo-wrapper.ms-wrapper.hide').size(); if (isHidden) { wrap - .selectAll('.photo-wrapper:not(.mly-wrapper)') + .selectAll('.photo-wrapper:not(.ms-wrapper)') .classed('hide', true); wrap - .selectAll('.photo-wrapper.mly-wrapper') + .selectAll('.photo-wrapper.ms-wrapper') .classed('hide', false); - _mlyViewer.resize(); + //_mlyViewer.resize(); } return this; @@ -663,7 +660,7 @@ export default { }; } - _mlyViewer = new Mapillary.Viewer('mly', clientId, null, opts); + _mlyViewer = new Mapillary.Viewer('ms', clientId, null, opts); _mlyViewer.on('nodechanged', nodeChanged); _mlyViewer.moveToKey(imageKey) .catch(function (e) { console.error('mly3', e); }); // eslint-disable-line no-console @@ -726,7 +723,7 @@ export default { this.setStyles(null, true); - var wrap = d3_select('#photoviewer .mly-wrapper'); + var wrap = d3_select('#photoviewer .ms-wrapper'); var attribution = wrap.selectAll('.photo-attribution-streetside').html(''); var year = (new Date()).getFullYear(); diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 123350731c..3bfae6409e 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -83,7 +83,7 @@ export function svgStreetside(projection, context, dispatch) { service .selectImage(d) - .updateViewer(d.key, context) + //.updateViewer(d.key, context); .showViewer(); context.map().centerEase(d.loc); diff --git a/package.json b/package.json index 378201d4f5..a819e512d9 100644 --- a/package.json +++ b/package.json @@ -45,9 +45,7 @@ "chai": "^4.1.0", "colors": "^1.1.2", "concat-files": "^0.1.1", - "d.js": "^0.7.5", "d3": "4.13.0", - "dot": "^1.1.2", "ecstatic": "^3.0.0", "editor-layer-index": "osmlab/editor-layer-index.git#gh-pages", "eslint": "^4.3.0", @@ -68,7 +66,6 @@ "name-suggestion-index": "0.1.4", "npm-run-all": "^4.0.0", "phantomjs-prebuilt": "~2.1.11", - "photo-sphere-viewer": "^3.3.1", "request": "^2.81.0", "rollup": "~0.56.3", "rollup-plugin-commonjs": "~8.3.0", @@ -82,8 +79,6 @@ "sinon-chai": "^2.14.0", "smash": "0.0", "svg-sprite": "1.3.7", - "three": "^0.91.0", - "uevent": "^1.0.0", "uglify-js": "^3.0.0", "xml2js": "^0.4.17", "xmlbuilder": "^9.0.6" From 5c9d508114e083196bc35355287364cd8dc19b4d Mon Sep 17 00:00:00 2001 From: LorenMueller Date: Tue, 8 May 2018 14:06:41 -0700 Subject: [PATCH 4/7] package.json for pannellum dependency and dist: script; streetside files --- dist/pannellum-streetside/pannellum.css | 2 + dist/pannellum-streetside/pannellum.htm | 107 +++++++++++++++ dist/pannellum-streetside/pannellum.js | 101 ++++++++++++++ modules/services/streetside.js | 173 ++++++++++++++++-------- modules/svg/streetside.js | 13 +- package.json | 4 +- 6 files changed, 338 insertions(+), 62 deletions(-) create mode 100644 dist/pannellum-streetside/pannellum.css create mode 100644 dist/pannellum-streetside/pannellum.htm create mode 100644 dist/pannellum-streetside/pannellum.js diff --git a/dist/pannellum-streetside/pannellum.css b/dist/pannellum-streetside/pannellum.css new file mode 100644 index 0000000000..ece3c5e0c5 --- /dev/null +++ b/dist/pannellum-streetside/pannellum.css @@ -0,0 +1,2 @@ +/* Pannellum 2.4.1, https://github.com/mpetroff/pannellum */ +.pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica,"Nimbus Sans L","Liberation Sans",Arial,sans-serif;background:#f4f4f4 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A') repeat;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content;touch-action:none}.pnlm-container *{box-sizing:content-box}.pnlm-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor:grab;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-grabbing{cursor:grabbing;cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-sprite{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A')}.pnlm-container:-moz-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:4px;background-color:#fff;border:1px solid #999;border-color:rgba(0,0,0,0.4);border-radius:3px;cursor:pointer;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:4px;z-index:1}.pnlm-zoom-controls{width:26px;height:52px}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:3px 3px 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -26px;border-top:1px solid #ddd;border-top-color:rgba(0,0,0,0.10);border-radius:0 0 3px 3px}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:26px;height:26px}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background-color:rgba(255,255,255,0.5);border-radius:13px;display:none}.pnlm-orientation-button-inactive{background-position:0 -156px}.pnlm-orientation-button-active{background-position:0 -182px}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -52px}.pnlm-fullscreen-toggle-button-active{background-position:0 -78px}.pnlm-panorama-info{position:absolute;bottom:4px;background-color:rgba(0,0,0,0.7);border-radius:0 3px 3px 0;padding-right:10px;color:#fff;text-align:left;display:none;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-title-box{position:relative;font-size:20px;display:table;padding-left:5px;margin-bottom:3px}.pnlm-author-box{position:relative;font-size:12px;display:table;padding-left:5px}.pnlm-load-box{position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:rgba(0,0,0,0.7);border-radius:3px;text-align:center;font-size:20px;display:none;color:#fff}.pnlm-load-box p{margin:20px 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:10px;width:10px;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}@-webkit-keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:rgba(0,0,0,.7);border-radius:3px;text-align:center;font-size:20px;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0,0,0,.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:15px;position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:#000;border-radius:3px;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 5px 0 5px}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:11px;line-height:11px;color:#fff;padding:5px 8px 5px 8px;background:rgba(0,0,0,0.7);border-radius:3px;position:absolute;top:50px;left:50px;display:none;opacity:0;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:26px;width:26px;border-radius:13px}.pnlm-hotspot:hover{background-color:rgba(255,255,255,0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -104px}.pnlm-hotspot.pnlm-scene{background-position:0 -130px}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.7);color:#fff;text-align:center;max-width:200px;padding:5px 10px;margin-left:-220px;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:'';position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:rgba(0,0,0,0.7) transparent transparent transparent;bottom:-20px;left:-10px;margin:0 50%}.pnlm-compass{position:absolute;width:50px;height:50px;right:4px;bottom:4px;border-radius:25px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A');cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:150px;margin:0 auto;border:#fff 1px solid;height:6px}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:12px}.pnlm-fade-img{position:absolute;top:0;left:0} \ No newline at end of file diff --git a/dist/pannellum-streetside/pannellum.htm b/dist/pannellum-streetside/pannellum.htm new file mode 100644 index 0000000000..cee7b845cc --- /dev/null +++ b/dist/pannellum-streetside/pannellum.htm @@ -0,0 +1,107 @@ + + +Pannellum
\ No newline at end of file diff --git a/dist/pannellum-streetside/pannellum.js b/dist/pannellum-streetside/pannellum.js new file mode 100644 index 0000000000..ba60e94741 --- /dev/null +++ b/dist/pannellum-streetside/pannellum.js @@ -0,0 +1,101 @@ +// Pannellum 2.4.1, https://github.com/mpetroff/pannellum +window.libpannellum=function(J,f,m){function Ba(P){function bb(a,e){return 1==a.level&&1!=e.level?-1:1==e.level&&1!=a.level?1:e.timestamp-a.timestamp}function W(a,e){return a.level!=e.level?a.level-e.level:a.diff-e.diff}function X(a,e,d,f,p,c){this.vertices=a;this.side=e;this.level=d;this.x=f;this.y=p;this.path=c.replace("%s",e).replace("%l",d).replace("%x",f).replace("%y",p)}function Y(a,e,f,m,p){var c;var g=e.vertices;c=ea(a,g.slice(0,3));var t=ea(a,g.slice(3,6)),z=ea(a,g.slice(6,9)),g=ea(a,g.slice(9, +12)),y=c[0]+t[0]+z[0]+g[0];-4==y||4==y?c=!1:(y=c[1]+t[1]+z[1]+g[1],c=-4==y||4==y?!1:4!=c[2]+t[2]+z[2]+g[2]);if(c){c=e.vertices;t=c[0]+c[3]+c[6]+c[9];z=c[1]+c[4]+c[7]+c[10];g=c[2]+c[5]+c[8]+c[11];y=Math.sqrt(t*t+z*z+g*g);g=Math.asin(g/y);t=Math.atan2(z,t)-m;t+=t>Math.PI?-2*Math.PI:t<-Math.PI?2*Math.PI:0;t=Math.abs(t);e.diff=Math.acos(Math.sin(f)*Math.sin(g)+Math.cos(f)*Math.cos(g)*Math.cos(t));t=!1;for(z=0;zf&&(c[0]=-1);1p&&(c[1]=-1);1d||1l;l++)d[4*(h+a.width)+l]=d[4*(h+2*a.width)+l],d[4*(h+a.width*(a.height-2))+l]=d[4*(h+a.width*(a.height-3))+l];for(h=2;hl;l++)d[4*(h*a.width+1)+l]=d[4*(h*a.width+2)+l],d[4*((h+1)*a.width-2)+l]=d[4*((h+1)*a.width- +3)+l];for(l=0;4>l;l++)d[4*(a.width+1)+l]=d[4*(2*a.width+2)+l],d[4*(2*a.width-2)+l]=d[4*(3*a.width-3)+l],d[4*(a.width*(a.height-2)+1)+l]=d[4*(a.width*(a.height-3)+2)+l],d[4*(a.width*(a.height-1)-2)+l]=d[4*(a.width*(a.height-2)-3)+l];for(h=1;hl;l++)d[4*h+l]=d[4*(h+a.width)+l],d[4*(h+a.width*(a.height-1))+l]=d[4*(h+a.width*(a.height-2))+l];for(h=1;hl;l++)d[h*a.width*4+l]=d[4*(h*a.width+1)+l],d[4*((h+1)*a.width-1)+l]=d[4*((h+1)*a.width-2)+l];for(l=0;4> +l;l++)d[l]=d[4*(a.width+1)+l],d[4*(a.width-1)+l]=d[4*(2*a.width-2)+l],d[a.width*(a.height-1)*4+l]=d[4*(a.width*(a.height-2)+1)+l],d[4*(a.width*a.height-1)+l]=d[4*(a.width*(a.height-1)-2)+l];c.putImageData(e,0,0);y++;6==y&&(na=this.width,P.appendChild(R),g())};for(h=0;6>h;h++)c=new Image,c.crossOrigin=Z.crossOrigin?Z.crossOrigin:"anonymous",c.side=h,c.onload=p,c.src="multires"==G?encodeURI(ja.replace("%s",z[h])+"."+s.extension):encodeURI(s[h].src)}else{if(!a)throw console.log("Error: no WebGL support detected!"), +{type:"no webgl"};s.fullpath=s.basePath?s.basePath+s.path:s.path;s.invTileResolution=1/s.tileResolution;e=Ca();ua=[];for(h=0;6>h;h++)ua[h]=e.slice(12*h,12*h+12),e=Ca();if("equirectangular"==G){if(h=Math.max(s.width,s.height),e=a.getParameter(a.MAX_TEXTURE_SIZE),h>e)throw console.log("Error: The image is too big; it's "+h+"px wide, but this device's maximum supported width is "+e+"px."),{type:"webgl size error",width:h,maxWidth:e};}else if("cubemap"==G&&(h=s[0].width,e=a.getParameter(a.MAX_CUBE_MAP_TEXTURE_SIZE), +h>e))throw console.log("Error: The cube face image is too big; it's "+h+"px wide, but this device's maximum supported width is "+e+"px."),{type:"webgl size error",width:h,maxWidth:e};t===m||t.horizonPitch===m&&t.horizonRoll===m||(fa=[t.horizonPitch==m?0:t.horizonPitch,t.horizonRoll==m?0:t.horizonRoll]);h=a.TEXTURE_2D;a.viewport(0,0,a.drawingBufferWidth,a.drawingBufferHeight);V=a.createShader(a.VERTEX_SHADER);e=r;"multires"==G&&(e=v);a.shaderSource(V,e);a.compileShader(V);N=a.createShader(a.FRAGMENT_SHADER); +e=Na;"cubemap"==G?(h=a.TEXTURE_CUBE_MAP,e=Oa):"multires"==G&&(e=oa);a.shaderSource(N,e);a.compileShader(N);d=a.createProgram();a.attachShader(d,V);a.attachShader(d,N);a.linkProgram(d);a.getShaderParameter(V,a.COMPILE_STATUS)||console.log(a.getShaderInfoLog(V));a.getShaderParameter(N,a.COMPILE_STATUS)||console.log(a.getShaderInfoLog(N));a.getProgramParameter(d,a.LINK_STATUS)||console.log(a.getProgramInfoLog(d));a.useProgram(d);d.drawInProgress=!1;d.texCoordLocation=a.getAttribLocation(d,"a_texCoord"); +a.enableVertexAttribArray(d.texCoordLocation);"multires"!=G?(ka||(ka=a.createBuffer()),a.bindBuffer(a.ARRAY_BUFFER,ka),a.bufferData(a.ARRAY_BUFFER,new Float32Array([-1,1,1,1,1,-1,-1,1,1,-1,-1,-1]),a.STATIC_DRAW),a.vertexAttribPointer(d.texCoordLocation,2,a.FLOAT,!1,0,0),d.aspectRatio=a.getUniformLocation(d,"u_aspectRatio"),a.uniform1f(d.aspectRatio,a.drawingBufferWidth/a.drawingBufferHeight),d.psi=a.getUniformLocation(d,"u_psi"),d.theta=a.getUniformLocation(d,"u_theta"),d.f=a.getUniformLocation(d, +"u_f"),d.h=a.getUniformLocation(d,"u_h"),d.v=a.getUniformLocation(d,"u_v"),d.vo=a.getUniformLocation(d,"u_vo"),d.rot=a.getUniformLocation(d,"u_rot"),a.uniform1f(d.h,ja/(2*Math.PI)),a.uniform1f(d.v,p/Math.PI),a.uniform1f(d.vo,c/Math.PI*2),"equirectangular"==G&&(d.backgroundColor=a.getUniformLocation(d,"u_backgroundColor"),a.uniform4fv(d.backgroundColor,(t.backgroundColor?t.backgroundColor:[0,0,0]).concat([1]))),d.texture=a.createTexture(),a.bindTexture(h,d.texture),"cubemap"==G?(a.texImage2D(a.TEXTURE_CUBE_MAP_POSITIVE_X, +0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[1]),a.texImage2D(a.TEXTURE_CUBE_MAP_NEGATIVE_X,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[3]),a.texImage2D(a.TEXTURE_CUBE_MAP_POSITIVE_Y,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[4]),a.texImage2D(a.TEXTURE_CUBE_MAP_NEGATIVE_Y,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[5]),a.texImage2D(a.TEXTURE_CUBE_MAP_POSITIVE_Z,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[0]),a.texImage2D(a.TEXTURE_CUBE_MAP_NEGATIVE_Z,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[2])):a.texImage2D(h,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s),a.texParameteri(h,a.TEXTURE_WRAP_S, +a.CLAMP_TO_EDGE),a.texParameteri(h,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE),a.texParameteri(h,a.TEXTURE_MIN_FILTER,a.LINEAR),a.texParameteri(h,a.TEXTURE_MAG_FILTER,a.LINEAR)):(d.vertPosLocation=a.getAttribLocation(d,"a_vertCoord"),a.enableVertexAttribArray(d.vertPosLocation),F||(F=a.createBuffer()),ba||(ba=a.createBuffer()),Da||(Da=a.createBuffer()),a.bindBuffer(a.ARRAY_BUFFER,ba),a.bufferData(a.ARRAY_BUFFER,new Float32Array([0,0,1,0,1,1,0,1]),a.STATIC_DRAW),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,Da),a.bufferData(a.ELEMENT_ARRAY_BUFFER, +new Uint16Array([0,1,2,0,2,3]),a.STATIC_DRAW),d.perspUniform=a.getUniformLocation(d,"u_perspMatrix"),d.cubeUniform=a.getUniformLocation(d,"u_cubeMatrix"),d.level=-1,d.currentNodes=[],d.nodeCache=[],d.nodeCacheTimestamp=0);ja=a.getError();if(0!==ja)throw console.log("Error: Something went wrong with WebGL!",ja),{type:"webgl error"};g()}};this.destroy=function(){P!==m&&(A!==m&&P.contains(A)&&P.removeChild(A),R!==m&&P.contains(R)&&P.removeChild(R));if(a){var d=a.getExtension("WEBGL_lose_context");d&& +d.loseContext()}};this.resize=function(){var h=J.devicePixelRatio||1;A.width=A.clientWidth*h;A.height=A.clientHeight*h;a&&(1286==a.getError()&&ta(),a.viewport(0,0,a.drawingBufferWidth,a.drawingBufferHeight),"multires"!=G&&a.uniform1f(d.aspectRatio,A.clientWidth/A.clientHeight))};this.resize();this.setPose=function(a,d){fa=[a,d]};this.render=function(h,e,f,r){var p;p=0;r===m&&(r={});r.roll&&(p=r.roll);if(fa!==m){var c=fa[0],g=fa[1],t=h,z=e,y=Math.cos(g)*Math.sin(h)*Math.sin(c)+Math.cos(h)*(Math.cos(c)* +Math.cos(e)+Math.sin(g)*Math.sin(c)*Math.sin(e)),v=-Math.sin(h)*Math.sin(g)+Math.cos(h)*Math.cos(g)*Math.sin(e);h=Math.cos(g)*Math.cos(c)*Math.sin(h)+Math.cos(h)*(-Math.cos(e)*Math.sin(c)+Math.cos(c)*Math.sin(g)*Math.sin(e));h=Math.asin(Math.max(Math.min(h,1),-1));e=Math.atan2(v,y);c=[Math.cos(t)*(Math.sin(g)*Math.sin(c)*Math.cos(z)-Math.cos(c)*Math.sin(z)),Math.cos(t)*Math.cos(g)*Math.cos(z),Math.cos(t)*(Math.cos(c)*Math.sin(g)*Math.cos(z)+Math.sin(z)*Math.sin(c))];g=[-Math.cos(h)*Math.sin(e),Math.cos(h)* +Math.cos(e)];g=Math.acos(Math.max(Math.min((c[0]*g[0]+c[1]*g[1])/(Math.sqrt(c[0]*c[0]+c[1]*c[1]+c[2]*c[2])*Math.sqrt(g[0]*g[0]+g[1]*g[1])),1),-1));0>c[2]&&(g=2*Math.PI-g);p+=g}if(a||"multires"!=G&&"cubemap"!=G){if("multires"!=G)f=2*Math.atan(Math.tan(0.5*f)/(a.drawingBufferWidth/a.drawingBufferHeight)),f=1/Math.tan(0.5*f),a.uniform1f(d.psi,e),a.uniform1f(d.theta,h),a.uniform1f(d.rot,p),a.uniform1f(d.f,f),!0===va&&"equirectangular"==G&&(a.bindTexture(a.TEXTURE_2D,d.texture),a.texImage2D(a.TEXTURE_2D, +0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s)),a.drawArrays(a.TRIANGLES,0,6);else{c=a.drawingBufferWidth/a.drawingBufferHeight;g=2*Math.atan(Math.tan(f/2)*a.drawingBufferHeight/a.drawingBufferWidth);g=1/Math.tan(g/2);c=[g/c,0,0,0,0,g,0,0,0,0,100.1/-99.9,20/-99.9,0,0,-1,0];for(g=1;gs.tileResolution*Math.pow(2,g-1)*Math.tan(f/2)*0.707;)g++;d.level=g;g=[1,0,0,0,1,0,0,0,1];g=ra(g,-p,"z");g=ra(g,-h,"x");g=ra(g,e,"y");g=[g[0],g[1],g[2],0,g[3],g[4],g[5],0,g[6],g[7],g[8],0,0,0,0,1];a.uniformMatrix4fv(d.perspUniform, +!1,new Float32Array(sa(c)));a.uniformMatrix4fv(d.cubeUniform,!1,new Float32Array(sa(g)));c=[c[0]*g[0],c[0]*g[1],c[0]*g[2],0,c[5]*g[4],c[5]*g[5],c[5]*g[6],0,c[10]*g[8],c[10]*g[9],c[10]*g[10],c[11],-g[8],-g[9],-g[10],0];d.nodeCache.sort(bb);if(200d.currentNodes.length+50)for(g=d.nodeCache.splice(200,d.nodeCache.length-200),p=0;pp;p++)t=new X(ua[p],g[p],1,0,0,s.fullpath), +Y(c,t,h,e,f);d.currentNodes.sort(W);for(p=0;pp;p++)f=R.querySelector(".pnlm-"+e[p]+"face").style,f.webkitTransform=h+r[e[p]],f.transform=h+r[e[p]]};this.isLoading=function(){if(a&&"multires"==G)for(var f=0;fu;u++)O.push(new Image),O[u].crossOrigin=b.crossOrigin;n.load.lbox.style.display= +"block";n.load.lbar.style.display="none"}else if("multires"==b.type)u=JSON.parse(JSON.stringify(b.multiRes)),b.basePath&&b.multiRes.basePath&&!/^(?:[a-z]+:)?\/\//i.test(b.multiRes.basePath)?u.basePath=b.basePath+b.multiRes.basePath:b.multiRes.basePath?u.basePath=b.multiRes.basePath:b.basePath&&(u.basePath=b.basePath),O=u;else if(!0===b.dynamic)O=b.panorama;else{if(b.panorama===m){W(b.strings.noPanoramaError);return}O=new Image}if("cubemap"==b.type)for(var ca=6,c=function(){ca--;0===ca&&P()},d=function(a){var u= +f.createElement("a");u.href=a.target.src;u.innerHTML=u.href;W(b.strings.fileAccessError.replace("%s",u.outerHTML))},u=0;uc||65536")+12),e=function(a){var u;0<=d.indexOf(a+'="')?(u=d.substring(d.indexOf(a+'="')+a.length+2),u=u.substring(0,u.indexOf('"'))): +0<=d.indexOf(a+">")&&(u=d.substring(d.indexOf(a+">")+a.length+1),u=u.substring(0,u.indexOf("<")));return u!==m?Number(u):null},ca=e("GPano:FullPanoWidthPixels"),c=e("GPano:CroppedAreaImageWidthPixels"),f=e("GPano:FullPanoHeightPixels"),g=e("GPano:CroppedAreaImageHeightPixels"),h=e("GPano:CroppedAreaTopPixels"),l=e("GPano:PoseHeadingDegrees"),p=e("GPano:PosePitchDegrees"),e=e("GPano:PoseRollDegrees");null!==ca&&null!==c&&null!==f&&null!==g&&null!==h&&(0>da.indexOf("haov")&&(b.haov=c/ca*360),0>da.indexOf("vaov")&& +(b.vaov=g/f*180),0>da.indexOf("vOffset")&&(b.vOffset=-180*((h+g/2)/f-0.5)),null!==l&&0>da.indexOf("northOffset")&&(b.northOffset=l,!1!==b.compass&&(b.compass=!0)),null!==p&&null!==e&&(0>da.indexOf("horizonPitch")&&(b.horizonPitch=p),0>da.indexOf("horizonRoll")&&(b.horizonRoll=e)))}O.src=J.URL.createObjectURL(a)});k.readAsBinaryString!==m?k.readAsBinaryString(a):k.readAsText(a)}function W(a){a===m&&(a=b.strings.genericWebGLError);n.errorMsg.innerHTML="

"+a+"

";w.load.style.display="none";n.load.box.style.display= +"none";n.errorMsg.style.display="table";Pa=!0;M.style.display="none";ga("error",a)}function X(a){var b=Y(a);ha.style.left=b.x+"px";ha.style.top=b.y+"px";clearTimeout(X.t1);clearTimeout(X.t2);ha.style.display="block";ha.style.opacity=1;X.t1=setTimeout(function(){ha.style.opacity=0},2E3);X.t2=setTimeout(function(){ha.style.display="none"},2500);a.preventDefault()}function Y(a){var b=r.getBoundingClientRect(),c={};c.x=a.clientX-b.left;c.y=a.clientY-b.top;return c}function Ca(a){a.preventDefault();r.focus(); +if(K&&b.draggable){var k=Y(a);if(b.hotSpotDebug){var c=sa(a);console.log("Pitch: "+c[0]+", Yaw: "+c[1]+", Center Pitch: "+b.pitch+", Center Yaw: "+b.yaw+", HFOV: "+b.hfov)}Ja();l();b.roll=0;x.hfov=0;la=!0;S=Date.now();xa=k.x;ya=k.y;Qa=b.yaw;Ra=b.pitch;C.classList.add("pnlm-grabbing");C.classList.remove("pnlm-grab");ga("mousedown",a);F()}}function ra(a){b.minHfov===b.hfov?za.setHfov(wa,1E3):(a=sa(a),za.lookAt(a[0],a[1],b.minHfov,1E3))}function sa(a){var k=Y(a);a=B.getCanvas();var c=a.clientWidth,d= +a.clientHeight;a=k.x/c*2-1;var d=(1-k.y/d*2)*d/c,e=1/Math.tan(b.hfov*Math.PI/360),f=Math.sin(b.pitch*Math.PI/180),g=Math.cos(b.pitch*Math.PI/180),k=e*g-d*f,c=Math.sqrt(a*a+k*k),d=180*Math.atan((d*g+e*f)/c)/Math.PI;a=180*Math.atan2(a/c,k/c)/Math.PI+b.yaw;-180>a&&(a+=360);180a.wheelDelta?1:-1):a.wheelDelta?(U(b.hfov-0.05*a.wheelDelta),x.hfov=0>a.wheelDelta?1:-1):a.detail&&(U(b.hfov+1.5*a.detail),x.hfov=0Za.indexOf(k)||(a.preventDefault(), +27==k?Ga&&z():s(k,!0))}function ua(){for(var a=0;10>a;a++)q[a]=!1}function fa(a){var b=a.which||a.keycode;0>Za.indexOf(b)||(a.preventDefault(),s(b,!1))}function s(a,b){var c=!1;switch(a){case 109:case 189:case 17:case 173:q[0]!=b&&(c=!0);q[0]=b;break;case 107:case 187:case 16:case 61:q[1]!=b&&(c=!0);q[1]=b;break;case 38:q[2]!=b&&(c=!0);q[2]=b;break;case 87:q[6]!=b&&(c=!0);q[6]=b;break;case 40:q[3]!=b&&(c=!0);q[3]=b;break;case 83:q[7]!=b&&(c=!0);q[7]=b;break;case 37:q[4]!=b&&(c=!0);q[4]=b;break;case 65:q[8]!= +b&&(c=!0);q[8]=b;break;case 39:q[5]!=b&&(c=!0);q[5]=b;break;case 68:q[9]!=b&&(c=!0),q[9]=b}c&&b&&(ia="undefined"!==typeof performance&&performance.now()?performance.now():Date.now(),F())}function G(){if(K){var a=!1,k=b.pitch,c=b.yaw,d=b.hfov,e;e="undefined"!==typeof performance&&performance.now()?performance.now():Date.now();ia===m&&(ia=e);var f=(e-ia)*b.hfov/1700,f=Math.min(f,1);q[0]&&!0===b.keyboardZoom&&(U(b.hfov+(0.8*x.hfov+0.5)*f),a=!0);q[1]&&!0===b.keyboardZoom&&(U(b.hfov+(0.8*x.hfov-0.2)*f), +a=!0);if(q[2]||q[6])b.pitch+=(0.8*x.pitch+0.2)*f,a=!0;if(q[3]||q[7])b.pitch+=(0.8*x.pitch-0.2)*f,a=!0;if(q[4]||q[8])b.yaw+=(0.8*x.yaw-0.2)*f,a=!0;if(q[5]||q[9])b.yaw+=(0.8*x.yaw+0.2)*f,a=!0;a&&(S=Date.now());Date.now();if(b.autoRotate){if(0.001=b.autoRotateStopDelay&&(b.autoRotateStopDelay=!1,$=b.autoRotate, +b.autoRotate=0))}L.pitch&&(va("pitch"),k=b.pitch);L.yaw&&(va("yaw"),c=b.yaw);L.hfov&&(va("hfov"),d=b.hfov);0k.startPosition&&c>=k.endPosition||k.endPositionb.autoRotateInactivityDelay&&!b.autoRotate&&(b.autoRotate=$,za.lookAt(Ea,m,wa,3E3)), +requestAnimationFrame(ba);else if(B&&(B.isLoading()||!0===b.dynamic&&$a))requestAnimationFrame(ba);else{Ta=!1;ia=m;var a=b.autoRotateInactivityDelay-(Date.now()-S);0b.yaw&&(b.yaw+=360);a=b.yaw;var k=b.maxYaw-b.minYaw,d=-180,e=180;360>k&&(d=b.minYaw+b.hfov/2,e=b.maxYaw-b.hfov/2,kaa?aa+=1:10===aa?(ab=c[2]/Math.PI*180+b.yaw,aa=!0,requestAnimationFrame(ba)):(b.pitch=c[0]/Math.PI*180,b.roll=-c[1]/Math.PI*180,b.yaw=-c[2]/Math.PI*180+ab)}function h(){try{var a={};b.horizonPitch!==m&&(a.horizonPitch=b.horizonPitch*Math.PI/180);b.horizonRoll!==m&&(a.horizonRoll=b.horizonRoll*Math.PI/180);b.backgroundColor!==m&&(a.backgroundColor= +b.backgroundColor);B.init(O,b.type,b.dynamic,b.haov*Math.PI/180,b.vaov*Math.PI/180,b.vOffset*Math.PI/180,e,a);!0!==b.dynamic&&(O=m)}catch(c){if("webgl error"==c.type||"no webgl"==c.type)W();else if("webgl size error"==c.type)W(b.strings.textureSizeError.replace("%s",c.width).replace("%s",c.maxWidth));else throw W(b.strings.unknownError),c;}}function e(){if(b.sceneFadeDuration&&B.fadeImg!==m){B.fadeImg.style.opacity=0;var a=B.fadeImg;delete B.fadeImg;setTimeout(function(){M.removeChild(a);ga("scenechangefadedone")}, +b.sceneFadeDuration)}Ha.style.display=b.compass?"inline":"none";ja();n.load.box.style.display="none";qa!==m&&(M.removeChild(qa),qa=m);K=!0;ga("load");F()}function Ia(a){a.pitch=Number(a.pitch)||0;a.yaw=Number(a.yaw)||0;var c=f.createElement("div");c.className="pnlm-hotspot-base";c.className=a.cssClass?c.className+(" "+a.cssClass):c.className+(" pnlm-hotspot pnlm-sprite pnlm-"+D(a.type));var d=f.createElement("span");a.text&&(d.innerHTML=D(a.text));var e;if(a.video){e=f.createElement("video");var g= +a.video;b.basePath&&!oa(g)&&(g=b.basePath+g);e.src=encodeURI(g);e.controls=!0;e.style.width=a.width+"px";M.appendChild(c);d.appendChild(e)}else if(a.image){g=a.image;b.basePath&&!oa(g)&&(g=b.basePath+g);e=f.createElement("a");e.href=encodeURI(a.URL?a.URL:g);e.target="_blank";d.appendChild(e);var h=f.createElement("img");h.src=encodeURI(g);h.style.width=a.width+"px";h.style.paddingTop="5px";M.appendChild(c);e.appendChild(h);d.style.maxWidth="initial"}else a.URL?(e=f.createElement("a"),e.href=encodeURI(a.URL), +e.target="_blank",M.appendChild(e),c.style.cursor="pointer",d.style.cursor="pointer",e.appendChild(c)):(a.sceneId&&(c.onclick=c.ontouchend=function(){c.clicked||(c.clicked=!0,I(a.sceneId,a.targetPitch,a.targetYaw,a.targetHfov));return!1},c.style.cursor="pointer",d.style.cursor="pointer"),M.appendChild(c));if(a.createTooltipFunc)a.createTooltipFunc(c,a.createTooltipArgs);else if(a.text||a.video||a.image)c.classList.add("pnlm-tooltip"),c.appendChild(d),d.style.width=d.scrollWidth-20+"px",d.style.marginLeft= +-(d.scrollWidth-c.offsetWidth)/2+"px",d.style.marginTop=-d.scrollHeight-12+"px";a.clickHandlerFunc&&(c.addEventListener("click",function(b){a.clickHandlerFunc(b,a.clickHandlerArgs)},"false"),c.style.cursor="pointer",d.style.cursor="pointer");a.div=c}function ja(){Va||(b.hotSpots?(b.hotSpots=b.hotSpots.sort(function(a,b){return a.pitch=a.yaw&&-90=h||(90=a.yaw)&&0>=h)a.div.style.visibility="hidden";else{var l=Math.sin((-a.yaw+b.yaw)*Math.PI/180),p=Math.tan(b.hfov*Math.PI/360);a.div.style.visibility="visible";var m=B.getCanvas(),n=m.clientWidth, +m=m.clientHeight,c=[-n/p*l*d/h/2,-n/p*(c*f-d*g*e)/h/2],d=Math.sin(b.roll*Math.PI/180),e=Math.cos(b.roll*Math.PI/180),c=[c[0]*e-c[1]*d,c[0]*d+c[1]*e];c[0]+=(n-a.div.offsetWidth)/2;c[1]+=(m-a.div.offsetHeight)/2;n="translate("+c[0]+"px, "+c[1]+"px) translateZ(9999px) rotate("+b.roll+"deg)";a.div.style.webkitTransform=n;a.div.style.MozTransform=n;a.div.style.transform=n}}function g(a){b={};var c,d,e="haov vaov vOffset northOffset horizonPitch horizonRoll".split(" ");da=[];for(c in Wa)Wa.hasOwnProperty(c)&& +(b[c]=Wa[c]);for(c in v.default)if(v.default.hasOwnProperty(c))if("strings"==c)for(d in v.default.strings)v.default.strings.hasOwnProperty(d)&&(b.strings[d]=D(v.default.strings[d]));else b[c]=v.default[c],0<=e.indexOf(c)&&da.push(c);if(null!==a&&""!==a&&v.scenes&&v.scenes[a]){var f=v.scenes[a];for(c in f)if(f.hasOwnProperty(c))if("strings"==c)for(d in f.strings)f.strings.hasOwnProperty(d)&&(b.strings[d]=D(f.strings[d]));else b[c]=f[c],0<=e.indexOf(c)&&da.push(c);b.scene=a}for(c in v)if(v.hasOwnProperty(c))if("strings"== +c)for(d in v.strings)v.strings.hasOwnProperty(d)&&(b.strings[d]=D(v.strings[d]));else b[c]=v[c],0<=e.indexOf(c)&&da.push(c)}function t(a){if((a=a?a:!1)&&"preview"in b){var c=b.preview;b.basePath&&!oa(c)&&(c=b.basePath+c);qa=f.createElement("div");qa.className="pnlm-preview-img";qa.style.backgroundImage="url('"+encodeURI(c)+"')";M.appendChild(qa)}var c=b.title,d=b.author;a&&("previewTitle"in b&&(b.title=b.previewTitle),"previewAuthor"in b&&(b.author=b.previewAuthor));b.hasOwnProperty("title")||(n.title.innerHTML= +"");b.hasOwnProperty("author")||(n.author.innerHTML="");b.hasOwnProperty("title")||b.hasOwnProperty("author")||(n.container.style.display="none");w.load.innerHTML="

"+b.strings.loadButtonLabel+"

";n.load.boxp.innerHTML=b.strings.loadingLabel;for(var e in b)if(b.hasOwnProperty(e))switch(e){case "title":n.title.innerHTML=D(b[e]);n.container.style.display="inline";break;case "author":n.author.innerHTML=b.strings.bylineLabel.replace("%s",D(b[e]));n.container.style.display="inline";break;case "fallback":n.errorMsg.innerHTML= +'

Your browser does not support WebGL.
Click here to view this panorama in an alternative viewer.

';break;case "hfov":U(Number(b[e]));break;case "autoLoad":!0===b[e]&&B===m&&(n.load.box.style.display="inline",w.load.style.display="none",Na());break;case "showZoomCtrl":w.zoom.style.display=b[e]&&!1!=b.showControls?"block":"none";break;case "showFullscreenCtrl":w.fullscreen.style.display=b[e]&&!1!=b.showControls&&("fullscreen"in f||"mozFullScreen"in +f||"webkitIsFullScreen"in f||"msFullscreenElement"in f)?"block":"none";break;case "hotSpotDebug":Xa.style.display=b[e]?"block":"none";break;case "showControls":b[e]||(w.orientation.style.display="none",w.zoom.style.display="none",w.fullscreen.style.display="none");break;case "orientationOnByDefault":b[e]&&(pa===m?Ya=!0:!0===pa&&Ka())}a&&(c?b.title=c:delete b.title,d?b.author=d:delete b.author)}function z(){if(K&&!Pa)if(Ga)f.exitFullscreen?f.exitFullscreen():f.mozCancelFullScreen?f.mozCancelFullScreen(): +f.webkitCancelFullScreen?f.webkitCancelFullScreen():f.msExitFullscreen&&f.msExitFullscreen();else try{r.requestFullscreen?r.requestFullscreen():r.mozRequestFullScreen?r.mozRequestFullScreen():r.msRequestFullscreen?r.msRequestFullscreen():r.webkitRequestFullScreen()}catch(a){}}function y(){f.fullscreen||f.mozFullScreen||f.webkitIsFullScreen||f.msFullscreenElement?(w.fullscreen.classList.add("pnlm-fullscreen-toggle-button-active"),Ga=!0):(w.fullscreen.classList.remove("pnlm-fullscreen-toggle-button-active"), +Ga=!1);B.resize();U(b.hfov);F()}function E(a){var c=b.minHfov;"multires"==b.type&&B&&(c=Math.min(c,B.getCanvas().width/(b.multiRes.cubeResolution/90*0.9)));return c>b.maxHfov?(console.log("HFOV bounds do not make sense (minHfov > maxHfov)."),b.hfov):ab.maxHfov?b.maxHfov:a}function U(a){b.hfov=E(a)}function Ja(){L={};$=b.autoRotate?b.autoRotate:$;b.autoRotate=!1}function Q(){Pa&&(n.load.box.style.display="none",n.errorMsg.style.display="none",Pa=!1,ga("errorcleared"));K=!1;w.load.style.display= +"none";n.load.box.style.display="inline";Na()}function I(a,c,d,e,f){K=!1;L={};var h,l;if(b.sceneFadeDuration&&!f&&(h=B.render(b.pitch*Math.PI/180,b.yaw*Math.PI/180,b.hfov*Math.PI/180,{returnImage:!0}),h!==m)){f=new Image;f.className="pnlm-fade-img";f.style.transition="opacity "+b.sceneFadeDuration/1E3+"s";f.style.width="100%";f.style.height="100%";f.onload=function(){I(a,c,d,e,!0)};f.src=h;M.appendChild(f);B.fadeImg=f;return}f="same"===c?b.pitch:c;h="same"===d?b.yaw:"sameAzimuth"===d?b.yaw+(b.northOffset|| +0)-(v.scenes[a].northOffset||0):d;l="same"===e?b.hfov:e;p();g(a);x.yaw=x.pitch=x.hfov=0;t();f!==m&&(b.pitch=f);h!==m&&(b.yaw=h);l!==m&&(b.hfov=l);ga("scenechange",a);Q()}function l(){J.removeEventListener("deviceorientation",Ma);w.orientation.classList.remove("pnlm-orientation-button-active");aa=!1}function Ka(){aa=1;J.addEventListener("deviceorientation",Ma);w.orientation.classList.add("pnlm-orientation-button-active")}function D(a){return v.escapeHTML?String(a).split(/&/g).join("&").split('"').join(""").split("'").join("'").split("<").join("<").split(">").join(">").split("/").join("/").split("\n").join("
"): +String(a).split("\n").join("
")}function ga(a){if(a in T)for(var b=T[a].length;0a?2*a*a:-1+(4-2*a)*a},draggable:!0,disableKeyboardCtrl:!1,crossOrigin:"anonymous",strings:{loadButtonLabel:"Click to
Load
Panorama",loadingLabel:"Loading...",bylineLabel:"by %s",noPanoramaError:"No panorama image was specified.", +fileAccessError:"The file %s could not be accessed.",malformedURLError:"There is something wrong with the panorama URL.",iOS8WebGLError:"Due to iOS 8's broken WebGL implementation, only progressive encoded JPEGs work for your device (this panorama uses standard encoding).",genericWebGLError:"Your browser does not have the necessary WebGL support to display this panorama.",textureSizeError:"This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)", +unknownError:"Unknown error. Check developer console."}},Za=[16,17,27,37,38,39,40,61,65,68,83,87,107,109,173,187,189];r="string"===typeof r?f.getElementById(r):r;r.classList.add("pnlm-container");r.tabIndex=0;var C=f.createElement("div");C.className="pnlm-ui";r.appendChild(C);var M=f.createElement("div");M.className="pnlm-render-container";r.appendChild(M);var H=f.createElement("div");H.className="pnlm-dragfix";C.appendChild(H);var ha=f.createElement("span");ha.className="pnlm-about-msg";ha.innerHTML= +'Pannellum 2.4.1';C.appendChild(ha);H.addEventListener("contextmenu",X);var n={},Xa=f.createElement("div");Xa.className="pnlm-sprite pnlm-hot-spot-debug-indicator";C.appendChild(Xa);n.container=f.createElement("div");n.container.className="pnlm-panorama-info";n.title=f.createElement("div");n.title.className="pnlm-title-box";n.container.appendChild(n.title);n.author=f.createElement("div");n.author.className="pnlm-author-box";n.container.appendChild(n.author); +C.appendChild(n.container);n.load={};n.load.box=f.createElement("div");n.load.box.className="pnlm-load-box";n.load.boxp=f.createElement("p");n.load.box.appendChild(n.load.boxp);n.load.lbox=f.createElement("div");n.load.lbox.className="pnlm-lbox";n.load.lbox.innerHTML='
';n.load.box.appendChild(n.load.lbox);n.load.lbar=f.createElement("div");n.load.lbar.className="pnlm-lbar";n.load.lbarFill=f.createElement("div");n.load.lbarFill.className="pnlm-lbar-fill";n.load.lbar.appendChild(n.load.lbarFill); +n.load.box.appendChild(n.load.lbar);n.load.msg=f.createElement("p");n.load.msg.className="pnlm-lmsg";n.load.box.appendChild(n.load.msg);C.appendChild(n.load.box);n.errorMsg=f.createElement("div");n.errorMsg.className="pnlm-error-msg pnlm-info-box";C.appendChild(n.errorMsg);var w={};w.container=f.createElement("div");w.container.className="pnlm-controls-container";C.appendChild(w.container);w.load=f.createElement("div");w.load.className="pnlm-load-button";w.load.addEventListener("click",function(){t(); +Q()});C.appendChild(w.load);w.zoom=f.createElement("div");w.zoom.className="pnlm-zoom-controls pnlm-controls";w.zoomIn=f.createElement("div");w.zoomIn.className="pnlm-zoom-in pnlm-sprite pnlm-control";w.zoomIn.addEventListener("click",function(){K&&(U(b.hfov-5),F())});w.zoom.appendChild(w.zoomIn);w.zoomOut=f.createElement("div");w.zoomOut.className="pnlm-zoom-out pnlm-sprite pnlm-control";w.zoomOut.addEventListener("click",function(){K&&(U(b.hfov+5),F())});w.zoom.appendChild(w.zoomOut);w.container.appendChild(w.zoom); +w.fullscreen=f.createElement("div");w.fullscreen.addEventListener("click",z);w.fullscreen.className="pnlm-fullscreen-toggle-button pnlm-sprite pnlm-fullscreen-toggle-button-inactive pnlm-controls pnlm-control";(f.fullscreenEnabled||f.mozFullScreenEnabled||f.webkitFullscreenEnabled||f.msFullscreenEnabled)&&w.container.appendChild(w.fullscreen);w.orientation=f.createElement("div");w.orientation.addEventListener("click",function(a){aa?l():Ka()});w.orientation.addEventListener("mousedown",function(a){a.stopPropagation()}); +w.orientation.addEventListener("touchstart",function(a){a.stopPropagation()});w.orientation.addEventListener("pointerdown",function(a){a.stopPropagation()});w.orientation.className="pnlm-orientation-button pnlm-orientation-button-inactive pnlm-sprite pnlm-controls pnlm-control";var pa,Ya=!1;J.DeviceOrientationEvent?J.addEventListener("deviceorientation",Oa):pa=!1;var Ha=f.createElement("div");Ha.className="pnlm-compass pnlm-controls pnlm-control";C.appendChild(Ha);v.firstScene?g(v.firstScene):v.default&& +v.default.firstScene?g(v.default.firstScene):g(null);t(!0);var ma=[],Aa=[];Z.prototype.multiply=function(a){return new Z(this.w*a.w-this.x*a.x-this.y*a.y-this.z*a.z,this.x*a.w+this.w*a.x+this.y*a.z-this.z*a.y,this.y*a.w+this.w*a.y+this.z*a.x-this.x*a.z,this.z*a.w+this.w*a.z+this.x*a.y-this.y*a.x)};Z.prototype.toEulerAngles=function(){var a=Math.atan2(2*(this.w*this.x+this.y*this.z),1-2*(this.x*this.x+this.y*this.y)),b=Math.asin(2*(this.w*this.y-this.z*this.x)),c=Math.atan2(2*(this.w*this.z+this.x* +this.y),1-2*(this.y*this.y+this.z*this.z));return[a,b,c]};this.isLoaded=function(){return Boolean(K)};this.getPitch=function(){return b.pitch};this.setPitch=function(a,c,d,e){(c=c==m?1E3:Number(c))?L.pitch={startTime:Date.now(),startPosition:b.pitch,endPosition:a,duration:c,callback:d,callbackArgs:e}:b.pitch=a;F();return this};this.getPitchBounds=function(){return[b.minPitch,b.maxPitch]};this.setPitchBounds=function(a){b.minPitch=Math.max(-90,Math.min(a[0],90));b.maxPitch=Math.max(-90,Math.min(a[1], +90));return this};this.getYaw=function(){return b.yaw};this.setYaw=function(a,c,d,e){c=c==m?1E3:Number(c);a=(a+180)%360-180;c?(180 maxPages) return; var id = tile.id + ',' + String(nextPage); if (cache.loaded[id] || cache.inflight[id]) return; - //console.log("get nextURL: ", nextURL); + ////console.log("get nextURL: ", nextURL); cache.inflight[id] = d3_request(nextURL) .mimeType('application/json') .response(function (xhr) { @@ -229,14 +248,14 @@ function loadNextTilePage(which, currZoom, url, tile) { cache.nextURL[tile.id] = pagination.next; } } - //console.log(" reponse from nextURL:",xhr.responseText); + ////console.log(" reponse from nextURL:",xhr.responseText); return JSON.parse(xhr.responseText); }) .get(function (err, data) { cache.loaded[id] = true; delete cache.inflight[id]; if (err || !data.features || !data.features.length) return; - // console.log("features returned by mapillary: ", data.features); + // //console.log("features returned by mapillary: ", data.features); var features = data.features.map(function (feature) { var loc = feature.geometry.coordinates, d; @@ -253,7 +272,7 @@ function loadNextTilePage(which, currZoom, url, tile) { cache.forImageKey[d.key] = d; // cache imageKey -> image } else if (which === 'sequences') { - // console.log("sequence", feature); + // //console.log("sequence", feature); var sequenceKey = feature.properties.key; cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString feature.properties.coordinateProperties.image_keys.forEach(function (imageKey) { @@ -288,7 +307,7 @@ function loadNextTilePage(which, currZoom, url, tile) { }; }).filter(Boolean); - //console.log("mapillary features: ", features); + ////console.log("mapillary features: ", features); cache.rtree.load(features); if (which === 'images' || which === 'sequences') { @@ -303,7 +322,7 @@ function loadNextTilePage(which, currZoom, url, tile) { } else { cache.nextPage[tile.id] = Infinity; // no more pages to load } - // console.log("_mlyCache: ", _mlyCache); + // //console.log("_mlyCache: ", _mlyCache); }); break; } @@ -312,6 +331,7 @@ function loadNextTilePage(which, currZoom, url, tile) { // call the bubble api and get the json data // for the tile extent function getBubbles(url, tile, callback) { + //console.log('services - streetside - getBubbles()'); var rect = tile.extent.rectangle() jsonpRequest(url + utilQsString({ n: rect[3], @@ -371,6 +391,7 @@ function partitionViewport(psize, projection) { // no more than `limit` results per partition. function searchLimited(psize, limit, projection, rtree) { + //console.log('services - streetside - searchLimited()'); limit = limit || 3; var partitions = partitionViewport(psize, projection); @@ -443,6 +464,12 @@ export default { _mlyClicks = []; }, + //called by update() in svg - services.js + bubbles: function (projection) { + //console.log('services - streetside - bubbles()'); + var psize = 32, limit = 3; + return searchLimited(psize, limit, projection, _mlyCache.bubbles.rtree); + }, images: function (projection) { var psize = 16, limit = 3; @@ -478,12 +505,6 @@ export default { }); }, - - bubbles: function (projection) { - var psize = 32, limit = 3; - return searchLimited(psize, limit, projection, _mlyCache.bubbles.rtree); - }, - signsSupported: function () { var detected = utilDetect(); if (detected.ie) return false; @@ -510,31 +531,32 @@ export default { // this is called a bunch of times repeatedly loadImages: function (projection) { - // console.log("loadImages called..."); + //console.log('services - streetside - loadImages()'); loadTiles('bubbles', msapi + 'GetBubbles.ashx?', projection); - loadTiles('images', apibase + 'images?', projection); - loadTiles('sequences', apibase + 'sequences?', projection); + //loadTiles('images', apibase + 'images?', projection); + //loadTiles('sequences', apibase + 'sequences?', projection); }, - loadSigns: function (context, projection) { - // if we are looking at signs, we'll actually need to fetch images too - loadTiles('images', apibase + 'images?', projection); - loadTiles('objects', apibase + 'objects?', projection); + // loadSigns: function (context, projection) { + // // if we are looking at signs, we'll actually need to fetch images too + // loadTiles('images', apibase + 'images?', projection); + // loadTiles('objects', apibase + 'objects?', projection); - // load traffic sign defs - if (!_mlySignDefs) { - _mlySignSprite = context.asset('img/traffic-signs/traffic-signs.png'); - _mlySignDefs = {}; - d3_json(context.asset('img/traffic-signs/traffic-signs.json'), function (err, data) { - if (err) return; - _mlySignDefs = data; - }); - } - }, + // // load traffic sign defs + // if (!_mlySignDefs) { + // _mlySignSprite = context.asset('img/traffic-signs/traffic-signs.png'); + // _mlySignDefs = {}; + // d3_json(context.asset('img/traffic-signs/traffic-signs.json'), function (err, data) { + // if (err) return; + // _mlySignDefs = data; + // }); + // } + // }, // create the streeside viewer loadViewer: function (context) { + //console.log('services - streetside - loadViewer()'); // create ms-wrapper a photo wrapper class var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper') .data([0]); @@ -547,31 +569,44 @@ export default { .attr('class', 'photo-wrapper ms-wrapper') .classed('hide', true); + // inject div to support streetside viewer (pannellum) + wrapEnter + .append('div') + .attr('id','viewer-streetside'); + //.attr('class','photo-viewer-streetside'); + // inject div to support photo attribution into ms-wrapper wrapEnter .append('div') .attr('class', 'photo-attribution-streetside fillD'); - - // load streetside viewer css - d3_select('head').selectAll('#streetside-viewercss') - .data([0]) - .enter() - .append('link') - .attr('id', 'streetside-viewercss') - .attr('rel', 'stylesheet') - .attr('href', context.asset(viewercss)); - // load streetside viewer js + // // inject child div for the pannellum viewer + // var wrap2 = d3_select('#viewer-streetside-wrapper').selectAll('#streetside-viewer').data([0]); + // wrap2.enter() + // .append('div') + // .attr('id','viewer-streetside'); + + // load streetside pannellum viewer css + d3_select('head').selectAll('#streetside-viewercss') + .data([0]) + .enter() + .append('link') + .attr('id', 'streetside-viewercss') + .attr('rel', 'stylesheet') + .attr('href', context.asset(streetsideViewerCss)); + + // load streetside pannellum viewer js d3_select('head').selectAll('#streetside-viewerjs') .data([0]) .enter() .append('script') .attr('id', 'streetside-viewerjs') - .attr('src', context.asset(viewerjs)); + .attr('src', context.asset(streetsideViewer)); }, showViewer: function () { + //console.log('services - streetside - showViewer()'); var wrap = d3_select('#photoviewer') .classed('hide', false); @@ -703,6 +738,9 @@ export default { // This allows images to be selected from places that dont have access // to the full image datum (like the street signs layer or the js viewer) selectImage: function (d, imageKey, fromViewer) { + //console.log('services - streetside - selectIamge(); d = ',d); + //console.log('services - streetside - selectIamge(); imageKey = ',imageKey); + //console.log('services - streetside - selectIamge(); fromViewer = ',fromViewer); if (!d && imageKey) { // If the user clicked on something that's not an image marker, we // might get in here.. Cache lookup can fail, e.g. if the user @@ -756,9 +794,32 @@ export default { '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17') .text('Report a privacy concern with this image'); - this.updateDetections(d); + //this.updateDetections(d); + + var bubbleIdQuadKey = d.key.toString(4); + var paddingNeeded = 16 - bubbleIdQuadKey.length; + for (var i = 0; i < paddingNeeded ;i++) + { + bubbleIdQuadKey = "0" + bubbleIdQuadKey; + } + var imgLocIdxArr = ['01','02','03','10','11','12']; //Order matters here: front=01, right=02, back=03, left=10 up=11,= down=12 + var imgUrlPrefix = bubbleapi + 'hs' + bubbleIdQuadKey; + var imgUrlSuffix = '.jpg?g=6338&n=z'; + pannellum.viewer('viewer-streetside', { + "type": "cubemap", + "cubeMap": [ + imgUrlPrefix + imgLocIdxArr[0] + imgUrlSuffix, + imgUrlPrefix + imgLocIdxArr[1] + imgUrlSuffix, + imgUrlPrefix + imgLocIdxArr[2] + imgUrlSuffix, + imgUrlPrefix + imgLocIdxArr[3] + imgUrlSuffix, + imgUrlPrefix + imgLocIdxArr[4] + imgUrlSuffix, + imgUrlPrefix + imgLocIdxArr[5] + imgUrlSuffix + ], + "showFullscreenCtrl": false, + "autoLoad": true + }); } - console.log("clicked a streetside image: ", d); + ////console.log("clicked a streetside image: ", d); return this; }, diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 3bfae6409e..728f0789d5 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -34,6 +34,7 @@ export function svgStreetside(projection, context, dispatch) { function showLayer() { + console.log('svg - streetside - showLayer()'); var service = getService(); if (!service) return; @@ -77,7 +78,7 @@ export function svgStreetside(projection, context, dispatch) { function click(d) { - // console.log("svg: map was clicked with streetside on, here is the passed object: ", d); + console.log("svg: map was clicked with streetside on, here is the passed object: ", d); var service = getService(); if (!service) return; @@ -112,7 +113,7 @@ export function svgStreetside(projection, context, dispatch) { function update() { - // console.log("svg: update called...."); + console.log("svg - streetside - update()"); var viewer = d3_select('#photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); @@ -203,12 +204,13 @@ export function svgStreetside(projection, context, dispatch) { } } - + //drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called. + //'svgStreetside()' is called from index.js (ln) function drawImages(selection) { - // console.log("svg: drawImages called ...."); + //console.log("svg - streetside - drawImages(); selection: ", selection); var enabled = svgStreetside.enabled, service = getService(); - + //console.log("svg - streetside - drawImages(); svgStreetside enabled? ", enabled); layer = selection.selectAll('.layer-streetside-images') .data(service ? [0] : []); @@ -245,6 +247,7 @@ export function svgStreetside(projection, context, dispatch) { drawImages.enabled = function(_) { + //console.log('svg - streetside - drawImages.enabled()'); if (!arguments.length) return svgStreetside.enabled; svgStreetside.enabled = _; if (svgStreetside.enabled) { diff --git a/package.json b/package.json index a819e512d9..b6db64bf1a 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "clean": "shx rm -f dist/*.js dist/*.map dist/*.css dist/img/*.svg", "dist": "npm-run-all -p dist:**", "dist:mapillary": "shx mkdir -p dist/mapillary-js && shx cp -R node_modules/mapillary-js/dist/* dist/mapillary-js/", + "dist:pannellum": "shx mkdir -p dist/pannellum-streetside && shx cp -R node_modules/pannellum/build/* dist/pannellum-streetside/", "dist:min": "uglifyjs dist/iD.js -c warnings=false -m -o dist/iD.min.js", "dist:svg:maki": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/maki-sprite.svg node_modules/@mapbox/maki/icons/*.svg", "dist:svg:id": "node svg/spriteify.js --svg svg/iD-sprite.src.svg --json svg/iD-sprite.json > dist/img/iD-sprite.svg", @@ -36,7 +37,8 @@ "node-diff3": "1.0.0", "osm-auth": "1.0.2", "rbush": "2.0.2", - "wmf-sitematrix": "0.1.4" + "wmf-sitematrix": "0.1.4", + "pannellum": "2.4.1" }, "devDependencies": { "@mapbox/maki": "^4.0.0", From 59260913413d17ffd0f042cc0be0b046c6006864 Mon Sep 17 00:00:00 2001 From: LorenMueller Date: Tue, 15 May 2018 15:18:40 -0700 Subject: [PATCH 5/7] Feature updates --- modules/services/streetside.js | 799 +++++++++++++++++++-------------- modules/svg/streetside.js | 17 +- package.json | 3 +- 3 files changed, 466 insertions(+), 353 deletions(-) diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 10b5a5f398..2cdff25a0c 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -23,14 +23,14 @@ import { import rbush from 'rbush'; +import Q from 'q'; + import { jsonpRequest } from '../util/jsonp_request'; import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; import { geoExtent } from '../geo'; import { utilDetect } from '../util/detect'; import { utilQsString, utilRebind } from '../util'; -//import _pannellum from 'pannellum'; - var apibase = 'https://a.mapillary.com/v3/', msapi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/', bubbleapi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/', @@ -42,7 +42,8 @@ var apibase = 'https://a.mapillary.com/v3/', clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi', maxResults = 1000, tileZoom = 14, - dispatch = d3_dispatch('loadedImages', 'loadedSigns'), + //dispatch = d3_dispatch('loadedImages', 'loadedSigns'), + dispatch = d3_dispatch('loadedBubbles'), _mlyFallback = false, _mlyCache, _mlyClicks, @@ -102,7 +103,10 @@ function getTiles(projection) { origin = [ s / 2 - projection.translate()[0], s / 2 - projection.translate()[1]]; - + console.log('s = ', s); + console.log('z = ', z); + console.log('ts = ', ts); + console.log('origin = ', origin); return d3_geoTile() .scaleExtent([tileZoom, tileZoom]) .scale(s) @@ -129,9 +133,14 @@ function loadTiles(which, url, projection) { ////console.log("loading tiles from streetside service..."); var s = projection.scale() * 2 * Math.PI, currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0)); - ////console.log(" var projection = ", projection); - ////console.log(" var s = ", s); - + //console.log("var projection = ", projection); + //console.log("var projection.scale() = ", projection.scale()); + //console.log("var s = ", s); + //console.log("var currZoom = ", currZoom); + var geoExt = new geoExtent(projection.invert([0, 1]), + projection.invert([1, 0])); + console.log("map.extent() = ", geoExt); + // breakup the map view into tiles var tiles = getTiles(projection).filter(function (t) { return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]); @@ -147,206 +156,306 @@ function loadTiles(which, url, projection) { }).map(abortRequest); tiles.forEach(function (tile) { - ////console.log(" tile to load = ", tile); + console.log(" tile to load = ", tile); // //console.log(" tile extent to load = ", tile.extent[0][1] + ',' + tile.extent[0][0] + ',' + tile.extent[1][1] + ',' + tile.extent[1][0]); // //console.log(" tile extent to load (MS): n=", tile.extent[1][1] + '&s=' + tile.extent[0][1] + '&e=' + tile.extent[1][0] + '&w=' + tile.extent[0][0]); - loadNextTilePage(which, currZoom, url, tile); + loadNextTilePage(which, currZoom, url, tile); }); } // load data for the next tile page in line function loadNextTilePage(which, currZoom, url, tile) { - console.log('services - streetside - loadNextTilePage() which: ', which); - //console.log('services - streetside - loadNextTilePage() currZoom: ', currZoom); - //console.log('services - streetside - loadNextTilePage() url: ', url); - console.log('services - streetside - loadNextTilePage() tile: ', tile); + console.log('loadNextTilePage() which: ', which); + console.log('currZoom: ', currZoom); + console.log('url: ', url); + console.log('tile: ', tile); var cache = _mlyCache[which], - rect = tile.extent.rectangle(), maxPages = maxPageAtZoom(currZoom), nextPage = cache.nextPage[tile.id] || 0; - console.log('maxPages = ', maxPages); - console.log('cache.nextPage[tile.id] - ', cache.nextPage[tile.id]); - console.log('nextPage = ', nextPage); - switch (which) { - case 'bubbles': - //console.log('services - streetside - loadNextTilePage() nextPage > maxPages?: ', nextPage > maxPages); - - if (nextPage > maxPages) return; - - - var id = tile.id + ',' + String(nextPage); - //console.log('services - streetside - loadNextTilePage() cache.loaded[id]: ', cache.loaded[id]); - //console.log('services - streetside - loadNextTilePage() cache.inflight[id]: ', cache.inflight[id]); - if (cache.loaded[id] || cache.inflight[id]) return; - - cache.inflight[id] = true; - getBubbles(url, tile, function (bubbles) { - cache.loaded[id] = true; - delete cache.inflight[id]; - //console.log("bubbles: ", bubbles); - if (!bubbles) return; - // remove first element, statistic info on request, not a bubble - bubbles.shift(); - var features = bubbles.map(function (bubble) { - //console.log("bubble: ", bubble); - var loc = [bubble.lo, bubble.la]; - var d = { - loc: loc, - key: bubble.id, - ca: bubble.he, - captured_at: bubble.cd, - captured_by: "microsoft", - nbn: bubble.nbn, - pbn: bubble.pbn, - rn: bubble.rn, - pano: true - }; - var feature = { - geometry: { - coordinates: [bubble.lo, bubble.la], - type: "Point" - }, - properties: d, - type: "Feature" - }; - var bubbleId = bubble.id; - cache.points[bubbleId] = feature; - cache.forImageKey[bubbleId] = bubbleId; - // return false; // because no `d` data worth loading into an rbush - //console.log('End of GetBubbles success handling: cache = ', cache); - return { - minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d - }; - - }).filter(Boolean); - // //console.log("bubble features: ", features); - cache.rtree.load(features); + + var id = tile.id + ',' + String(nextPage); + + console.log('id = ', id); + console.log('cache.loaded[id]: ', cache.loaded[id]); + console.log('cache.inflight[id]: ', cache.inflight[id]); + + if (cache.loaded[id] || cache.inflight[id]) return; + + cache.inflight[id] = getBubbles(url, tile, function(bubbles){ + console.log("GET Response - bubbles: ", bubbles); + cache.loaded[id] = true; + delete cache.inflight[id]; + if (!bubbles) return; + // remove first element, statistic info on request, not a bubble + bubbles.shift(); + var features = bubbles.map(function (bubble) { + //console.log("bubble: ", bubble); + var loc = [bubble.lo, bubble.la]; + var d = { + loc: loc, + key: bubble.id, + ca: bubble.he, + captured_at: bubble.cd, + captured_by: "microsoft", + nbn: bubble.nbn, + pbn: bubble.pbn, + rn: bubble.rn, + pano: true + }; + var feature = { + geometry: { + coordinates: [bubble.lo, bubble.la], + type: "Point" + }, + properties: d, + type: "Feature" + }; + var bubbleId = bubble.id; + cache.points[bubbleId] = feature; + cache.forImageKey[bubbleId] = bubbleId; + // return false; // because no `d` data worth loading into an rbush + //console.log('End of GetBubbles success handling: cache = ', cache); + return { + minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + }; + + }).filter(Boolean); + // //console.log("bubble features: ", features); + cache.rtree.load(features); + + console.log('bubbles.length', bubbles.length); + console.log('cache.nextPage[tile.id]', cache.nextPage[tile.id]); + + if (which === 'bubbles'){ + dispatch.call('loadedBubbles'); + } + // if (bubbles.length === maxResults) { // more pages to load + // cache.nextPage[tile.id] = nextPage + 1; + // loadNextTilePage(which, currZoom, url, tile); + // } else { + // cache.nextPage[tile.id] = Infinity; // no more pages to load + // } + }); + + //console.log('maxPages = ', maxPages); + //console.log('cache.nextPage[tile.id] - ', cache.nextPage[tile.id]); + //console.log('nextPage = ', nextPage); + + // bubbleCalls.push(getBubbles(url, tile, function (bubbles) { + // console.log("got the bubbles: ", bubbles); + // })); + + // bubbleCalls.push(getBubbles(url, tile)); + + // var doAll = Q.all(bubbleCalls); + // doAll.then(function () { + // console.log('success'); + // }).catch(function (ex) { + // console.log('error'); + // }); + + + // switch (which) { + // case 'bubbles': + // //console.log('services - streetside - loadNextTilePage() nextPage > maxPages?: ', nextPage > maxPages); - }); - break; - default: - var nextURL = cache.nextURL[tile.id] || url + - utilQsString({ - per_page: maxResults, - page: nextPage, - client_id: clientId, - bbox: [rect[0], rect[1], rect[2], rect[3]].join(','), - }); - ////console.log("cache for loadNextTilePage: ", cache); - if (nextPage > maxPages) return; - - var id = tile.id + ',' + String(nextPage); - if (cache.loaded[id] || cache.inflight[id]) return; - ////console.log("get nextURL: ", nextURL); - cache.inflight[id] = d3_request(nextURL) - .mimeType('application/json') - .response(function (xhr) { - var linkHeader = xhr.getResponseHeader('Link'); - if (linkHeader) { - var pagination = parsePagination(xhr.getResponseHeader('Link')); - if (pagination.next) { - cache.nextURL[tile.id] = pagination.next; - } - } - ////console.log(" reponse from nextURL:",xhr.responseText); - return JSON.parse(xhr.responseText); - }) - .get(function (err, data) { - cache.loaded[id] = true; - delete cache.inflight[id]; - if (err || !data.features || !data.features.length) return; - // //console.log("features returned by mapillary: ", data.features); - var features = data.features.map(function (feature) { - var loc = feature.geometry.coordinates, - d; - - if (which === 'images') { - d = { - loc: loc, - key: feature.properties.key, - ca: feature.properties.ca, - captured_at: feature.properties.captured_at, - captured_by: feature.properties.username, - pano: feature.properties.pano - }; - cache.forImageKey[d.key] = d; // cache imageKey -> image - - } else if (which === 'sequences') { - // //console.log("sequence", feature); - var sequenceKey = feature.properties.key; - cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString - feature.properties.coordinateProperties.image_keys.forEach(function (imageKey) { - cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey - }); - return false; // because no `d` data worth loading into an rbush - - } else if (which === 'objects') { - d = { - loc: loc, - key: feature.properties.key, - value: feature.properties.value, - package: feature.properties.package, - detections: feature.properties.detections - }; - - // cache imageKey -> detectionKey - feature.properties.detections.forEach(function (detection) { - var imageKey = detection.image_key; - var detectionKey = detection.detection_key; - if (!_mlyCache.detections[imageKey]) { - _mlyCache.detections[imageKey] = {}; - } - if (!_mlyCache.detections[imageKey][detectionKey]) { - _mlyCache.detections[imageKey][detectionKey] = {}; - } - }); - } - - return { - minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d - }; - - }).filter(Boolean); - ////console.log("mapillary features: ", features); - cache.rtree.load(features); - - if (which === 'images' || which === 'sequences') { - dispatch.call('loadedImages'); - } else if (which === 'objects') { - dispatch.call('loadedSigns'); - } - - if (data.features.length === maxResults) { // more pages to load - cache.nextPage[tile.id] = nextPage + 1; - loadNextTilePage(which, currZoom, url, tile); - } else { - cache.nextPage[tile.id] = Infinity; // no more pages to load - } - // //console.log("_mlyCache: ", _mlyCache); - }); - break; - } + // if (nextPage > maxPages) return; + + + // var id = tile.id + ',' + String(nextPage); + // //console.log('services - streetside - loadNextTilePage() cache.loaded[id]: ', cache.loaded[id]); + // //console.log('services - streetside - loadNextTilePage() cache.inflight[id]: ', cache.inflight[id]); + // if (cache.loaded[id] || cache.inflight[id]) return; + + // cache.inflight[id] = true; + // getBubbles(url, tile, function (bubbles) { + // cache.loaded[id] = true; + // delete cache.inflight[id]; + // //console.log("bubbles: ", bubbles); + // if (!bubbles) return; + // // remove first element, statistic info on request, not a bubble + // bubbles.shift(); + // var features = bubbles.map(function (bubble) { + // //console.log("bubble: ", bubble); + // var loc = [bubble.lo, bubble.la]; + // var d = { + // loc: loc, + // key: bubble.id, + // ca: bubble.he, + // captured_at: bubble.cd, + // captured_by: "microsoft", + // nbn: bubble.nbn, + // pbn: bubble.pbn, + // rn: bubble.rn, + // pano: true + // }; + // var feature = { + // geometry: { + // coordinates: [bubble.lo, bubble.la], + // type: "Point" + // }, + // properties: d, + // type: "Feature" + // }; + // var bubbleId = bubble.id; + // cache.points[bubbleId] = feature; + // cache.forImageKey[bubbleId] = bubbleId; + // // return false; // because no `d` data worth loading into an rbush + // //console.log('End of GetBubbles success handling: cache = ', cache); + // return { + // minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + // }; + + // }).filter(Boolean); + // // //console.log("bubble features: ", features); + // cache.rtree.load(features); + + // }); + // break; + // default: + // var nextURL = cache.nextURL[tile.id] || url + + // utilQsString({ + // per_page: maxResults, + // page: nextPage, + // client_id: clientId, + // bbox: [rect[0], rect[1], rect[2], rect[3]].join(','), + // }); + // ////console.log("cache for loadNextTilePage: ", cache); + // if (nextPage > maxPages) return; + + // var id = tile.id + ',' + String(nextPage); + // if (cache.loaded[id] || cache.inflight[id]) return; + // ////console.log("get nextURL: ", nextURL); + // cache.inflight[id] = d3_request(nextURL) + // .mimeType('application/json') + // .response(function (xhr) { + // var linkHeader = xhr.getResponseHeader('Link'); + // if (linkHeader) { + // var pagination = parsePagination(xhr.getResponseHeader('Link')); + // if (pagination.next) { + // cache.nextURL[tile.id] = pagination.next; + // } + // } + // ////console.log(" reponse from nextURL:",xhr.responseText); + // return JSON.parse(xhr.responseText); + // }) + // .get(function (err, data) { + // cache.loaded[id] = true; + // delete cache.inflight[id]; + // if (err || !data.features || !data.features.length) return; + // // //console.log("features returned by mapillary: ", data.features); + // var features = data.features.map(function (feature) { + // var loc = feature.geometry.coordinates, + // d; + + // if (which === 'images') { + // d = { + // loc: loc, + // key: feature.properties.key, + // ca: feature.properties.ca, + // captured_at: feature.properties.captured_at, + // captured_by: feature.properties.username, + // pano: feature.properties.pano + // }; + // cache.forImageKey[d.key] = d; // cache imageKey -> image + + // } else if (which === 'sequences') { + // // //console.log("sequence", feature); + // var sequenceKey = feature.properties.key; + // cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString + // feature.properties.coordinateProperties.image_keys.forEach(function (imageKey) { + // cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey + // }); + // return false; // because no `d` data worth loading into an rbush + + // } else if (which === 'objects') { + // d = { + // loc: loc, + // key: feature.properties.key, + // value: feature.properties.value, + // package: feature.properties.package, + // detections: feature.properties.detections + // }; + + // // cache imageKey -> detectionKey + // feature.properties.detections.forEach(function (detection) { + // var imageKey = detection.image_key; + // var detectionKey = detection.detection_key; + // if (!_mlyCache.detections[imageKey]) { + // _mlyCache.detections[imageKey] = {}; + // } + // if (!_mlyCache.detections[imageKey][detectionKey]) { + // _mlyCache.detections[imageKey][detectionKey] = {}; + // } + // }); + // } + + // return { + // minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + // }; + + // }).filter(Boolean); + // ////console.log("mapillary features: ", features); + // cache.rtree.load(features); + + // if (which === 'images' || which === 'sequences') { + // dispatch.call('loadedImages'); + // } else if (which === 'objects') { + // dispatch.call('loadedSigns'); + // } + + // if (data.features.length === maxResults) { // more pages to load + // cache.nextPage[tile.id] = nextPage + 1; + // loadNextTilePage(which, currZoom, url, tile); + // } else { + // cache.nextPage[tile.id] = Infinity; // no more pages to load + // } + // // //console.log("_mlyCache: ", _mlyCache); + // }); + // break; + // } } // call the bubble api and get the json data // for the tile extent +// function getBubbles2(url, tile) { +// console.log('services - streetside - getBubbles()'); +// var deferred = Q.defer(); +// var rect = tile.extent.rectangle() +// var urlForRequest = url + utilQsString({ +// n: rect[3], +// s: rect[1], +// e: rect[2], +// w: rect[0], +// appkey: appkey +// }); +// return deferred.promise; +// } + function getBubbles(url, tile, callback) { - //console.log('services - streetside - getBubbles()'); - var rect = tile.extent.rectangle() - jsonpRequest(url + utilQsString({ + console.log('services - streetside - getBubbles()'); + //var deferred = Q.defer(); + var rect = tile.extent.rectangle(); + console.log('rect: ', rect); + var urlForRequest = url + utilQsString({ n: rect[3], s: rect[1], e: rect[2], w: rect[0], appkey: appkey, jsCallback: '{callback}' - }), function (data) { + }); + console.log('url for request',urlForRequest); + jsonpRequest(urlForRequest, function (data) { if (!data || data.error) { callback(null); + //deferred.resolve(data); } else { callback(data); + //deferred.reject(); } }); + //return deferred.promise; } // extract links to pages of API results @@ -441,23 +550,23 @@ export default { if (cache.bubbles && cache.bubbles.inflight) { _forEach(cache.bubbles.inflight, abortRequest); } - if (cache.images && cache.images.inflight) { - _forEach(cache.images.inflight, abortRequest); - } - if (cache.objects && cache.objects.inflight) { - _forEach(cache.objects.inflight, abortRequest); - } - if (cache.sequences && cache.sequences.inflight) { - _forEach(cache.sequences.inflight, abortRequest); - } + // if (cache.images && cache.images.inflight) { + // _forEach(cache.images.inflight, abortRequest); + // } + // if (cache.objects && cache.objects.inflight) { + // _forEach(cache.objects.inflight, abortRequest); + // } + // if (cache.sequences && cache.sequences.inflight) { + // _forEach(cache.sequences.inflight, abortRequest); + // } } _mlyCache = { - bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} }, - images: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {} }, - objects: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() }, - sequences: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, lineString: {} }, - detections: {} + bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} } + // images: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {} }, + // objects: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() }, + // sequences: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, lineString: {} }, + // detections: {} }; _mlySelectedImage = null; @@ -471,63 +580,63 @@ export default { return searchLimited(psize, limit, projection, _mlyCache.bubbles.rtree); }, - images: function (projection) { - var psize = 16, limit = 3; - return searchLimited(psize, limit, projection, _mlyCache.images.rtree); - }, - + // images: function (projection) { + // var psize = 16, limit = 3; + // return searchLimited(psize, limit, projection, _mlyCache.images.rtree); + // }, - signs: function (projection) { - var psize = 32, limit = 3; - return searchLimited(psize, limit, projection, _mlyCache.objects.rtree); - }, + // signs: function (projection) { + // var psize = 32, limit = 3; + // return searchLimited(psize, limit, projection, _mlyCache.objects.rtree); + // }, - sequences: function (projection) { - var viewport = projection.clipExtent(); - var min = [viewport[0][0], viewport[1][1]]; - var max = [viewport[1][0], viewport[0][1]]; - var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); - var sequenceKeys = {}; - // all sequences for images in viewport - _mlyCache.images.rtree.search(bbox) - .forEach(function (d) { - var sequenceKey = _mlyCache.sequences.forImageKey[d.data.key]; - if (sequenceKey) { - sequenceKeys[sequenceKey] = true; - } - }); + // sequences: function (projection) { + // var viewport = projection.clipExtent(); + // var min = [viewport[0][0], viewport[1][1]]; + // var max = [viewport[1][0], viewport[0][1]]; + // var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); + // var sequenceKeys = {}; + + // // all sequences for images in viewport + // _mlyCache.images.rtree.search(bbox) + // .forEach(function (d) { + // var sequenceKey = _mlyCache.sequences.forImageKey[d.data.key]; + // if (sequenceKey) { + // sequenceKeys[sequenceKey] = true; + // } + // }); - // Return lineStrings for the sequences - return Object.keys(sequenceKeys).map(function (sequenceKey) { - return _mlyCache.sequences.lineString[sequenceKey]; - }); - }, + // // Return lineStrings for the sequences + // return Object.keys(sequenceKeys).map(function (sequenceKey) { + // return _mlyCache.sequences.lineString[sequenceKey]; + // }); + // }, - signsSupported: function () { - var detected = utilDetect(); - if (detected.ie) return false; - if ((detected.browser.toLowerCase() === 'safari') && (parseFloat(detected.version) < 10)) return false; - return true; - }, + // signsSupported: function () { + // var detected = utilDetect(); + // if (detected.ie) return false; + // if ((detected.browser.toLowerCase() === 'safari') && (parseFloat(detected.version) < 10)) return false; + // return true; + // }, - signHTML: function (d) { - if (!_mlySignDefs || !_mlySignSprite) return; - var position = _mlySignDefs[d.value]; - if (!position) return '
'; - var iconStyle = [ - 'background-image:url(' + _mlySignSprite + ')', - 'background-repeat:no-repeat', - 'height:' + position.height + 'px', - 'width:' + position.width + 'px', - 'background-position-x:-' + position.x + 'px', - 'background-position-y:-' + position.y + 'px', - ]; - - return '
'; - }, + // signHTML: function (d) { + // if (!_mlySignDefs || !_mlySignSprite) return; + // var position = _mlySignDefs[d.value]; + // if (!position) return '
'; + // var iconStyle = [ + // 'background-image:url(' + _mlySignSprite + ')', + // 'background-repeat:no-repeat', + // 'height:' + position.height + 'px', + // 'width:' + position.width + 'px', + // 'background-position-x:-' + position.x + 'px', + // 'background-position-y:-' + position.y + 'px', + // ]; + + // return '
'; + // }, // this is called a bunch of times repeatedly loadImages: function (projection) { @@ -829,10 +938,10 @@ export default { }, - getSequenceKeyForImage: function (d) { - var imageKey = d && d.key; - return imageKey && _mlyCache.sequences.forImageKey[imageKey]; - }, + // getSequenceKeyForImage: function (d) { + // var imageKey = d && d.key; + // return imageKey && _mlyCache.sequences.forImageKey[imageKey]; + // }, setStyles: function (hovered, reset) { @@ -847,19 +956,19 @@ export default { .classed('selected', false); } - var hoveredImageKey = hovered && hovered.key; + //var hoveredImageKey = hovered && hovered.key; var hoveredBubbleKey = hovered && hovered.key; - var hoveredSequenceKey = this.getSequenceKeyForImage(hovered); - var hoveredLineString = hoveredSequenceKey && _mlyCache.sequences.lineString[hoveredSequenceKey]; - var hoveredImageKeys = (hoveredLineString && hoveredLineString.properties.coordinateProperties.image_keys) || []; + //var hoveredSequenceKey = this.getSequenceKeyForImage(hovered); + //var hoveredLineString = hoveredSequenceKey && _mlyCache.sequences.lineString[hoveredSequenceKey]; + //var hoveredImageKeys = (hoveredLineString && hoveredLineString.properties.coordinateProperties.image_keys) || []; var viewer = d3_select('#photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var selectedBubbleKey = selected && selected.key; - var selectedImageKey = selected && selected.key; - var selectedSequenceKey = this.getSequenceKeyForImage(selected); - var selectedLineString = selectedSequenceKey && _mlyCache.sequences.lineString[selectedSequenceKey]; - var selectedImageKeys = (selectedLineString && selectedLineString.properties.coordinateProperties.image_keys) || []; + //var selectedImageKey = selected && selected.key; + //var selectedSequenceKey = this.getSequenceKeyForImage(selected); + //var selectedLineString = selectedSequenceKey && _mlyCache.sequences.lineString[selectedSequenceKey]; + //var selectedImageKeys = (selectedLineString && selectedLineString.properties.coordinateProperties.image_keys) || []; // highlight sibling viewfields on either the selected or the hovered sequences var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey); @@ -877,99 +986,99 @@ export default { }, - updateDetections: function (d) { - if (!_mlyViewer || _mlyFallback) return; - - var imageKey = d && d.key; - var detections = (imageKey && _mlyCache.detections[imageKey]) || []; - - _forEach(detections, function (data, k) { - if (_isEmpty(data)) { - loadDetection(k); - } else { - var tag = makeTag(data); - if (tag) { - var tagComponent = _mlyViewer.getComponent('tag'); - tagComponent.add([tag]); - } - } - }); - - - function loadDetection(detectionKey) { - var url = apibase + 'detections/' + - detectionKey + '?' + utilQsString({ - client_id: clientId, - }); - - d3_request(url) - .mimeType('application/json') - .response(function (xhr) { - return JSON.parse(xhr.responseText); - }) - .get(function (err, data) { - if (!data || !data.properties) return; - - var imageKey = data.properties.image_key; - _mlyCache.detections[imageKey][detectionKey] = data; - - var selectedKey = _mlySelectedImage && _mlySelectedImage.key; - if (imageKey === selectedKey) { - var tag = makeTag(data); - if (tag) { - var tagComponent = _mlyViewer.getComponent('tag'); - tagComponent.add([tag]); - } - } - }); - } - + // updateDetections: function (d) { + // if (!_mlyViewer || _mlyFallback) return; + + // var imageKey = d && d.key; + // var detections = (imageKey && _mlyCache.detections[imageKey]) || []; + + // _forEach(detections, function (data, k) { + // if (_isEmpty(data)) { + // loadDetection(k); + // } else { + // var tag = makeTag(data); + // if (tag) { + // var tagComponent = _mlyViewer.getComponent('tag'); + // tagComponent.add([tag]); + // } + // } + // }); + + + // function loadDetection(detectionKey) { + // var url = apibase + 'detections/' + + // detectionKey + '?' + utilQsString({ + // client_id: clientId, + // }); + + // d3_request(url) + // .mimeType('application/json') + // .response(function (xhr) { + // return JSON.parse(xhr.responseText); + // }) + // .get(function (err, data) { + // if (!data || !data.properties) return; + + // var imageKey = data.properties.image_key; + // _mlyCache.detections[imageKey][detectionKey] = data; + + // var selectedKey = _mlySelectedImage && _mlySelectedImage.key; + // if (imageKey === selectedKey) { + // var tag = makeTag(data); + // if (tag) { + // var tagComponent = _mlyViewer.getComponent('tag'); + // tagComponent.add([tag]); + // } + // } + // }); + // } - function makeTag(data) { - var valueParts = data.properties.value.split('--'); - if (valueParts.length !== 3) return; - - var text = valueParts[1].replace(/-/g, ' '); - var tag; - - // Currently only two shapes - if (data.properties.shape.type === 'Polygon') { - var polygonGeometry = new Mapillary - .TagComponent - .PolygonGeometry(data.properties.shape.coordinates[0]); - - tag = new Mapillary.TagComponent.OutlineTag( - data.properties.key, - polygonGeometry, - { - text: text, - textColor: 0xffff00, - lineColor: 0xffff00, - lineWidth: 2, - fillColor: 0xffff00, - fillOpacity: 0.3, - } - ); - - } else if (data.properties.shape.type === 'Point') { - var pointGeometry = new Mapillary - .TagComponent - .PointGeometry(data.properties.shape.coordinates[0]); - - tag = new Mapillary.TagComponent.SpotTag( - data.properties.key, - pointGeometry, - { - text: text, - color: 0xffff00, - textColor: 0xffff00 - } - ); - } - return tag; - } - }, + // function makeTag(data) { + // var valueParts = data.properties.value.split('--'); + // if (valueParts.length !== 3) return; + + // var text = valueParts[1].replace(/-/g, ' '); + // var tag; + + // // Currently only two shapes + // if (data.properties.shape.type === 'Polygon') { + // var polygonGeometry = new Mapillary + // .TagComponent + // .PolygonGeometry(data.properties.shape.coordinates[0]); + + // tag = new Mapillary.TagComponent.OutlineTag( + // data.properties.key, + // polygonGeometry, + // { + // text: text, + // textColor: 0xffff00, + // lineColor: 0xffff00, + // lineWidth: 2, + // fillColor: 0xffff00, + // fillOpacity: 0.3, + // } + // ); + + // } else if (data.properties.shape.type === 'Point') { + // var pointGeometry = new Mapillary + // .TagComponent + // .PointGeometry(data.properties.shape.coordinates[0]); + + // tag = new Mapillary.TagComponent.SpotTag( + // data.properties.key, + // pointGeometry, + // { + // text: text, + // color: 0xffff00, + // textColor: 0xffff00 + // } + // ); + // } + + // return tag; + // } + // }, cache: function () { diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 728f0789d5..0bb5c5b97b 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -3,7 +3,6 @@ import { select as d3_select } from 'd3-selection'; import { svgPath, svgPointTransform } from './index'; import { services } from '../services'; - export function svgStreetside(projection, context, dispatch) { var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); var minZoom = 12; @@ -17,14 +16,14 @@ export function svgStreetside(projection, context, dispatch) { if (svgStreetside.initialized) return; // run once svgStreetside.enabled = false; svgStreetside.initialized = true; - // console.log("svg: streetside initialized...."); + console.log("svg: streetside initialized...."); } function getService() { if (services.streetside && !_streetside) { _streetside = services.streetside; - _streetside.event.on('loadedImages', throttledRedraw); + _streetside.event.on('loadedBubbles', throttledRedraw); } else if (!services.streetside && _streetside) { _streetside = null; } @@ -118,15 +117,19 @@ export function svgStreetside(projection, context, dispatch) { var selected = viewer.empty() ? undefined : viewer.datum(); var z = ~~context.map().zoom(); + + console.log('z = ', z); + console.log('minMarkerZoom = ', minMarkerZoom); + var showMarkers = (z >= minMarkerZoom); var showViewfields = (z >= minViewfieldZoom); var service = getService(); // gets the features from service cache - var sequences = (service ? service.sequences(projection) : []); - var images = (service && showMarkers ? service.images(projection) : []); + //var sequences = (service ? service.sequences(projection) : []); + //var images = (service && showMarkers ? service.images(projection) : []); var bubbles = (service && showMarkers ? service.bubbles(projection) : []); - // console.log(" svg: update() bubbles", bubbles); + console.log("svg: update() bubbles", bubbles); // console.log(" svg: update() images", images); // var traces = layer.selectAll('.sequences').selectAll('.sequence') // .data(sequences, function(d) { return d.properties.key; }); @@ -207,7 +210,7 @@ export function svgStreetside(projection, context, dispatch) { //drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called. //'svgStreetside()' is called from index.js (ln) function drawImages(selection) { - //console.log("svg - streetside - drawImages(); selection: ", selection); + console.log("svg - streetside - drawImages(); selection: ", selection); var enabled = svgStreetside.enabled, service = getService(); //console.log("svg - streetside - drawImages(); svgStreetside enabled? ", enabled); diff --git a/package.json b/package.json index b6db64bf1a..dd90d14c83 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "osm-auth": "1.0.2", "rbush": "2.0.2", "wmf-sitematrix": "0.1.4", - "pannellum": "2.4.1" + "pannellum": "2.4.1", + "q": "1.5.1" }, "devDependencies": { "@mapbox/maki": "^4.0.0", From 10f166001b39dbed724ba94a62c27958f53838f9 Mon Sep 17 00:00:00 2001 From: LorenMueller Date: Wed, 16 May 2018 15:12:17 -0700 Subject: [PATCH 6/7] fixed tile size at zoom levels for bubbles call --- modules/services/streetside.js | 561 ++------------------------------- modules/svg/streetside.js | 15 +- package.json | 3 +- 3 files changed, 36 insertions(+), 543 deletions(-) diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 2cdff25a0c..b408ab7a54 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -23,8 +23,6 @@ import { import rbush from 'rbush'; -import Q from 'q'; - import { jsonpRequest } from '../util/jsonp_request'; import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; import { geoExtent } from '../geo'; @@ -32,8 +30,8 @@ import { utilDetect } from '../util/detect'; import { utilQsString, utilRebind } from '../util'; var apibase = 'https://a.mapillary.com/v3/', - msapi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/', - bubbleapi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/', + bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?', + streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/', appkey = 'An-VWpS-o_m7aV8Lxa0oR9cC3bxwdhdCYEGEFHMP9wyMbmRJFzWfMDD1z3-DXUuE', streetsideViewerCss = 'pannellum-streetside/pannellum.css', streetsideViewer = 'pannellum-streetside/pannellum.js', @@ -41,8 +39,7 @@ var apibase = 'https://a.mapillary.com/v3/', viewerjs = 'mapillary-js/mapillary.js', clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi', maxResults = 1000, - tileZoom = 14, - //dispatch = d3_dispatch('loadedImages', 'loadedSigns'), + tileZoom = 16.5, dispatch = d3_dispatch('loadedBubbles'), _mlyFallback = false, _mlyCache, @@ -96,26 +93,27 @@ function localeTimestamp(s) { // using d3.geo.tiles.js from lib, gets tile extents for the current // map view extent function getTiles(projection) { - //console.log('services - streetside - getTiles()'); + console.log('getTiles()'); + //s is the current map scale + //z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground. + //ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification. + // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx. + // Here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels). var s = projection.scale() * 2 * Math.PI, z = Math.max(Math.log(s) / Math.log(2) - 8, 0), - ts = 256 * Math.pow(2, z - tileZoom), + ts = 256 * Math.pow(2, z - tileZoom), origin = [ s / 2 - projection.translate()[0], s / 2 - projection.translate()[1]]; - console.log('s = ', s); - console.log('z = ', z); - console.log('ts = ', ts); - console.log('origin = ', origin); return d3_geoTile() .scaleExtent([tileZoom, tileZoom]) .scale(s) .size(projection.clipExtent()[1]) .translate(projection.translate())() .map(function (tile) { + //console.log('d3_geoTile: ', tile); var x = tile[0] * ts - origin[0], y = tile[1] * ts - origin[1]; - return { id: tile.toString(), xyz: tile, @@ -129,24 +127,15 @@ function getTiles(projection) { function loadTiles(which, url, projection) { - console.log('services - streetside - loadTiles() for: ', which); - ////console.log("loading tiles from streetside service..."); + console.log('loadTiles() for: ', which); var s = projection.scale() * 2 * Math.PI, currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0)); - //console.log("var projection = ", projection); - //console.log("var projection.scale() = ", projection.scale()); - //console.log("var s = ", s); - //console.log("var currZoom = ", currZoom); - var geoExt = new geoExtent(projection.invert([0, 1]), - projection.invert([1, 0])); - console.log("map.extent() = ", geoExt); - + // breakup the map view into tiles var tiles = getTiles(projection).filter(function (t) { return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]); }); - console.log("var tiles = ", tiles); - //console.log(" which.inflight ", which.inflight); + console.log("loadTiles(), tiles = ", tiles); // which.inflight seems to always be undefined _filter(which.inflight, function (v, k) { @@ -156,28 +145,22 @@ function loadTiles(which, url, projection) { }).map(abortRequest); tiles.forEach(function (tile) { - console.log(" tile to load = ", tile); - // //console.log(" tile extent to load = ", tile.extent[0][1] + ',' + tile.extent[0][0] + ',' + tile.extent[1][1] + ',' + tile.extent[1][0]); - // //console.log(" tile extent to load (MS): n=", tile.extent[1][1] + '&s=' + tile.extent[0][1] + '&e=' + tile.extent[1][0] + '&w=' + tile.extent[0][0]); loadNextTilePage(which, currZoom, url, tile); }); } // load data for the next tile page in line function loadNextTilePage(which, currZoom, url, tile) { - console.log('loadNextTilePage() which: ', which); - console.log('currZoom: ', currZoom); - console.log('url: ', url); - console.log('tile: ', tile); + console.log('loadNextTilePage()'); var cache = _mlyCache[which], - maxPages = maxPageAtZoom(currZoom), + //maxPages = maxPageAtZoom(currZoom), nextPage = cache.nextPage[tile.id] || 0; - + var id = tile.id + ',' + String(nextPage); - console.log('id = ', id); - console.log('cache.loaded[id]: ', cache.loaded[id]); - console.log('cache.inflight[id]: ', cache.inflight[id]); + //console.log('id = ', id); + //console.log('cache.loaded[id]: ', cache.loaded[id]); + //console.log('cache.inflight[id]: ', cache.inflight[id]); if (cache.loaded[id] || cache.inflight[id]) return; @@ -188,6 +171,7 @@ function loadNextTilePage(which, currZoom, url, tile) { if (!bubbles) return; // remove first element, statistic info on request, not a bubble bubbles.shift(); + console.log('bubbles.length', bubbles.length); var features = bubbles.map(function (bubble) { //console.log("bubble: ", bubble); var loc = [bubble.lo, bubble.la]; @@ -214,18 +198,14 @@ function loadNextTilePage(which, currZoom, url, tile) { cache.points[bubbleId] = feature; cache.forImageKey[bubbleId] = bubbleId; // return false; // because no `d` data worth loading into an rbush - //console.log('End of GetBubbles success handling: cache = ', cache); return { minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d }; }).filter(Boolean); - // //console.log("bubble features: ", features); + //console.log("bubble features: ", features); cache.rtree.load(features); - - console.log('bubbles.length', bubbles.length); - console.log('cache.nextPage[tile.id]', cache.nextPage[tile.id]); - + //console.log('cache.nextPage[tile.id]', cache.nextPage[tile.id]); if (which === 'bubbles'){ dispatch.call('loadedBubbles'); } @@ -236,207 +216,11 @@ function loadNextTilePage(which, currZoom, url, tile) { // cache.nextPage[tile.id] = Infinity; // no more pages to load // } }); - - //console.log('maxPages = ', maxPages); - //console.log('cache.nextPage[tile.id] - ', cache.nextPage[tile.id]); - //console.log('nextPage = ', nextPage); - - // bubbleCalls.push(getBubbles(url, tile, function (bubbles) { - // console.log("got the bubbles: ", bubbles); - // })); - - // bubbleCalls.push(getBubbles(url, tile)); - - // var doAll = Q.all(bubbleCalls); - // doAll.then(function () { - // console.log('success'); - // }).catch(function (ex) { - // console.log('error'); - // }); - - - // switch (which) { - // case 'bubbles': - // //console.log('services - streetside - loadNextTilePage() nextPage > maxPages?: ', nextPage > maxPages); - - // if (nextPage > maxPages) return; - - - // var id = tile.id + ',' + String(nextPage); - // //console.log('services - streetside - loadNextTilePage() cache.loaded[id]: ', cache.loaded[id]); - // //console.log('services - streetside - loadNextTilePage() cache.inflight[id]: ', cache.inflight[id]); - // if (cache.loaded[id] || cache.inflight[id]) return; - - // cache.inflight[id] = true; - // getBubbles(url, tile, function (bubbles) { - // cache.loaded[id] = true; - // delete cache.inflight[id]; - // //console.log("bubbles: ", bubbles); - // if (!bubbles) return; - // // remove first element, statistic info on request, not a bubble - // bubbles.shift(); - // var features = bubbles.map(function (bubble) { - // //console.log("bubble: ", bubble); - // var loc = [bubble.lo, bubble.la]; - // var d = { - // loc: loc, - // key: bubble.id, - // ca: bubble.he, - // captured_at: bubble.cd, - // captured_by: "microsoft", - // nbn: bubble.nbn, - // pbn: bubble.pbn, - // rn: bubble.rn, - // pano: true - // }; - // var feature = { - // geometry: { - // coordinates: [bubble.lo, bubble.la], - // type: "Point" - // }, - // properties: d, - // type: "Feature" - // }; - // var bubbleId = bubble.id; - // cache.points[bubbleId] = feature; - // cache.forImageKey[bubbleId] = bubbleId; - // // return false; // because no `d` data worth loading into an rbush - // //console.log('End of GetBubbles success handling: cache = ', cache); - // return { - // minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d - // }; - - // }).filter(Boolean); - // // //console.log("bubble features: ", features); - // cache.rtree.load(features); - - // }); - // break; - // default: - // var nextURL = cache.nextURL[tile.id] || url + - // utilQsString({ - // per_page: maxResults, - // page: nextPage, - // client_id: clientId, - // bbox: [rect[0], rect[1], rect[2], rect[3]].join(','), - // }); - // ////console.log("cache for loadNextTilePage: ", cache); - // if (nextPage > maxPages) return; - - // var id = tile.id + ',' + String(nextPage); - // if (cache.loaded[id] || cache.inflight[id]) return; - // ////console.log("get nextURL: ", nextURL); - // cache.inflight[id] = d3_request(nextURL) - // .mimeType('application/json') - // .response(function (xhr) { - // var linkHeader = xhr.getResponseHeader('Link'); - // if (linkHeader) { - // var pagination = parsePagination(xhr.getResponseHeader('Link')); - // if (pagination.next) { - // cache.nextURL[tile.id] = pagination.next; - // } - // } - // ////console.log(" reponse from nextURL:",xhr.responseText); - // return JSON.parse(xhr.responseText); - // }) - // .get(function (err, data) { - // cache.loaded[id] = true; - // delete cache.inflight[id]; - // if (err || !data.features || !data.features.length) return; - // // //console.log("features returned by mapillary: ", data.features); - // var features = data.features.map(function (feature) { - // var loc = feature.geometry.coordinates, - // d; - - // if (which === 'images') { - // d = { - // loc: loc, - // key: feature.properties.key, - // ca: feature.properties.ca, - // captured_at: feature.properties.captured_at, - // captured_by: feature.properties.username, - // pano: feature.properties.pano - // }; - // cache.forImageKey[d.key] = d; // cache imageKey -> image - - // } else if (which === 'sequences') { - // // //console.log("sequence", feature); - // var sequenceKey = feature.properties.key; - // cache.lineString[sequenceKey] = feature; // cache sequenceKey -> lineString - // feature.properties.coordinateProperties.image_keys.forEach(function (imageKey) { - // cache.forImageKey[imageKey] = sequenceKey; // cache imageKey -> sequenceKey - // }); - // return false; // because no `d` data worth loading into an rbush - - // } else if (which === 'objects') { - // d = { - // loc: loc, - // key: feature.properties.key, - // value: feature.properties.value, - // package: feature.properties.package, - // detections: feature.properties.detections - // }; - - // // cache imageKey -> detectionKey - // feature.properties.detections.forEach(function (detection) { - // var imageKey = detection.image_key; - // var detectionKey = detection.detection_key; - // if (!_mlyCache.detections[imageKey]) { - // _mlyCache.detections[imageKey] = {}; - // } - // if (!_mlyCache.detections[imageKey][detectionKey]) { - // _mlyCache.detections[imageKey][detectionKey] = {}; - // } - // }); - // } - - // return { - // minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d - // }; - - // }).filter(Boolean); - // ////console.log("mapillary features: ", features); - // cache.rtree.load(features); - - // if (which === 'images' || which === 'sequences') { - // dispatch.call('loadedImages'); - // } else if (which === 'objects') { - // dispatch.call('loadedSigns'); - // } - - // if (data.features.length === maxResults) { // more pages to load - // cache.nextPage[tile.id] = nextPage + 1; - // loadNextTilePage(which, currZoom, url, tile); - // } else { - // cache.nextPage[tile.id] = Infinity; // no more pages to load - // } - // // //console.log("_mlyCache: ", _mlyCache); - // }); - // break; - // } } -// call the bubble api and get the json data -// for the tile extent -// function getBubbles2(url, tile) { -// console.log('services - streetside - getBubbles()'); -// var deferred = Q.defer(); -// var rect = tile.extent.rectangle() -// var urlForRequest = url + utilQsString({ -// n: rect[3], -// s: rect[1], -// e: rect[2], -// w: rect[0], -// appkey: appkey -// }); -// return deferred.promise; -// } - function getBubbles(url, tile, callback) { console.log('services - streetside - getBubbles()'); - //var deferred = Q.defer(); var rect = tile.extent.rectangle(); - console.log('rect: ', rect); var urlForRequest = url + utilQsString({ n: rect[3], s: rect[1], @@ -449,13 +233,10 @@ function getBubbles(url, tile, callback) { jsonpRequest(urlForRequest, function (data) { if (!data || data.error) { callback(null); - //deferred.resolve(data); } else { callback(data); - //deferred.reject(); } }); - //return deferred.promise; } // extract links to pages of API results @@ -550,23 +331,10 @@ export default { if (cache.bubbles && cache.bubbles.inflight) { _forEach(cache.bubbles.inflight, abortRequest); } - // if (cache.images && cache.images.inflight) { - // _forEach(cache.images.inflight, abortRequest); - // } - // if (cache.objects && cache.objects.inflight) { - // _forEach(cache.objects.inflight, abortRequest); - // } - // if (cache.sequences && cache.sequences.inflight) { - // _forEach(cache.sequences.inflight, abortRequest); - // } } _mlyCache = { bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} } - // images: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {} }, - // objects: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() }, - // sequences: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, lineString: {} }, - // detections: {} }; _mlySelectedImage = null; @@ -580,89 +348,14 @@ export default { return searchLimited(psize, limit, projection, _mlyCache.bubbles.rtree); }, - // images: function (projection) { - // var psize = 16, limit = 3; - // return searchLimited(psize, limit, projection, _mlyCache.images.rtree); - // }, - - - // signs: function (projection) { - // var psize = 32, limit = 3; - // return searchLimited(psize, limit, projection, _mlyCache.objects.rtree); - // }, - - - // sequences: function (projection) { - // var viewport = projection.clipExtent(); - // var min = [viewport[0][0], viewport[1][1]]; - // var max = [viewport[1][0], viewport[0][1]]; - // var bbox = geoExtent(projection.invert(min), projection.invert(max)).bbox(); - // var sequenceKeys = {}; - - // // all sequences for images in viewport - // _mlyCache.images.rtree.search(bbox) - // .forEach(function (d) { - // var sequenceKey = _mlyCache.sequences.forImageKey[d.data.key]; - // if (sequenceKey) { - // sequenceKeys[sequenceKey] = true; - // } - // }); - - // // Return lineStrings for the sequences - // return Object.keys(sequenceKeys).map(function (sequenceKey) { - // return _mlyCache.sequences.lineString[sequenceKey]; - // }); - // }, - - // signsSupported: function () { - // var detected = utilDetect(); - // if (detected.ie) return false; - // if ((detected.browser.toLowerCase() === 'safari') && (parseFloat(detected.version) < 10)) return false; - // return true; - // }, - - - // signHTML: function (d) { - // if (!_mlySignDefs || !_mlySignSprite) return; - // var position = _mlySignDefs[d.value]; - // if (!position) return '
'; - // var iconStyle = [ - // 'background-image:url(' + _mlySignSprite + ')', - // 'background-repeat:no-repeat', - // 'height:' + position.height + 'px', - // 'width:' + position.width + 'px', - // 'background-position-x:-' + position.x + 'px', - // 'background-position-y:-' + position.y + 'px', - // ]; - - // return '
'; - // }, + // this is called a bunch of times repeatedly - loadImages: function (projection) { + loadBubbles: function (projection) { //console.log('services - streetside - loadImages()'); - loadTiles('bubbles', msapi + 'GetBubbles.ashx?', projection); - //loadTiles('images', apibase + 'images?', projection); - //loadTiles('sequences', apibase + 'sequences?', projection); + loadTiles('bubbles', bubbleApi, projection); }, - - // loadSigns: function (context, projection) { - // // if we are looking at signs, we'll actually need to fetch images too - // loadTiles('images', apibase + 'images?', projection); - // loadTiles('objects', apibase + 'objects?', projection); - - // // load traffic sign defs - // if (!_mlySignDefs) { - // _mlySignSprite = context.asset('img/traffic-signs/traffic-signs.png'); - // _mlySignDefs = {}; - // d3_json(context.asset('img/traffic-signs/traffic-signs.json'), function (err, data) { - // if (err) return; - // _mlySignDefs = data; - // }); - // } - // }, - // create the streeside viewer loadViewer: function (context) { //console.log('services - streetside - loadViewer()'); @@ -758,91 +451,6 @@ export default { return this.setStyles(null, true); }, - - parsePagination: parsePagination, - - - updateViewer: function (imageKey, context) { - if (!imageKey) return this; - - if (!_mlyViewer) { - this.initViewer(imageKey, context); - } else { - _mlyViewer.moveToKey(imageKey) - .catch(function (e) { console.error('mly3', e); }); // eslint-disabe-line no-console - } - - return this; - }, - - - initViewer: function (imageKey, context) { - var that = this; - if (Mapillary && imageKey) { - var opts = { - baseImageSize: 320, - component: { - cover: false, - keyboard: false, - tag: true - } - }; - - // Disable components requiring WebGL support - if (!Mapillary.isSupported() && Mapillary.isFallbackSupported()) { - _mlyFallback = true; - opts.component = { - cover: false, - direction: false, - imagePlane: false, - keyboard: false, - mouse: false, - sequence: false, - tag: false, - image: true, // fallback - navigation: true // fallback - }; - } - - _mlyViewer = new Mapillary.Viewer('ms', clientId, null, opts); - _mlyViewer.on('nodechanged', nodeChanged); - _mlyViewer.moveToKey(imageKey) - .catch(function (e) { console.error('mly3', e); }); // eslint-disable-line no-console - } - - // nodeChanged: called after the viewer has changed images and is ready. - // - // There is some logic here to batch up clicks into a _mlyClicks array - // because the user might click on a lot of markers quickly and nodechanged - // may be called out of order asychronously. - // - // Clicks are added to the array in `selectedImage` and removed here. - // - function nodeChanged(node) { - if (!_mlyFallback) { - _mlyViewer.getComponent('tag').removeAll(); // remove previous detections - } - - var clicks = _mlyClicks; - var index = clicks.indexOf(node.key); - var selectedKey = _mlySelectedImage && _mlySelectedImage.key; - - if (index > -1) { // `nodechanged` initiated from clicking on a marker.. - clicks.splice(index, 1); // remove the click - // If `node.key` matches the current _mlySelectedImage, call `selectImage()` - // one more time to update the detections and attribution.. - if (node.key === selectedKey) { - that.selectImage(_mlySelectedImage, node.key, true); - } - } else { // `nodechanged` initiated from the Mapillary viewer controls.. - var loc = node.computedLatLon ? [node.computedLatLon.lon, node.computedLatLon.lat] : [node.latLon.lon, node.latLon.lat]; - context.map().centerEase(loc); - that.selectImage(undefined, node.key, true); - } - } - }, - - // Pass the image datum itself in `d` or the `imageKey` string. // This allows images to be selected from places that dont have access // to the full image datum (like the street signs layer or the js viewer) @@ -912,7 +520,7 @@ export default { bubbleIdQuadKey = "0" + bubbleIdQuadKey; } var imgLocIdxArr = ['01','02','03','10','11','12']; //Order matters here: front=01, right=02, back=03, left=10 up=11,= down=12 - var imgUrlPrefix = bubbleapi + 'hs' + bubbleIdQuadKey; + var imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey; var imgUrlSuffix = '.jpg?g=6338&n=z'; pannellum.viewer('viewer-streetside', { "type": "cubemap", @@ -932,18 +540,10 @@ export default { return this; }, - getSelectedImage: function () { return _mlySelectedImage; }, - - // getSequenceKeyForImage: function (d) { - // var imageKey = d && d.key; - // return imageKey && _mlyCache.sequences.forImageKey[imageKey]; - // }, - - setStyles: function (hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') @@ -955,22 +555,10 @@ export default { .classed('highlighted', false) .classed('selected', false); } - - //var hoveredImageKey = hovered && hovered.key; var hoveredBubbleKey = hovered && hovered.key; - //var hoveredSequenceKey = this.getSequenceKeyForImage(hovered); - //var hoveredLineString = hoveredSequenceKey && _mlyCache.sequences.lineString[hoveredSequenceKey]; - //var hoveredImageKeys = (hoveredLineString && hoveredLineString.properties.coordinateProperties.image_keys) || []; - var viewer = d3_select('#photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var selectedBubbleKey = selected && selected.key; - //var selectedImageKey = selected && selected.key; - //var selectedSequenceKey = this.getSequenceKeyForImage(selected); - //var selectedLineString = selectedSequenceKey && _mlyCache.sequences.lineString[selectedSequenceKey]; - //var selectedImageKeys = (selectedLineString && selectedLineString.properties.coordinateProperties.image_keys) || []; - - // highlight sibling viewfields on either the selected or the hovered sequences var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey); d3_selectAll('.layer-streetside-images .viewfield-group') @@ -986,101 +574,6 @@ export default { }, - // updateDetections: function (d) { - // if (!_mlyViewer || _mlyFallback) return; - - // var imageKey = d && d.key; - // var detections = (imageKey && _mlyCache.detections[imageKey]) || []; - - // _forEach(detections, function (data, k) { - // if (_isEmpty(data)) { - // loadDetection(k); - // } else { - // var tag = makeTag(data); - // if (tag) { - // var tagComponent = _mlyViewer.getComponent('tag'); - // tagComponent.add([tag]); - // } - // } - // }); - - - // function loadDetection(detectionKey) { - // var url = apibase + 'detections/' + - // detectionKey + '?' + utilQsString({ - // client_id: clientId, - // }); - - // d3_request(url) - // .mimeType('application/json') - // .response(function (xhr) { - // return JSON.parse(xhr.responseText); - // }) - // .get(function (err, data) { - // if (!data || !data.properties) return; - - // var imageKey = data.properties.image_key; - // _mlyCache.detections[imageKey][detectionKey] = data; - - // var selectedKey = _mlySelectedImage && _mlySelectedImage.key; - // if (imageKey === selectedKey) { - // var tag = makeTag(data); - // if (tag) { - // var tagComponent = _mlyViewer.getComponent('tag'); - // tagComponent.add([tag]); - // } - // } - // }); - // } - - - // function makeTag(data) { - // var valueParts = data.properties.value.split('--'); - // if (valueParts.length !== 3) return; - - // var text = valueParts[1].replace(/-/g, ' '); - // var tag; - - // // Currently only two shapes - // if (data.properties.shape.type === 'Polygon') { - // var polygonGeometry = new Mapillary - // .TagComponent - // .PolygonGeometry(data.properties.shape.coordinates[0]); - - // tag = new Mapillary.TagComponent.OutlineTag( - // data.properties.key, - // polygonGeometry, - // { - // text: text, - // textColor: 0xffff00, - // lineColor: 0xffff00, - // lineWidth: 2, - // fillColor: 0xffff00, - // fillOpacity: 0.3, - // } - // ); - - // } else if (data.properties.shape.type === 'Point') { - // var pointGeometry = new Mapillary - // .TagComponent - // .PointGeometry(data.properties.shape.coordinates[0]); - - // tag = new Mapillary.TagComponent.SpotTag( - // data.properties.key, - // pointGeometry, - // { - // text: text, - // color: 0xffff00, - // textColor: 0xffff00 - // } - // ); - // } - - // return tag; - // } - // }, - - cache: function () { return _mlyCache; }, diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 0bb5c5b97b..612f4135e2 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -5,9 +5,9 @@ import { services } from '../services'; export function svgStreetside(projection, context, dispatch) { var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); - var minZoom = 12; + var minZoom = 16; var minMarkerZoom = 16; - var minViewfieldZoom = 18; + var minViewfieldZoom = 16; var layer = d3_select(null); var _streetside; @@ -112,14 +112,14 @@ export function svgStreetside(projection, context, dispatch) { function update() { - console.log("svg - streetside - update()"); + console.log("svg - update()"); var viewer = d3_select('#photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var z = ~~context.map().zoom(); - console.log('z = ', z); - console.log('minMarkerZoom = ', minMarkerZoom); + //console.log('z = ', z); + //console.log('minMarkerZoom = ', minMarkerZoom); var showMarkers = (z >= minMarkerZoom); var showViewfields = (z >= minViewfieldZoom); @@ -210,7 +210,7 @@ export function svgStreetside(projection, context, dispatch) { //drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called. //'svgStreetside()' is called from index.js (ln) function drawImages(selection) { - console.log("svg - streetside - drawImages(); selection: ", selection); + //console.log("svg - streetside - drawImages(); selection: ", selection); var enabled = svgStreetside.enabled, service = getService(); //console.log("svg - streetside - drawImages(); svgStreetside enabled? ", enabled); @@ -241,7 +241,8 @@ export function svgStreetside(projection, context, dispatch) { editOn(); update(); // console.log("svg: calling loadImages...."); - service.loadImages(projection); + + service.loadBubbles(projection); } else { editOff(); } diff --git a/package.json b/package.json index dd90d14c83..b6db64bf1a 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,7 @@ "osm-auth": "1.0.2", "rbush": "2.0.2", "wmf-sitematrix": "0.1.4", - "pannellum": "2.4.1", - "q": "1.5.1" + "pannellum": "2.4.1" }, "devDependencies": { "@mapbox/maki": "^4.0.0", From 7addf8678d2c7674711a1df70f12647b24743ca2 Mon Sep 17 00:00:00 2001 From: LorenMueller Date: Tue, 22 May 2018 15:36:27 -0700 Subject: [PATCH 7/7] Cleanup and commenting --- modules/services/streetside.js | 369 ++++++++++++--------------------- modules/svg/streetside.js | 108 +++++----- 2 files changed, 191 insertions(+), 286 deletions(-) diff --git a/modules/services/streetside.js b/modules/services/streetside.js index b408ab7a54..af54e45bc4 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -7,54 +7,43 @@ import _isEmpty from 'lodash-es/isEmpty'; import _map from 'lodash-es/map'; import _some from 'lodash-es/some'; import _union from 'lodash-es/union'; - import { range as d3_range } from 'd3-array'; import { dispatch as d3_dispatch } from 'd3-dispatch'; - import { request as d3_request, json as d3_json } from 'd3-request'; - import { select as d3_select, selectAll as d3_selectAll } from 'd3-selection'; - import rbush from 'rbush'; - import { jsonpRequest } from '../util/jsonp_request'; import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; import { geoExtent } from '../geo'; import { utilDetect } from '../util/detect'; import { utilQsString, utilRebind } from '../util'; -var apibase = 'https://a.mapillary.com/v3/', - bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?', +var bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?', streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/', - appkey = 'An-VWpS-o_m7aV8Lxa0oR9cC3bxwdhdCYEGEFHMP9wyMbmRJFzWfMDD1z3-DXUuE', - streetsideViewerCss = 'pannellum-streetside/pannellum.css', - streetsideViewer = 'pannellum-streetside/pannellum.js', - viewercss = 'mapillary-js/mapillary.min.css', - viewerjs = 'mapillary-js/mapillary.js', - clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi', - maxResults = 1000, + bubbleAppKey = 'AuftgJsO0Xs8Ts4M1xZUQJQXJNsvmh3IV8DkNieCiy3tCwCUMq76-WpkrBtNAuEm', + acctId = '1402191', + pannellumViewerCss = 'pannellum-streetside/pannellum.css', + pannellumViewer = 'pannellum-streetside/pannellum.js', tileZoom = 16.5, dispatch = d3_dispatch('loadedBubbles'), - _mlyFallback = false, - _mlyCache, - _mlyClicks, - _mlySelectedImage, - _mlySignDefs, - _mlySignSprite, - _mlyViewer; - + _bubbleCache; +/** + * abortRequest(). + */ function abortRequest(i) { i.abort(); } - +/** + * nearNullIsland(). + */ function nearNullIsland(x, y, z) { if (z >= 7) { var center = Math.pow(2, z - 1), @@ -66,17 +55,9 @@ function nearNullIsland(x, y, z) { return false; } - -function maxPageAtZoom(z) { - if (z < 15) return 2; - if (z === 15) return 5; - if (z === 16) return 10; - if (z === 17) return 20; - if (z === 18) return 40; - if (z > 18) return 80; -} - - +/** + * localeTimeStamp(). + */ function localeTimestamp(s) { if (!s) return null; var detected = utilDetect(); @@ -90,15 +71,19 @@ function localeTimestamp(s) { return d.toLocaleString(detected.locale, options); } -// using d3.geo.tiles.js from lib, gets tile extents for the current -// map view extent +/** + * getTiles() returns array of d3 geo tiles. + * Using d3.geo.tiles.js from lib, gets tile extents for each grid tile in a grid created from + * an area around (and including) the current map view extents. + */ function getTiles(projection) { - console.log('getTiles()'); - //s is the current map scale - //z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground. - //ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification. - // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx. - // Here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels). + //console.log('getTiles()'); + + // s is the current map scale + // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground. + // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification. + // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx. + // As used here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels). var s = projection.scale() * 2 * Math.PI, z = Math.max(Math.log(s) / Math.log(2) - 8, 0), ts = 256 * Math.pow(2, z - tileZoom), @@ -111,7 +96,6 @@ function getTiles(projection) { .size(projection.clipExtent()[1]) .translate(projection.translate())() .map(function (tile) { - //console.log('d3_geoTile: ', tile); var x = tile[0] * ts - origin[0], y = tile[1] * ts - origin[1]; return { @@ -125,7 +109,9 @@ function getTiles(projection) { }); } - +/** + * loadTiles() wraps the process of generating tiles and then fetching image points for each tile. + */ function loadTiles(which, url, projection) { console.log('loadTiles() for: ', which); var s = projection.scale() * 2 * Math.PI, @@ -135,101 +121,80 @@ function loadTiles(which, url, projection) { var tiles = getTiles(projection).filter(function (t) { return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]); }); - console.log("loadTiles(), tiles = ", tiles); - - // which.inflight seems to always be undefined - _filter(which.inflight, function (v, k) { - var wanted = _find(tiles, function (tile) { return k === (tile.id + ',0'); }); - if (!wanted) delete which.inflight[k]; - return !wanted; - }).map(abortRequest); tiles.forEach(function (tile) { loadNextTilePage(which, currZoom, url, tile); }); } -// load data for the next tile page in line +/** + * loadNextTilePage() load data for the next tile page in line. + */ function loadNextTilePage(which, currZoom, url, tile) { console.log('loadNextTilePage()'); - var cache = _mlyCache[which], - //maxPages = maxPageAtZoom(currZoom), - nextPage = cache.nextPage[tile.id] || 0; - - var id = tile.id + ',' + String(nextPage); - - //console.log('id = ', id); - //console.log('cache.loaded[id]: ', cache.loaded[id]); - //console.log('cache.inflight[id]: ', cache.inflight[id]); - - if (cache.loaded[id] || cache.inflight[id]) return; - - cache.inflight[id] = getBubbles(url, tile, function(bubbles){ - console.log("GET Response - bubbles: ", bubbles); - cache.loaded[id] = true; - delete cache.inflight[id]; - if (!bubbles) return; - // remove first element, statistic info on request, not a bubble - bubbles.shift(); - console.log('bubbles.length', bubbles.length); - var features = bubbles.map(function (bubble) { - //console.log("bubble: ", bubble); - var loc = [bubble.lo, bubble.la]; - var d = { - loc: loc, - key: bubble.id, - ca: bubble.he, - captured_at: bubble.cd, - captured_by: "microsoft", - nbn: bubble.nbn, - pbn: bubble.pbn, - rn: bubble.rn, - pano: true - }; - var feature = { - geometry: { - coordinates: [bubble.lo, bubble.la], - type: "Point" - }, - properties: d, - type: "Feature" - }; - var bubbleId = bubble.id; - cache.points[bubbleId] = feature; - cache.forImageKey[bubbleId] = bubbleId; - // return false; // because no `d` data worth loading into an rbush - return { - minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d - }; - - }).filter(Boolean); - //console.log("bubble features: ", features); - cache.rtree.load(features); - //console.log('cache.nextPage[tile.id]', cache.nextPage[tile.id]); - if (which === 'bubbles'){ - dispatch.call('loadedBubbles'); - } - // if (bubbles.length === maxResults) { // more pages to load - // cache.nextPage[tile.id] = nextPage + 1; - // loadNextTilePage(which, currZoom, url, tile); - // } else { - // cache.nextPage[tile.id] = Infinity; // no more pages to load - // } - }); + var cache = _bubbleCache[which], + nextPage = cache.nextPage[tile.id] || 0, + id = tile.id + ',' + String(nextPage); + if (cache.loaded[id] || cache.inflight[id]) return; + cache.inflight[id] = getBubbles(url, tile, function(bubbles){ + console.log("GET Response - bubbles: ", bubbles); + cache.loaded[id] = true; + delete cache.inflight[id]; + if (!bubbles) return; + + // [].shift() removes the first element, some statistics info, not a bubble point + bubbles.shift(); + console.log('bubbles.length', bubbles.length); + var features = bubbles.map(function (bubble) { + var loc = [bubble.lo, bubble.la]; + var d = { + loc: loc, + key: bubble.id, + ca: bubble.he, + captured_at: bubble.cd, + captured_by: "microsoft", + nbn: bubble.nbn, + pbn: bubble.pbn, + rn: bubble.rn, + pano: true + }; + var feature = { + geometry: { + coordinates: [bubble.lo, bubble.la], + type: "Point" + }, + properties: d, + type: "Feature" + }; + var bubbleId = bubble.id; + cache.points[bubbleId] = feature; + cache.forImageKey[bubbleId] = bubbleId; + return { + minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d + }; + + }).filter(Boolean); + cache.rtree.load(features); + if (which === 'bubbles'){ + dispatch.call('loadedBubbles'); + } + }); } +/** + * getBubbles() handles the request to the server for a tile extent of 'bubbles' (streetside image locations). + */ function getBubbles(url, tile, callback) { - console.log('services - streetside - getBubbles()'); + //console.log('services - streetside - getBubbles()'); var rect = tile.extent.rectangle(); var urlForRequest = url + utilQsString({ n: rect[3], s: rect[1], e: rect[2], w: rect[0], - appkey: appkey, + appkey: bubbleAppKey, jsCallback: '{callback}' }); - console.log('url for request',urlForRequest); jsonpRequest(urlForRequest, function (data) { if (!data || data.error) { callback(null); @@ -239,26 +204,9 @@ function getBubbles(url, tile, callback) { }); } -// extract links to pages of API results -function parsePagination(links) { - return links.split(',').map(function (rel) { - var elements = rel.split(';'); - if (elements.length === 2) { - return [ - /<(.+)>/.exec(elements[0])[1], - /rel="(.+)"/.exec(elements[1])[1] - ]; - } else { - return ['', '']; - } - }).reduce(function (pagination, val) { - pagination[val[1]] = val[0]; - return pagination; - }, {}); -} - - -// partition viewport into `psize` x `psize` regions +/** + * partitionViewport() partition viewport into `psize` x `psize` regions. + */ function partitionViewport(psize, projection) { var dimensions = projection.clipExtent()[1]; psize = psize || 16; @@ -278,8 +226,9 @@ function partitionViewport(psize, projection) { return partitions; } - -// no more than `limit` results per partition. +/** + * searchLimited(). + */ function searchLimited(psize, limit, projection, rtree) { //console.log('services - streetside - searchLimited()'); limit = limit || 3; @@ -293,21 +242,6 @@ function searchLimited(psize, limit, projection, rtree) { .slice(0, limit) .map(function (d) { return d.data; }); })); - // console.timeEnd('previous'); - - // console.time('new'); - // results = partitions.reduce(function(result, extent) { - // var found = rtree.search(extent.bbox()) - // .map(function(d) { return d.data; }) - // .sort(function(a, b) { - // return a.loc[1] - b.loc[1]; - // // return a.key.localeCompare(b.key); - // }) - // .slice(0, limit); - - // return (found.length ? result.concat(found) : result); - // }, []); - // console.timeEnd('new'); return results; } @@ -315,17 +249,23 @@ function searchLimited(psize, limit, projection, rtree) { export default { - // initialize streetside + + /** + * init() initialize streetside. + */ init: function () { - if (!_mlyCache) { + if (!_bubbleCache) { this.reset(); } this.event = utilRebind(this, dispatch, 'on'); }, - // reset the cache + + /** + * reset() reset the cache. + */ reset: function () { - var cache = _mlyCache; + var cache = _bubbleCache; if (cache) { if (cache.bubbles && cache.bubbles.inflight) { @@ -333,33 +273,35 @@ export default { } } - _mlyCache = { + _bubbleCache = { bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} } }; - - _mlySelectedImage = null; - _mlyClicks = []; }, - //called by update() in svg - services.js + /** + * bubbles() + */ bubbles: function (projection) { //console.log('services - streetside - bubbles()'); var psize = 32, limit = 3; - return searchLimited(psize, limit, projection, _mlyCache.bubbles.rtree); + return searchLimited(psize, limit, projection, _bubbleCache.bubbles.rtree); }, - - - // this is called a bunch of times repeatedly + /** + * loadBubbles() + */ loadBubbles: function (projection) { - //console.log('services - streetside - loadImages()'); + //console.log('services - streetside - loadBubbles()'); loadTiles('bubbles', bubbleApi, projection); }, - // create the streeside viewer + /** + * loadViewer() create the streeside viewer. + */ loadViewer: function (context) { //console.log('services - streetside - loadViewer()'); - // create ms-wrapper a photo wrapper class + + // create ms-wrapper, a photo wrapper class var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper') .data([0]); @@ -375,19 +317,12 @@ export default { wrapEnter .append('div') .attr('id','viewer-streetside'); - //.attr('class','photo-viewer-streetside'); // inject div to support photo attribution into ms-wrapper wrapEnter .append('div') .attr('class', 'photo-attribution-streetside fillD'); - // // inject child div for the pannellum viewer - // var wrap2 = d3_select('#viewer-streetside-wrapper').selectAll('#streetside-viewer').data([0]); - // wrap2.enter() - // .append('div') - // .attr('id','viewer-streetside'); - // load streetside pannellum viewer css d3_select('head').selectAll('#streetside-viewercss') .data([0]) @@ -395,7 +330,7 @@ export default { .append('link') .attr('id', 'streetside-viewercss') .attr('rel', 'stylesheet') - .attr('href', context.asset(streetsideViewerCss)); + .attr('href', context.asset(pannellumViewerCss)); // load streetside pannellum viewer js d3_select('head').selectAll('#streetside-viewerjs') @@ -403,10 +338,12 @@ export default { .enter() .append('script') .attr('id', 'streetside-viewerjs') - .attr('src', context.asset(streetsideViewer)); + .attr('src', context.asset(pannellumViewer)); }, - + /** + * showViewer() + */ showViewer: function () { //console.log('services - streetside - showViewer()'); var wrap = d3_select('#photoviewer') @@ -422,21 +359,15 @@ export default { wrap .selectAll('.photo-wrapper.ms-wrapper') .classed('hide', false); - - //_mlyViewer.resize(); } return this; }, - + /** + * hideViewer() + */ hideViewer: function () { - _mlySelectedImage = null; - - if (!_mlyFallback && _mlyViewer) { - _mlyViewer.getComponent('sequence').stop(); - } - var viewer = d3_select('#photoviewer'); if (!viewer.empty()) viewer.datum(null); @@ -451,31 +382,13 @@ export default { return this.setStyles(null, true); }, - // Pass the image datum itself in `d` or the `imageKey` string. - // This allows images to be selected from places that dont have access - // to the full image datum (like the street signs layer or the js viewer) - selectImage: function (d, imageKey, fromViewer) { - //console.log('services - streetside - selectIamge(); d = ',d); - //console.log('services - streetside - selectIamge(); imageKey = ',imageKey); - //console.log('services - streetside - selectIamge(); fromViewer = ',fromViewer); - if (!d && imageKey) { - // If the user clicked on something that's not an image marker, we - // might get in here.. Cache lookup can fail, e.g. if the user - // clicked a streetsign, but images are loading slowly asynchronously. - // We'll try to carry on anyway if there is no datum. There just - // might be a delay before user sees detections, captured_at, etc. - d = _mlyCache.bubbles.forImageKey[imageKey]; - } - - _mlySelectedImage = d; + /** + * selectImage(). + */ + selectImage: function (d) { var viewer = d3_select('#photoviewer'); if (!viewer.empty()) viewer.datum(d); - imageKey = (d && d.key) || imageKey; - if (!fromViewer && imageKey) { - _mlyClicks.push(imageKey); - } - this.setStyles(null, true); var wrap = d3_select('#photoviewer .ms-wrapper'); @@ -511,15 +424,15 @@ export default { '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17') .text('Report a privacy concern with this image'); - //this.updateDetections(d); - var bubbleIdQuadKey = d.key.toString(4); var paddingNeeded = 16 - bubbleIdQuadKey.length; for (var i = 0; i < paddingNeeded ;i++) { bubbleIdQuadKey = "0" + bubbleIdQuadKey; } - var imgLocIdxArr = ['01','02','03','10','11','12']; //Order matters here: front=01, right=02, back=03, left=10 up=11,= down=12 + + //Order matters here: front=01, right=02, back=03, left=10 up=11,= down=12 + var imgLocIdxArr = ['01','02','03','10','11','12']; var imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey; var imgUrlSuffix = '.jpg?g=6338&n=z'; pannellum.viewer('viewer-streetside', { @@ -536,14 +449,12 @@ export default { "autoLoad": true }); } - ////console.log("clicked a streetside image: ", d); return this; }, - getSelectedImage: function () { - return _mlySelectedImage; - }, - + /** + * setStyles(). + */ setStyles: function (hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') @@ -573,16 +484,10 @@ export default { return this; }, - + /** + * cache(). + */ cache: function () { - return _mlyCache; - }, - - - signDefs: function (_) { - if (!arguments.length) return _mlySignDefs; - _mlySignDefs = _; - return this; + return _bubbleCache; } - }; diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 612f4135e2..860efe09f6 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -7,11 +7,13 @@ export function svgStreetside(projection, context, dispatch) { var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000); var minZoom = 16; var minMarkerZoom = 16; - var minViewfieldZoom = 16; + var minViewfieldZoom = 19; var layer = d3_select(null); var _streetside; - + /** + * init(). + */ function init() { if (svgStreetside.initialized) return; // run once svgStreetside.enabled = false; @@ -19,7 +21,9 @@ export function svgStreetside(projection, context, dispatch) { console.log("svg: streetside initialized...."); } - + /** + * getService(). + */ function getService() { if (services.streetside && !_streetside) { _streetside = services.streetside; @@ -31,7 +35,9 @@ export function svgStreetside(projection, context, dispatch) { return _streetside; } - + /** + * showLayer(). + */ function showLayer() { console.log('svg - streetside - showLayer()'); var service = getService(); @@ -48,7 +54,9 @@ export function svgStreetside(projection, context, dispatch) { .on('end', function () { dispatch.call('change'); }); } - + /** + * hideLayer(). + */ function hideLayer() { var service = getService(); if (service) { @@ -64,44 +72,55 @@ export function svgStreetside(projection, context, dispatch) { .on('end', editOff); } - + /** + * editOn(). + */ function editOn() { layer.style('display', 'block'); } - + /** + * editOff(). + */ function editOff() { layer.selectAll('.viewfield-group').remove(); layer.style('display', 'none'); } - + /** + * click() Handles 'bubble' point click event. + */ function click(d) { - console.log("svg: map was clicked with streetside on, here is the passed object: ", d); + console.log("svg: map was clicked with streetside on. Passed obj: ", d); var service = getService(); if (!service) return; service .selectImage(d) - //.updateViewer(d.key, context); .showViewer(); context.map().centerEase(d.loc); } - + /** + * mouseover(). + */ function mouseover(d) { var service = getService(); if (service) service.setStyles(d); } - + /** + * mouseout(). + */ function mouseout() { var service = getService(); if (service) service.setStyles(null); } - + /** + * transform(). + */ function transform(d) { var t = svgPointTransform(projection)(d); if (d.ca) { @@ -110,42 +129,20 @@ export function svgStreetside(projection, context, dispatch) { return t; } - + /** + * update(). + */ function update() { console.log("svg - update()"); var viewer = d3_select('#photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); - var z = ~~context.map().zoom(); - - //console.log('z = ', z); - //console.log('minMarkerZoom = ', minMarkerZoom); - var showMarkers = (z >= minMarkerZoom); var showViewfields = (z >= minViewfieldZoom); - var service = getService(); + // gets the features from service cache - //var sequences = (service ? service.sequences(projection) : []); - //var images = (service && showMarkers ? service.images(projection) : []); var bubbles = (service && showMarkers ? service.bubbles(projection) : []); - console.log("svg: update() bubbles", bubbles); - // console.log(" svg: update() images", images); - // var traces = layer.selectAll('.sequences').selectAll('.sequence') - // .data(sequences, function(d) { return d.properties.key; }); - - // // exit - // traces.exit() - // .remove(); - - // // enter/update - // traces = traces.enter() - // .append('path') - // .attr('class', 'sequence') - // .merge(traces) - // .attr('d', svgPath(projection).geojson); - - var groups = layer.selectAll('.markers').selectAll('.viewfield-group') .data(bubbles, function(d) { return d.key; }); @@ -171,7 +168,7 @@ export function svgStreetside(projection, context, dispatch) { .sort(function(a, b) { return (a === selected) ? 1 : (b === selected) ? -1 - : b.loc[1] - a.loc[1]; // sort Y + : b.loc[1] - a.loc[1]; }) .attr('transform', transform) .select('.viewfield-scale'); @@ -191,8 +188,10 @@ export function svgStreetside(projection, context, dispatch) { viewfields.exit() .remove(); - viewfields.enter() // viewfields may or may not be drawn... - .insert('path', 'circle') // but if they are, draw below the circles + // viewfields may or may not be drawn... + // but if they are, draw below the circles + viewfields.enter() + .insert('path', 'circle') .attr('class', 'viewfield') .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') .attr('d', viewfieldPath); @@ -207,13 +206,16 @@ export function svgStreetside(projection, context, dispatch) { } } - //drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called. - //'svgStreetside()' is called from index.js (ln) + /** + * drawImages() + * drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called. + * 'svgStreetside()' is called from index.js + */ function drawImages(selection) { //console.log("svg - streetside - drawImages(); selection: ", selection); var enabled = svgStreetside.enabled, service = getService(); - //console.log("svg - streetside - drawImages(); svgStreetside enabled? ", enabled); + layer = selection.selectAll('.layer-streetside-images') .data(service ? [0] : []); @@ -225,10 +227,6 @@ export function svgStreetside(projection, context, dispatch) { .attr('class', 'layer-streetside-images') .style('display', enabled ? 'block' : 'none'); - // layerEnter - // .append('g') - // .attr('class', 'sequences'); - layerEnter .append('g') .attr('class', 'markers'); @@ -240,7 +238,6 @@ export function svgStreetside(projection, context, dispatch) { if (service && ~~context.map().zoom() >= minZoom) { editOn(); update(); - // console.log("svg: calling loadImages...."); service.loadBubbles(projection); } else { @@ -249,7 +246,9 @@ export function svgStreetside(projection, context, dispatch) { } } - + /** + * drawImages.enabled(). + */ drawImages.enabled = function(_) { //console.log('svg - streetside - drawImages.enabled()'); if (!arguments.length) return svgStreetside.enabled; @@ -263,12 +262,13 @@ export function svgStreetside(projection, context, dispatch) { return this; }; - + /** + * drawImages.supported(). + */ drawImages.supported = function() { return !!getService(); }; - - + init(); return drawImages;