playing with the panormax API

This commit is contained in:
mattiapezzotti
2024-05-29 10:55:15 +02:00
parent ab3158e48a
commit 0ac62ba2b6
+35 -39
View File
@@ -7,15 +7,15 @@ import RBush from 'rbush';
import { VectorTile } from '@mapbox/vector-tile';
import { utilRebind, utilTiler, utilQsString, utilStringQs, utilSetTransform } from '../util';
import {geoExtent, geoScaleToZoom} from '../geo';
import {localizer} from '../core/localizer';
import { geoExtent, geoScaleToZoom } from '../geo';
import { localizer } from '../core/localizer';
const apiUrl = 'https://panoramax.openstreetmap.fr/api';
const tileUrl = apiUrl + '/map/{z}/{x}/{y}.pbf';
const apiUrl = 'https://end.mapilio.com';
const imageBaseUrl = 'https://cdn.mapilio.com/im';
const baseTileUrl = 'https://geo.mapilio.com/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=mapilio:';
const pointLayer = 'map_points';
const lineLayer = 'map_roads_line';
const tileStyle = '&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}';
const minZoom = 14;
const dispatch = d3_dispatch('loadedImages', 'loadedLines');
@@ -67,7 +67,7 @@ function searchLimited(limit, projection, rtree) {
}, []);
}
// Load all data for the specified type from Mapilio vector tiles
// Load all data for the specified type from Panoramax vector tiles
function loadTiles(which, url, maxZoom, projection) {
const tiler = utilTiler().zoomExtent([minZoom, maxZoom]).skipNullIsland(true);
const tiles = tiler.getTiles(projection);
@@ -182,7 +182,7 @@ function loadTileDataToCache(data, tile) {
function getImageData(imageId, sequenceId) {
return fetch(apiUrl + `/api/sequence-detail?sequence_uuid=${sequenceId}`, {method: 'GET'})
return fetch(apiUrl + `/api/collections/${sequenceId}`, {method: 'GET'})
.then(function (response) {
if (!response.ok) {
throw new Error(response.status + ' ' + response.statusText);
@@ -198,7 +198,7 @@ function getImageData(imageId, sequenceId) {
export default {
// Initialize Mapilio
// Initialize Panoramax
init: function() {
if (!_cache) {
this.reset();
@@ -235,13 +235,13 @@ export default {
// Load images in the visible area
loadImages: function(projection) {
let url = baseTileUrl + pointLayer + tileStyle;
let url = tileUrl;
loadTiles('images', url, 14, projection);
},
// Load line in the visible area
loadLines: function(projection) {
let url = baseTileUrl + lineLayer + tileStyle;
let url = tileUrl;
loadTiles('line', url, 14, projection);
},
@@ -290,8 +290,8 @@ export default {
const selectedSequenceId = _activeImage && _activeImage.sequence_id;
const selectedImageId = _activeImage && _activeImage.id;
const markers = context.container().selectAll('.layer-mapilio .viewfield-group');
const sequences = context.container().selectAll('.layer-mapilio .sequence');
const markers = context.container().selectAll('.layer-panoramax .viewfield-group');
const sequences = context.container().selectAll('.layer-panoramax .sequence');
markers.classed('highlighted', function(d) { return d.id === hoveredImageId; })
.classed('hovered', function(d) { return d.id === hoveredImageId; })
@@ -307,7 +307,7 @@ export default {
if (!window.mocha) {
var hash = utilStringQs(window.location.hash);
if (imageKey) {
hash.photo = 'mapilio/' + imageKey;
hash.photo = 'panoramax/' + imageKey;
} else {
delete hash.photo;
}
@@ -327,7 +327,7 @@ export default {
};
options.scenes[sceneID] = _sceneOptions;
_pannellumViewer = window.pannellum.viewer('ideditor-viewer-mapilio-pnlm', options);
_pannellumViewer = window.pannellum.viewer('ideditor-viewer-panoramax-pnlm', options);
},
selectImage: function (context, id) {
@@ -347,7 +347,7 @@ export default {
if (!d) return this;
let wrap = context.container().select('.photoviewer .mapilio-wrapper');
let wrap = context.container().select('.photoviewer .panoramax-wrapper');
let attribution = wrap.selectAll('.photo-attribution').text('');
if (d.capture_time) {
@@ -365,8 +365,8 @@ export default {
.append('a')
.attr('class', 'image-link')
.attr('target', '_blank')
.attr('href', `https://mapilio.com/app?lat=${d.loc[1]}&lng=${d.loc[0]}&zoom=17&pId=${d.id}`)
.text('mapilio.com');
.attr('href', apiUrl + '/pictures/' + d.id + '/hd.jpg')
.text('panoramax.com');
wrap
.transition()
@@ -429,7 +429,7 @@ export default {
_pannellumViewer = null;
}
let wrap = context.container().select('#ideditor-viewer-mapilio-simple');
let wrap = context.container().select('#ideditor-viewer-panoramax-simple');
let imgWrap = wrap.select('img');
@@ -446,7 +446,7 @@ export default {
let that = this;
let imgWrap = context.container().select('#ideditor-viewer-mapilio-simple > img');
let imgWrap = context.container().select('#ideditor-viewer-panoramax-simple > img');
if (!imgWrap.empty()) {
imgWrap.remove();
@@ -454,12 +454,12 @@ export default {
if (_loadViewerPromise) return _loadViewerPromise;
let wrap = context.container().select('.photoviewer').selectAll('.mapilio-wrapper')
let wrap = context.container().select('.photoviewer').selectAll('.panoramax-wrapper')
.data([0]);
let wrapEnter = wrap.enter()
.append('div')
.attr('class', 'photo-wrapper mapilio-wrapper')
.attr('class', 'photo-wrapper panoramax-wrapper')
.classed('hide', true)
.on('dblclick.zoom', null);
@@ -471,7 +471,7 @@ export default {
.append('div')
.attr('class', 'photo-controls-wrap')
.append('div')
.attr('class', 'photo-controls-mapilio');
.attr('class', 'photo-controls-panoramax');
controlsEnter
.append('button')
@@ -487,19 +487,19 @@ export default {
wrapEnter
.append('div')
.attr('id', 'ideditor-viewer-mapilio-pnlm');
.attr('id', 'ideditor-viewer-panoramax-pnlm');
wrapEnter
.append('div')
.attr('id', 'ideditor-viewer-mapilio-simple-wrap')
.attr('id', 'ideditor-viewer-panoramax-simple-wrap')
.call(imgZoom.on('zoom', zoomPan))
.append('div')
.attr('id', 'ideditor-viewer-mapilio-simple');
.attr('id', 'ideditor-viewer-panoramax-simple');
// Register viewer resize handler
context.ui().photoviewer.on('resize.mapilio', () => {
context.ui().photoviewer.on('resize.panoramax', () => {
if (_pannellumViewer) {
_pannellumViewer.resize();
}
@@ -517,11 +517,11 @@ export default {
const head = d3_select('head');
// load pannellum-viewercss
head.selectAll('#ideditor-mapilio-viewercss')
head.selectAll('#ideditor-panoramax-viewercss')
.data([0])
.enter()
.append('link')
.attr('id', 'ideditor-mapilio-viewercss')
.attr('id', 'ideditor-panoramax-viewercss')
.attr('rel', 'stylesheet')
.attr('crossorigin', 'anonymous')
.attr('href', context.asset(pannellumViewerCSS))
@@ -531,11 +531,11 @@ export default {
});
// load pannellum-viewerjs
head.selectAll('#ideditor-mapilio-viewerjs')
head.selectAll('#ideditor-panoramax-viewerjs')
.data([0])
.enter()
.append('script')
.attr('id', 'ideditor-mapilio-viewerjs')
.attr('id', 'ideditor-panoramax-viewerjs')
.attr('crossorigin', 'anonymous')
.attr('src', context.asset(pannellumViewerJS))
.on('load.serviceMapilio', loaded)
@@ -565,7 +565,7 @@ export default {
function zoomPan(d3_event) {
var t = d3_event.transform;
context.container().select('.photoviewer #ideditor-viewer-mapilio-simple')
context.container().select('.photoviewer #ideditor-viewer-panoramax-simple')
.call(utilSetTransform, t.x, t.y, t.k);
}
@@ -576,24 +576,21 @@ export default {
let wrap = context.container().select('.photoviewer')
.classed('hide', false);
let isHidden = wrap.selectAll('.photo-wrapper.mapilio-wrapper.hide').size();
let isHidden = wrap.selectAll('.photo-wrapper.panoramax-wrapper.hide').size();
if (isHidden) {
wrap
.selectAll('.photo-wrapper:not(.mapilio-wrapper)')
.selectAll('.photo-wrapper:not(.panoramax-wrapper)')
.classed('hide', true);
wrap
.selectAll('.photo-wrapper.mapilio-wrapper')
.selectAll('.photo-wrapper.panoramax-wrapper')
.classed('hide', false);
}
return this;
},
/**
* hideViewer()
*/
hideViewer: function (context) {
let viewer = context.container().select('.photoviewer');
if (!viewer.empty()) viewer.datum(null);
@@ -613,7 +610,6 @@ export default {
return this.setStyles(context, null);
},
// Return the current cache
cache: function() {
return _cache;
}