From 0d054525e972c8d5b8d9e36da58a16df6d5c1746 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Mon, 15 Apr 2024 23:34:45 -0500 Subject: [PATCH 1/9] Add all map support --- controllers/IndexController.php | 68 +++++++++++++----------- views/public/javascripts/walking-tour.js | 57 +++++++++++++++++--- 2 files changed, 86 insertions(+), 39 deletions(-) diff --git a/controllers/IndexController.php b/controllers/IndexController.php index 31ae393..21c6606 100755 --- a/controllers/IndexController.php +++ b/controllers/IndexController.php @@ -29,13 +29,13 @@ public function publicTours() $results = $tour_table->fetchObjects($select); // Build an array with $_tourTypes = array('id' => array(), 'color' => array()); - foreach ($results as $tour){ - if($tour['public']==1 || current_user()->role == "super"){ - $_tourTypes['id'][$tour['id']] = $tour['title']; - $_tourTypes['color'][$tour['id']] = $tour['color']; - $_tourTypes['description'][$tour['id']] = $tour['description']; - $_tourTypes['credits'][$tour['id']] = $tour['credits']; - } + foreach ($results as $tour) { + if ($tour['public'] == 1 || current_user()->role == "super") { + $_tourTypes['id'][$tour['id']] = $tour['title']; + $_tourTypes['color'][$tour['id']] = $tour['color']; + $_tourTypes['description'][$tour['id']] = $tour['description']; + $_tourTypes['credits'][$tour['id']] = $tour['credits']; + } } return $_tourTypes; @@ -66,7 +66,7 @@ public function indexAction() ->appendStylesheet(src('walking-tour', 'css', 'css')); } - public function mapConfigAction() + public function mapConfigAction() { // Process only AJAX requests. if (!$this->_request->isXmlHttpRequest()) { @@ -86,8 +86,8 @@ public function mapConfigAction() } /* - * Beginning to separate tours into separate features - */ + * Beginning to separate tours into separate features + */ public function queryAction() { // Process only AJAX requests. @@ -98,29 +98,29 @@ public function queryAction() $db = $this->_helper->db->getDb(); $joins = array("$db->Item AS items ON items.id = locations.item_id"); $wheres = array("items.public = 1"); - $prefix=$db->prefix; + $prefix = $db->prefix; // Filter public tours' items $request_tour_id = $this->publicTours(); $colorArray = array(); - $tourItemTable = $db->getTable( 'TourItem' ); + $tourItemTable = $db->getTable('TourItem'); $tourItemsIDs = array(); $returnArray = array(); - foreach($request_tour_id['id'] as $tour_id => $tour_title){ - if($tour_id != 0){ - $tourItemsDat = $tourItemTable->fetchObjects( "SELECT item_id FROM ".$prefix."tour_items + foreach ($request_tour_id['id'] as $tour_id => $tour_title) { + if ($tour_id != 0) { + $tourItemsDat = $tourItemTable->fetchObjects("SELECT item_id FROM " . $prefix . "tour_items WHERE tour_id = $tour_id"); } else { - $tourItemsDat = $tourItemTable->fetchObjects( "SELECT item_id FROM ".$prefix."tour_items"); + $tourItemsDat = $tourItemTable->fetchObjects("SELECT item_id FROM " . $prefix . "tour_items"); } $tourItemsIDs[$tour_id] = array(); - foreach ($tourItemsDat as $dat){ + foreach ($tourItemsDat as $dat) { array_push($tourItemsIDs[$tour_id], (int) $dat["item_id"]); } } - foreach($tourItemsIDs as $tour_id => $item_array){ + foreach ($tourItemsIDs as $tour_id => $item_array) { $tourItemsID = implode(", ", $item_array); $wheres = array("items.public = 1"); @@ -143,7 +143,7 @@ public function queryAction() for ($i = 0; $i < count($item_array); $i++) { for ($j = 0; $j < count($dbItems); $j++) { if ($item_array[$i] == $dbItems[$j]['id']) { - array_push( $orderedItems, $dbItems[$j] ); + array_push($orderedItems, $dbItems[$j]); } } } @@ -158,7 +158,7 @@ public function queryAction() ), 'properties' => array( 'id' => $row['id'], - "marker-color"=> $request_tour_id['color'][$tour_id] + "marker-color" => $request_tour_id['color'][$tour_id] ), ); } @@ -168,7 +168,7 @@ public function queryAction() $returnArray[$tour_id]["Credits"] = $request_tour_id['credits'][$tour_id]; } $this->_helper->json($returnArray); - + } /** @@ -184,12 +184,12 @@ public function getItemAction() $tour_id = $this->_request->getParam('tour'); $db = $this->_helper->db->getDb(); - $tourItemTable = $db->getTable( 'TourItem' ); - $prefix=$db->prefix; + $tourItemTable = $db->getTable('TourItem'); + $prefix = $db->prefix; - $tourItem = $tourItemTable->fetchObjects( "SELECT * FROM ".$prefix."tour_items - WHERE tour_id = $tour_id AND item_id = $item_id" ); + $tourItem = $tourItemTable->fetchObjects("SELECT * FROM " . $prefix . "tour_items + WHERE tour_id = $tour_id AND item_id = $item_id"); $exhibit_id = $tourItem[0]["exhibit_id"]; @@ -202,19 +202,23 @@ public function getItemAction() 'date' => metadata($item, array('Dublin Core', 'Date'), array('all' => true)), 'thumbnail' => item_image('square_thumbnail', array(), 0, $item), 'fullsize' => item_image('fullsize', array('style' => 'max-width: 100%; height: auto;'), 0, $item), - 'url' => url(array('module' => 'default', - 'controller' => 'items', - 'action' => 'show', - 'id' => $item['id']), - 'id'), + 'url' => url( + array( + 'module' => 'default', + 'controller' => 'items', + 'action' => 'show', + 'id' => $item['id'] + ), + 'id' + ), "exhibitUrl" => "" ); if (plugin_is_active('DublinCoreExtended')) { $data['abstract'] = metadata($item, array('Dublin Core', 'Abstract'), array('no-escape' => true)); } - if (plugin_is_active('ExhibitBuilder')){ + if (plugin_is_active('ExhibitBuilder')) { $exhibit = get_records('Exhibit', array('id' => $exhibit_id)); - if ($exhibit && count($exhibit) == 1){ + if ($exhibit && count($exhibit) == 1) { $data["exhibitUrl"] = exhibit_builder_exhibit_uri($exhibit[0]); } } diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index 9a86138..f01a8c2 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -1,8 +1,21 @@ -$(document).ready(function () { - walkingTourJs() -}); +const allmapsAnnotation = import("https://unpkg.com/@allmaps/annotation?module") +const allmapsTransform = import("https://unpkg.com/@allmaps/transform?module") + +Promise.all([allmapsAnnotation, allmapsTransform ]) + .then(([allmapsAnnotation, allmapsTransform]) => { + // Both modules loaded successfully + // Use the imported modules + $(document).ready(function () { + walkingTourJs(allmapsAnnotation, allmapsTransform) + }); + }) + .catch((error) => { + // An error occurred while loading one of the modules + console.error('Error loading modules:', error); + }); + -function walkingTourJs() { +function walkingTourJs(allmapsAnnotation, allmapsTransform) { var imported = document.createElement("script"); document.head.appendChild(imported); // Set map height to be window height minus header height. @@ -10,6 +23,7 @@ function walkingTourJs() { $('#map').css('height', windowheight - 54); var MAP_URL_TEMPLATE = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'; + const annotationUrl = 'https://annotations.allmaps.org/manifests/47574ee029cca631' var MAP_CENTER; var MAP_ZOOM; // MAP_ZOOM controls the default zoom of the map @@ -22,6 +36,7 @@ function walkingTourJs() { var historicMapLayer; var markers; var jqXhr; + var transformer; var locationMarker; var markerData; var allItems = {}; @@ -242,6 +257,24 @@ function walkingTourJs() { window.onload = function () { jqXhr = $.post('walking-tour/index/map-config', function (response) { mapSetUp(response); + fetch(annotationUrl) + .then(response => { + // Check if the request was successful + if (!response.ok) { + throw new Error('Network response was not ok'); + } + // Parse the response as JSON + return response.json(); + }) + .then(data => { + const maps = allmapsAnnotation.parseAnnotation(data) + transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); + }) + .catch(error => { + // Handle any errors that occurred during the fetch + console.error('Fetch error:', error); + }); + doQuery(); }) }; @@ -292,9 +325,8 @@ function walkingTourJs() { map.addControl(new extentControl()); map.attributionControl.setPrefix('Tiles © Esri'); - // const annotationUrl = 'https://annotations.allmaps.org/manifests/47574ee029cca631' - // const warpedMapLayer = new Allmaps.WarpedMapLayer(annotationUrl) - // map.addLayer(warpedMapLayer); + const warpedMapLayer = new Allmaps.WarpedMapLayer(annotationUrl) + map.addLayer(warpedMapLayer); map.on('zoomend', function () { if (map.getZoom() == MAP_MIN_ZOOM) { @@ -396,10 +428,21 @@ function walkingTourJs() { var numMarker = 1; var response = value["Data"]; var itemIDList = []; + console.log(transformer) + console.log(response.features) response.features.forEach(ele => { + const test = transformer.transformForwardAsGeojson( + ele.geometry + ) + console.log(test) itemIDList.push(ele.properties.id) + return { + ...ele, + geometry: test + } }) + console.log(response.features) tourToItem[tourId] = itemIDList; markerList = [] var geoJsonLayer = L.geoJson(response.features, { From ab120ef1bb449dc866012ba54518d7b0ebb7017d Mon Sep 17 00:00:00 2001 From: tutingjun Date: Tue, 16 Apr 2024 12:32:35 -0500 Subject: [PATCH 2/9] Update transform param --- views/public/javascripts/walking-tour.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index f01a8c2..bf95e61 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -36,7 +36,6 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { var historicMapLayer; var markers; var jqXhr; - var transformer; var locationMarker; var markerData; var allItems = {}; @@ -268,14 +267,13 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { }) .then(data => { const maps = allmapsAnnotation.parseAnnotation(data) - transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); + const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); + doQuery(transformer); }) .catch(error => { // Handle any errors that occurred during the fetch console.error('Fetch error:', error); }); - - doQuery(); }) }; @@ -376,7 +374,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { * * Call only once during set up */ - function doQuery() { + function doQuery(transformer) { const markerFontHtmlStyles = ` transform: rotate(-45deg); color:white; @@ -431,10 +429,10 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { console.log(transformer) console.log(response.features) - response.features.forEach(ele => { - const test = transformer.transformForwardAsGeojson( + response.features.map(ele => { + const test = transformer.transformBackward( ele.geometry - ) + ) console.log(test) itemIDList.push(ele.properties.id) return { From a5ab1fecbcba19e403a79082ee0180ef1160d65b Mon Sep 17 00:00:00 2001 From: tutingjun Date: Sun, 28 Apr 2024 20:36:57 -0500 Subject: [PATCH 3/9] display iiif --- README.md | 6 + controllers/IndexController.php | 1 + views/public/javascripts/leaflet-iiif.js | 241 ++++++++++ views/public/javascripts/walking-tour.js | 547 +++++++++++++++++------ 4 files changed, 666 insertions(+), 129 deletions(-) create mode 100644 views/public/javascripts/leaflet-iiif.js diff --git a/README.md b/README.md index 0186a33..943f5f2 100755 --- a/README.md +++ b/README.md @@ -69,3 +69,9 @@ One annoying issue we found is that there is some coupling between the MallMap t - [x] Representation for no exhibit for tour item - [ ] Padding on the dropdown menu - [ ] Historical Map + +### Allmaps References + +Leaflet without geographic coordinates: https://leafletjs.com/examples/crs-simple/crs-simple.html +https://observablehq.com/d/7db1214479eeeee0 +https://observablehq.com/@allmaps/using-allmaps-to-draw-geojson-on-a-iiif-image diff --git a/controllers/IndexController.php b/controllers/IndexController.php index 61dc0b9..9a68ba6 100755 --- a/controllers/IndexController.php +++ b/controllers/IndexController.php @@ -58,6 +58,7 @@ public function indexAction() ->appendFile(src('modernizr.custom.63332', 'javascripts', 'js')) ->appendFile(src('Polyline.encoded', 'javascripts', 'js')) ->appendFile('//cdn.jsdelivr.net/npm/@allmaps/leaflet/dist/bundled/allmaps-leaflet-1.9.umd.js') + ->appendFile(src('leaflet-iiif', 'javascripts', 'js')) ->appendFile(src('walking-tour', 'javascripts', 'js')); $this->view->headLink() ->appendStylesheet('//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css', 'all') diff --git a/views/public/javascripts/leaflet-iiif.js b/views/public/javascripts/leaflet-iiif.js new file mode 100644 index 0000000..ee5ae09 --- /dev/null +++ b/views/public/javascripts/leaflet-iiif.js @@ -0,0 +1,241 @@ +/* + * Leaflet-IIIF 1.1.1 + * IIIF Viewer for Leaflet + * by Jack Reed, @mejackreed + */ + +L.TileLayer.Iiif = L.TileLayer.extend({ + options: { + continuousWorld: true, + tileSize: 256, + updateWhenIdle: true, + tileFormat: 'jpg', + fitBounds: true + }, + + initialize: function(url, options) { + options = typeof options !== 'undefined' ? options : {}; + + if (options.maxZoom) { + this._customMaxZoom = true; + } + + // Check for explicit tileSize set + if (options.tileSize) { + this._explicitTileSize = true; + } + + // Check for an explicit quality + if (options.quality) { + this._explicitQuality = true; + } + + options = L.setOptions(this, options); + this._infoDeferred = new $.Deferred(); + this._infoUrl = url; + this._baseUrl = this._templateUrl(); + this._getInfo(); + }, + getTileUrl: function(coords) { + var _this = this, + x = coords.x, + y = (coords.y), + zoom = _this._getZoomForUrl(), + scale = Math.pow(2, _this.maxNativeZoom - zoom), + tileBaseSize = _this.options.tileSize * scale, + minx = (x * tileBaseSize), + miny = (y * tileBaseSize), + maxx = Math.min(minx + tileBaseSize, _this.x), + maxy = Math.min(miny + tileBaseSize, _this.y); + + var xDiff = (maxx - minx); + var yDiff = (maxy - miny); + + return L.Util.template(this._baseUrl, L.extend({ + format: _this.options.tileFormat, + quality: _this.quality, + region: [minx, miny, xDiff, yDiff].join(','), + rotation: 0, + size: Math.ceil(xDiff / scale) + ',' + }, this.options)); + }, + onAdd: function(map) { + var _this = this; + + // Wait for deferred to complete + $.when(_this._infoDeferred).done(function() { + + // Set maxZoom for map + map._layersMaxZoom = _this.maxZoom; + + // Call add TileLayer + L.TileLayer.prototype.onAdd.call(_this, map); + + if (_this.options.fitBounds) { + _this._fitBounds(); + } + + // Reset tile sizes to handle non 256x256 IIIF tiles + _this.on('tileload', function(tile, url) { + + var height = tile.tile.naturalHeight, + width = tile.tile.naturalWidth; + + // No need to resize if tile is 256 x 256 + if (height === 256 && width === 256) return; + + tile.tile.style.width = width + 'px'; + tile.tile.style.height = height + 'px'; + + }); + }); + }, + _fitBounds: function() { + var _this = this; + + // Find best zoom level and center map + var initialZoom = _this._getInitialZoom(_this._map.getSize()); + var imageSize = _this._imageSizes[initialZoom]; + var sw = _this._map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom); + var ne = _this._map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom); + var bounds = L.latLngBounds(sw, ne); + + _this._map.fitBounds(bounds, true); + }, + _getInfo: function() { + var _this = this; + + // Look for a way to do this without jQuery + $.getJSON(_this._infoUrl) + .done(function(data) { + _this.y = data.height; + _this.x = data.width; + + var tierSizes = [], + imageSizes = [], + scale, + width_, + height_, + tilesX_, + tilesY_; + + // Set quality based off of IIIF version + if (data.profile instanceof Array) { + _this.profile = data.profile[0]; + }else { + _this.profile = data.profile; + } + + _this._setQuality(); + + // Unless an explicit tileSize is set, use a preferred tileSize + if (!_this._explicitTileSize) { + // Set the default first + _this.options.tileSize = 256; + if (data.tiles) { + // Image API 2.0 Case + _this.options.tileSize = data.tiles[0].width; + } else if (data.tile_width){ + // Image API 1.1 Case + _this.options.tileSize = data.tile_width; + } + } + + function ceilLog2(x) { + return Math.ceil(Math.log(x) / Math.LN2); + }; + + // Calculates maximum native zoom for the layer + _this.maxNativeZoom = Math.max(ceilLog2(_this.x / _this.options.tileSize), + ceilLog2(_this.y / _this.options.tileSize)); + + // Enable zooming further than native if maxZoom option supplied + if (_this._customMaxZoom && _this.options.maxZoom > _this.maxNativeZoom) { + _this.maxZoom = _this.options.maxZoom; + } + else { + _this.maxZoom = _this.maxNativeZoom; + } + + for (var i = 0; i <= _this.maxZoom; i++) { + scale = Math.pow(2, _this.maxNativeZoom - i); + width_ = Math.ceil(_this.x / scale); + height_ = Math.ceil(_this.y / scale); + tilesX_ = Math.ceil(width_ / _this.options.tileSize); + tilesY_ = Math.ceil(height_ / _this.options.tileSize); + tierSizes.push([tilesX_, tilesY_]); + imageSizes.push(L.point(width_,height_)); + } + + _this._tierSizes = tierSizes; + _this._imageSizes = imageSizes; + + // Resolved Deferred to initiate tilelayer load + _this._infoDeferred.resolve(); + }); + }, + + _setQuality: function() { + var _this = this; + var profileToCheck = _this.profile; + + if (_this._explicitQuality) { + return; + } + + // If profile is an object + if (typeof(profileToCheck) === 'object') { + profileToCheck = profileToCheck['@id']; + } + + // Set the quality based on the IIIF compliance level + switch (true) { + case /^http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/compliance.html.*$/.test(profileToCheck): + _this.options.quality = 'native'; + break; + // Assume later profiles and set to default + default: + _this.options.quality = 'default'; + break; + } + }, + + _infoToBaseUrl: function() { + return this._infoUrl.replace('info.json', ''); + }, + _templateUrl: function() { + return this._infoToBaseUrl() + '{region}/{size}/{rotation}/{quality}.{format}'; + }, + _isValidTile: function(coords) { + var _this = this, + zoom = _this._getZoomForUrl(), + sizes = _this._tierSizes[zoom], + x = coords.x, + y = (coords.y); + + if (!sizes) return false; + if (x < 0 || sizes[0] <= x || y < 0 || sizes[1] <= y) { + return false; + }else { + return true; + } + }, + _getInitialZoom: function (mapSize) { + var _this = this, + tolerance = 0.8, + imageSize; + + for (var i = _this.maxNativeZoom; i >= 0; i--) { + imageSize = this._imageSizes[i]; + if (imageSize.x * tolerance < mapSize.x && imageSize.y * tolerance < mapSize.y) { + return i; + } + } + // return a default zoom + return 2; + } +}); + +L.tileLayer.iiif = function(url, options) { + return new L.TileLayer.Iiif(url, options); +}; diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index a420722..4445b57 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -1,21 +1,276 @@ -const allmapsAnnotation = import("https://unpkg.com/@allmaps/annotation?module") -const allmapsTransform = import("https://unpkg.com/@allmaps/transform?module") - -Promise.all([allmapsAnnotation, allmapsTransform ]) - .then(([allmapsAnnotation, allmapsTransform]) => { - // Both modules loaded successfully - // Use the imported modules - $(document).ready(function () { - walkingTourJs(allmapsAnnotation, allmapsTransform) - }); - }) - .catch((error) => { - // An error occurred while loading one of the modules - console.error('Error loading modules:', error); +console.log("start") +/* + * Leaflet-IIIF 1.1.1 + * IIIF Viewer for Leaflet + * by Jack Reed, @mejackreed + */ + +const Iiif = L.TileLayer.extend({ + options: { + continuousWorld: true, + tileSize: 256, + updateWhenIdle: true, + tileFormat: 'jpg', + fitBounds: true + }, + + initialize: function(url, options) { + options = typeof options !== 'undefined' ? options : {}; + + if (options.maxZoom) { + this._customMaxZoom = true; + } + + // Check for explicit tileSize set + if (options.tileSize) { + this._explicitTileSize = true; + } + + // Check for an explicit quality + if (options.quality) { + this._explicitQuality = true; + } + + options = L.setOptions(this, options); + this._infoDeferred = new $.Deferred(); + this._infoUrl = url; + this._baseUrl = this._templateUrl(); + this._getInfo(); + }, + getTileUrl: function(coords) { + var _this = this, + x = coords.x, + y = (coords.y), + zoom = _this._getZoomForUrl(), + scale = Math.pow(2, _this.maxNativeZoom - zoom), + tileBaseSize = _this.options.tileSize * scale, + minx = (x * tileBaseSize), + miny = (y * tileBaseSize), + maxx = Math.min(minx + tileBaseSize, _this.x), + maxy = Math.min(miny + tileBaseSize, _this.y); + + var xDiff = (maxx - minx); + var yDiff = (maxy - miny); + + return L.Util.template(this._baseUrl, L.extend({ + format: _this.options.tileFormat, + quality: _this.quality, + region: [minx, miny, xDiff, yDiff].join(','), + rotation: 0, + size: Math.ceil(xDiff / scale) + ',' + }, this.options)); + }, + onAdd: function(map) { + var _this = this; + + // Wait for deferred to complete + $.when(_this._infoDeferred).done(function() { + + // Set maxZoom for map + map._layersMaxZoom = _this.maxZoom; + + // Call add TileLayer + L.TileLayer.prototype.onAdd.call(_this, map); + + if (_this.options.fitBounds) { + _this._fitBounds(); + } + + // Reset tile sizes to handle non 256x256 IIIF tiles + _this.on('tileload', function(tile, url) { + + var height = tile.tile.naturalHeight, + width = tile.tile.naturalWidth; + + // No need to resize if tile is 256 x 256 + if (height === 256 && width === 256) return; + + tile.tile.style.width = width + 'px'; + tile.tile.style.height = height + 'px'; + + }); + }); + }, + _fitBounds: function() { + var _this = this; + + // Find best zoom level and center map + var initialZoom = _this._getInitialZoom(_this._map.getSize()); + var imageSize = _this._imageSizes[initialZoom]; + var sw = _this._map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom); + var ne = _this._map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom); + var bounds = L.latLngBounds(sw, ne); + + _this._map.fitBounds(bounds, true); + }, + _getInfo: function() { + var _this = this; + + // Look for a way to do this without jQuery + $.getJSON(_this._infoUrl) + .done(function(data) { + _this.y = data.height; + _this.x = data.width; + + var tierSizes = [], + imageSizes = [], + scale, + width_, + height_, + tilesX_, + tilesY_; + + // Set quality based off of IIIF version + if (data.profile instanceof Array) { + _this.profile = data.profile[0]; + }else { + _this.profile = data.profile; + } + + _this._setQuality(); + + // Unless an explicit tileSize is set, use a preferred tileSize + if (!_this._explicitTileSize) { + // Set the default first + _this.options.tileSize = 256; + if (data.tiles) { + // Image API 2.0 Case + _this.options.tileSize = data.tiles[0].width; + } else if (data.tile_width){ + // Image API 1.1 Case + _this.options.tileSize = data.tile_width; + } + } + + function ceilLog2(x) { + return Math.ceil(Math.log(x) / Math.LN2); + }; + + // Calculates maximum native zoom for the layer + _this.maxNativeZoom = Math.max(ceilLog2(_this.x / _this.options.tileSize), + ceilLog2(_this.y / _this.options.tileSize)); + + // Enable zooming further than native if maxZoom option supplied + if (_this._customMaxZoom && _this.options.maxZoom > _this.maxNativeZoom) { + _this.maxZoom = _this.options.maxZoom; + } + else { + _this.maxZoom = _this.maxNativeZoom; + } + + for (var i = 0; i <= _this.maxZoom; i++) { + scale = Math.pow(2, _this.maxNativeZoom - i); + width_ = Math.ceil(_this.x / scale); + height_ = Math.ceil(_this.y / scale); + tilesX_ = Math.ceil(width_ / _this.options.tileSize); + tilesY_ = Math.ceil(height_ / _this.options.tileSize); + tierSizes.push([tilesX_, tilesY_]); + imageSizes.push(L.point(width_,height_)); + } + + _this._tierSizes = tierSizes; + _this._imageSizes = imageSizes; + + // Resolved Deferred to initiate tilelayer load + _this._infoDeferred.resolve(); + }); + }, + + _setQuality: function() { + var _this = this; + var profileToCheck = _this.profile; + + if (_this._explicitQuality) { + return; + } + + // If profile is an object + if (typeof(profileToCheck) === 'object') { + profileToCheck = profileToCheck['@id']; + } + + // Set the quality based on the IIIF compliance level + switch (true) { + case /^http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/compliance.html.*$/.test(profileToCheck): + _this.options.quality = 'native'; + break; + // Assume later profiles and set to default + default: + _this.options.quality = 'default'; + break; + } + }, + + _infoToBaseUrl: function() { + return this._infoUrl.replace('info.json', ''); + }, + _templateUrl: function() { + return this._infoToBaseUrl() + '{region}/{size}/{rotation}/{quality}.{format}'; + }, + _isValidTile: function(coords) { + var _this = this, + zoom = _this._getZoomForUrl(), + sizes = _this._tierSizes[zoom], + x = coords.x, + y = (coords.y); + + if (!sizes) return false; + if (x < 0 || sizes[0] <= x || y < 0 || sizes[1] <= y) { + return false; + }else { + return true; + } + }, + _getInitialZoom: function (mapSize) { + var _this = this, + tolerance = 0.8, + imageSize; + + for (var i = _this.maxNativeZoom; i >= 0; i--) { + imageSize = this._imageSizes[i]; + if (imageSize.x * tolerance < mapSize.x && imageSize.y * tolerance < mapSize.y) { + return i; + } + } + // return a default zoom + return 2; + } }); + + const tiff = function(url, options) { + return new Iiif(url, options); + }; + +const getPackages = async function() { + const allmapsAnnotation = await import("https://unpkg.com/@allmaps/annotation?module") + const allmapsTransform = await import("https://unpkg.com/@allmaps/transform?module") + + return [allmapsAnnotation, allmapsTransform] +} - -function walkingTourJs(allmapsAnnotation, allmapsTransform) { +console.log(tiff) +async function main() { + let packages = await getPackages(); + console.log(packages); + console.log(tiff) + walkingTourJs(packages[0], packages[1], tiff) + } + +main() + +// .then(([allmapsAnnotation, allmapsTransform]) => { +// // Both modules loaded successfully +// // Use the imported modules +// console.log(L.tileLayer) +// walkingTourJs(allmapsAnnotation, allmapsTransform, L.tileLayer.iiif) +// }) +// .catch((error) => { +// // An error occurred while loading one of the modules +// console.error('Error loading modules:', error); +// }); + + +function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { var imported = document.createElement("script"); document.head.appendChild(imported); // Set map height to be window height minus header height. @@ -256,29 +511,52 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { * Query backend */ - window.onload = function () { - jqXhr = $.post('walking-tour/index/map-config', function (response) { - mapSetUp(response); - fetch(annotationUrl) - .then(response => { - // Check if the request was successful - if (!response.ok) { - throw new Error('Network response was not ok'); - } - // Parse the response as JSON - return response.json(); - }) - .then(data => { - const maps = allmapsAnnotation.parseAnnotation(data) - const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); - doQuery(transformer); - }) - .catch(error => { - // Handle any errors that occurred during the fetch - console.error('Fetch error:', error); - }); + // window.onload = function () { + // jqXhr = $.post('walking-tour/index/map-config', function (response) { + // const mapConfig = response + // mapSetUp(mapConfig, "https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:ht250943q") + // fetch(annotationUrl) + // .then(response => { + // // Check if the request was successful + // if (!response.ok) { + // throw new Error('Network response was not ok'); + // } + // // Parse the response as JSON + // return response.json(); + // }) + // .then(data => { + // const maps = allmapsAnnotation.parseAnnotation(data) + // const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); + // console.log(maps) + // doQuery(transformer, maps); + // }) + // .catch(error => { + // // Handle any errors that occurred during the fetch + // console.error('Fetch error:', error); + // }); + // }) + // }; + + fetch(annotationUrl) + .then(response => { + // Check if the request was successful + if (!response.ok) { + throw new Error('Network response was not ok'); + } + // Parse the response as JSON + return response.json(); }) - }; + .then(data => { + const maps = allmapsAnnotation.parseAnnotation(data) + const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); + console.log(maps) + mapSetUp(maps) + // doQuery(transformer, maps); + }) + .catch(error => { + // Handle any errors that occurred during the fetch + console.error('Fetch error:', error); + }); // Retain previous form state, if needed. retainFormState(); @@ -288,95 +566,107 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { * * Call only once during set up */ - function mapSetUp(response) { - EXHIBIT_BUTTON_TEXT = response['walking_tour_exhibit_button'] - DETAIL_BUTTON_TEXT = response['walking_tour_detail_button'] - MAP_MAX_ZOOM = parseInt(response['walking_tour_max_zoom']) - MAP_MIN_ZOOM = parseInt(response['walking_tour_min_zoom']) - MAP_CENTER = parse1DArrayPoint(response['walking_tour_center']) - MAP_ZOOM = parseInt(response["walking_tour_default_zoom"]) - MAP_MAX_BOUNDS = parse2DArrayPoint(response["walking_tour_max_bounds"]) - // Set the base map layer. + function mapSetUp(maps) { map = L.map('map', { - center: MAP_CENTER, - zoom: MAP_MIN_ZOOM, - minZoom: MAP_MIN_ZOOM, - maxZoom: MAP_MAX_ZOOM, - // maxBounds: MAP_MAX_BOUNDS, - zoomControl: false - }); - LOCATE_BOUNDS = map.getBounds(); - map.setZoom(MAP_ZOOM); - - map.addLayer(L.tileLayer(MAP_URL_TEMPLATE)); - map.addControl(L.control.zoom({ position: 'topleft' })); - var extentControl = L.Control.extend({ - options: { - position: 'topleft' - }, - onAdd: function (map) { - var container = L.DomUtil.create('div', 'extentControl'); - $(container).attr('id', 'extent-control'); - $(container).css('width', '26px').css('height', '26px').css('outline', '1px black'); - $(container).addClass('extentControl-disabled') - $(container).addClass('leaflet-bar') - $(container).on('click', function () { - map.flyTo(MAP_CENTER, MAP_ZOOM); - }); - return container; - } - }) - map.addControl(new extentControl()); - map.attributionControl.setPrefix('Tiles © Esri'); - - const warpedMapLayer = new Allmaps.WarpedMapLayer(annotationUrl) - map.addLayer(warpedMapLayer); - - map.on('zoomend', function () { - if (map.getZoom() == MAP_MIN_ZOOM) { - $('#extent-control').addClass('extentControl-disabled') - } else { - $('#extent-control').removeClass('extentControl-disabled') - } - }) + center: [0, 0], + crs: L.CRS.Simple, + zoom: 0 + }); + console.log(maps) + map.addLayer(iiif(maps[0].resource.id+'/info.json', { + fitBounds: true + })); + var bounds = [maps[0].resourceMask[0], maps[0].resourceMask[2]] + console.log(map.getBounds()) + + + // EXHIBIT_BUTTON_TEXT = response['walking_tour_exhibit_button'] + // DETAIL_BUTTON_TEXT = response['walking_tour_detail_button'] + // MAP_MAX_ZOOM = parseInt(response['walking_tour_max_zoom']) + // MAP_MIN_ZOOM = parseInt(response['walking_tour_min_zoom']) + // MAP_CENTER = parse1DArrayPoint(response['walking_tour_center']) + // MAP_ZOOM = parseInt(response["walking_tour_default_zoom"]) + // MAP_MAX_BOUNDS = parse2DArrayPoint(response["walking_tour_max_bounds"]) + // // Set the base map layer. + // map = L.map('map', { + // center: MAP_CENTER, + // zoom: MAP_MIN_ZOOM, + // minZoom: MAP_MIN_ZOOM, + // maxZoom: MAP_MAX_ZOOM, + // zoomControl: false + // }); + // LOCATE_BOUNDS = map.getBounds(); + // map.setZoom(MAP_ZOOM); + + // map.addLayer(L.tileLayer(MAP_URL_TEMPLATE)); + // map.addControl(L.control.zoom({ position: 'topleft' })); + // var extentControl = L.Control.extend({ + // options: { + // position: 'topleft' + // }, + // onAdd: function (map) { + // var container = L.DomUtil.create('div', 'extentControl'); + // $(container).attr('id', 'extent-control'); + // $(container).css('width', '26px').css('height', '26px').css('outline', '1px black'); + // $(container).addClass('extentControl-disabled') + // $(container).addClass('leaflet-bar') + // $(container).on('click', function () { + // map.flyTo(MAP_CENTER, MAP_ZOOM); + // }); + // return container; + // } + // }) + // map.addControl(new extentControl()); + // map.attributionControl.setPrefix('Tiles © Esri'); + + // const warpedMapLayer = new Allmaps.WarpedMapLayer(annotationUrl) + // map.addLayer(warpedMapLayer); + + // map.on('zoomend', function () { + // if (map.getZoom() == MAP_MIN_ZOOM) { + // $('#extent-control').addClass('extentControl-disabled') + // } else { + // $('#extent-control').removeClass('extentControl-disabled') + // } + // }) // Handle location found. - map.on('locationfound', function (e) { - if (!locationMarker) { - $("#locate-button").toggleClass('loading'); - } - // User within location bounds. Set the location marker. - if (L.latLngBounds(LOCATE_BOUNDS).contains(e.latlng)) { - if (locationMarker) { - // Remove the existing location marker before adding to map. - map.removeLayer(locationMarker); - } else { - // Pan to location only on first locate. - map.panTo(e.latlng); - } - locationMarker = L.marker(e.latlng, { - icon: L.icon({ - iconUrl: 'plugins/WalkingTour/views/public/images/location.png', - iconSize: [25, 25] - }) - }); - locationMarker.addTo(map).bindPopup("You are within " + e.accuracy / 2 + " meters from this point"); - // User outside location bounds. - } else { - var locateMeters = e.latlng.distanceTo(map.options.center); - var locateMiles = Math.ceil((locateMeters * 0.000621371) * 100) / 100; - alert('Cannot locate your location. You are ' + locateMiles + ' miles from the map bounds.'); - map.stopLocate(); - } - }); - - // Handle location error. - map.on('locationerror', function () { - $("#locate-button").toggleClass('loading'); - map.stopLocate(); - alert('Location Error, Please try again.'); - console.log('location error') - }); + // map.on('locationfound', function (e) { + // if (!locationMarker) { + // $("#locate-button").toggleClass('loading'); + // } + // // User within location bounds. Set the location marker. + // if (L.latLngBounds(LOCATE_BOUNDS).contains(e.latlng)) { + // if (locationMarker) { + // // Remove the existing location marker before adding to map. + // map.removeLayer(locationMarker); + // } else { + // // Pan to location only on first locate. + // map.panTo(e.latlng); + // } + // locationMarker = L.marker(e.latlng, { + // icon: L.icon({ + // iconUrl: 'plugins/WalkingTour/views/public/images/location.png', + // iconSize: [25, 25] + // }) + // }); + // locationMarker.addTo(map).bindPopup("You are within " + e.accuracy / 2 + " meters from this point"); + // // User outside location bounds. + // } else { + // var locateMeters = e.latlng.distanceTo(map.options.center); + // var locateMiles = Math.ceil((locateMeters * 0.000621371) * 100) / 100; + // alert('Cannot locate your location. You are ' + locateMiles + ' miles from the map bounds.'); + // map.stopLocate(); + // } + // }); + + // // Handle location error. + // map.on('locationerror', function () { + // $("#locate-button").toggleClass('loading'); + // map.stopLocate(); + // alert('Location Error, Please try again.'); + // console.log('location error') + // }); } /* @@ -392,7 +682,6 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { padding: 0.2rem 0 0.18rem 0; font-size: 15px; ` - // correctly formats coordinates as [lat, long] (API returns [long, lat]) function orderCoords(path) { var directions = []; @@ -436,21 +725,21 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform) { var numMarker = 1; var response = value["Data"]; var itemIDList = []; - console.log(transformer) - console.log(response.features) + // console.log(transformer) + // console.log(response.features) response.features.map(ele => { const test = transformer.transformBackward( ele.geometry ) - console.log(test) + // console.log(test) itemIDList.push(ele.properties.id) return { ...ele, geometry: test } }) - console.log(response.features) + // console.log(response.features) tourToItem[tourId] = itemIDList; markerList = [] var geoJsonLayer = L.geoJson(response.features, { From a0a2f84f6238bb355565cf42723621c360baa9f4 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Sun, 28 Apr 2024 22:21:15 -0500 Subject: [PATCH 4/9] add points --- views/public/javascripts/walking-tour.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index 4445b57..124567d 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -551,7 +551,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); console.log(maps) mapSetUp(maps) - // doQuery(transformer, maps); + doQuery(transformer, maps); }) .catch(error => { // Handle any errors that occurred during the fetch @@ -732,7 +732,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { const test = transformer.transformBackward( ele.geometry ) - // console.log(test) + console.log(test) itemIDList.push(ele.properties.id) return { ...ele, From cd39a211277e75cfe114b1a63b0752ed84d1c4a3 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Mon, 29 Apr 2024 15:16:46 -0500 Subject: [PATCH 5/9] add markers --- views/public/javascripts/walking-tour.js | 245 +++++++++++++++-------- 1 file changed, 167 insertions(+), 78 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index 124567d..2b45608 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -237,9 +237,9 @@ const Iiif = L.TileLayer.extend({ } }); - const tiff = function(url, options) { - return new Iiif(url, options); - }; +const tiff = function(url, options) { +return new Iiif(url, options); +}; const getPackages = async function() { const allmapsAnnotation = await import("https://unpkg.com/@allmaps/annotation?module") @@ -550,7 +550,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { const maps = allmapsAnnotation.parseAnnotation(data) const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); console.log(maps) - mapSetUp(maps) + mapSetUp(maps[0]) doQuery(transformer, maps); }) .catch(error => { @@ -567,18 +567,39 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { * Call only once during set up */ function mapSetUp(maps) { + console.log(maps.resource.height) + console.log( $('#map').height()) + var zoom = maps.resource.height / $('#map').height() + console.log(zoom) map = L.map('map', { center: [0, 0], crs: L.CRS.Simple, zoom: 0 }); - console.log(maps) - map.addLayer(iiif(maps[0].resource.id+'/info.json', { - fitBounds: true - })); - var bounds = [maps[0].resourceMask[0], maps[0].resourceMask[2]] - console.log(map.getBounds()) + iiif(maps.resource.id+'/info.json', { + fitBounds: true, + setMaxBounds: true + }).addTo(map) + map.on('zoomend', function() { + console.log(map.getZoom()) + }); + // map.setZoom(zoom) + // var bounds = L.bounds(L.point(maps.resourceMask[0][0], maps.resourceMask[0][1]), L.point(maps.resourceMask[2][0], maps.resourceMask[2][1])); + + // console.log(bounds) + // map.fitBounds(bounds) + console.log(map.getBounds(), map.getZoom()) + console.log(L.CRS.Simple.latLngToPoint(map.getBounds(), 0)) + map.onZoom + // var rect = L.rectangle(map.getBounds(), {color: 'blue', weight: 1}).on('click', function (e) { + // // There event is event object + // // there e.type === 'click' + // // there e.lanlng === L.LatLng on map + // // there e.target.getLatLngs() - your rectangle coordinates + // // but e.target !== rect + // console.info(e); + // }).addTo(map); // EXHIBIT_BUTTON_TEXT = response['walking_tour_exhibit_button'] // DETAIL_BUTTON_TEXT = response['walking_tour_detail_button'] @@ -714,6 +735,15 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { var url; var itemArray = [] var tourToItem = {} + + var yx = L.latLng; + + var xy = function(x, y) { + if (Array.isArray(x)) { // When doing xy([x, y]); + return yx(x[1], x[0]); + } + return yx(y, x); // When doing xy(x, y); + }; jqXhr = $.post('walking-tour/index/query', function (response) { markerData = response; dataArray = Object.entries(markerData) @@ -728,90 +758,149 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { // console.log(transformer) // console.log(response.features) - response.features.map(ele => { - const test = transformer.transformBackward( + newList = [] + + response.features = response.features.map(ele => { + var test = transformer.transformBackward( ele.geometry ) - console.log(test) + test = test.map(ele => {return ele/7}) + // console.log(test) itemIDList.push(ele.properties.id) - return { + return({ ...ele, geometry: test - } + }) }) - // console.log(response.features) + console.log(response.features) tourToItem[tourId] = itemIDList; markerList = [] - var geoJsonLayer = L.geoJson(response.features, { - // adds the correct number to each marker based on order of tour - pointToLayer: function (feature, latlng) { - var numberIcon = L.divIcon({ - className: "my-custom-pin", - iconSize: [25, 41], - iconAnchor: [12, 40], - popupAnchor: [0, -5], - html: `

${numMarker}

` - }); - numMarker++; - return L.marker(latlng, { icon: numberIcon }); - }, - onEachFeature: function (feature, layer) { - layer.on('click', function (e) { - // center click location - map.flyTo(e.latlng,MAP_MAX_ZOOM); - // Close the filtering - var filterButton = $('filter-button'); - filterButton.removeClass('on'). - find('.screen-reader-text'). - html('Filters'); - $('#filters').fadeOut(200, 'linear'); - - var marker = this; - response = allItems[`${tourId}:${feature.properties.id}`] - if (response == undefined) { - $.post('walking-tour/index/get-item', { id: feature.properties.id, tour: tourId }, function (response) { - allItems[`${tourId}:${feature.properties.id}`] = response; - featureOnclickAction(response, layer, marker, itemIDList, value, tourId); - }) - } else { - featureOnclickAction(response, layer, marker, itemIDList, value, tourId); + + response.features.forEach(feature => { + var numberIcon = L.divIcon({ + className: "my-custom-pin", + iconSize: [25, 41], + iconAnchor: [12, 40], + popupAnchor: [0, -5], + html: `

${numMarker}

` + }); + numMarker++; + + var marker = L.marker(xy(feature.geometry[0], feature.geometry[1]), { icon: numberIcon }); + marker.on('click', function (e) { + // center click location + map.flyTo(e.latlng, 0); + // Close the filtering + var filterButton = $('filter-button'); + filterButton.removeClass('on'). + find('.screen-reader-text'). + html('Filters'); + $('#filters').fadeOut(200, 'linear'); + + var marker = this; + response = allItems[`${tourId}:${feature.properties.id}`] + if (response == undefined) { + $.post('walking-tour/index/get-item', { id: feature.properties.id, tour: tourId }, function (response) { + allItems[`${tourId}:${feature.properties.id}`] = response; + + + + var popupContent = '

' + response.title + '

'; + if (response.thumbnail) { + popupContent += '' + response.thumbnail + '
'; + } + popupContent += 'View More Info'; + if (!marker.getPopup()) { + marker.bindPopup(popupContent, { maxWidth: 200, offset: L.point(0, -40) }).openPopup(); + allMarkers[response.id] = marker; + } + }) + } else { + var popupContent = '

' + response.title + '

'; + if (response.thumbnail) { + popupContent += '' + response.thumbnail + '
'; + } + popupContent += 'View More Info'; + if (!marker.getPopup()) { + marker.bindPopup(popupContent, { maxWidth: 200, offset: L.point(0, -40) }).openPopup(); + allMarkers[response.id] = marker; } + } + }) + marker.addTo(map) + }) - }); - } - }); + + // var geoJsonLayer = L.geoJson(response.features, { + // // adds the correct number to each marker based on order of tour + // pointToLayer: function (feature, latlng) { + // var numberIcon = L.divIcon({ + // className: "my-custom-pin", + // iconSize: [25, 41], + // iconAnchor: [12, 40], + // popupAnchor: [0, -5], + // html: `

${numMarker}

` + // }); + // numMarker++; + // console.log(latlng) + // return L.marker(latlng, { icon: numberIcon }); + // }, + // onEachFeature: function (feature, layer) { + // layer.on('click', function (e) { + // // center click location + // map.flyTo(e.latlng,MAP_MAX_ZOOM); + // // Close the filtering + // var filterButton = $('filter-button'); + // filterButton.removeClass('on'). + // find('.screen-reader-text'). + // html('Filters'); + // $('#filters').fadeOut(200, 'linear'); + + // var marker = this; + // response = allItems[`${tourId}:${feature.properties.id}`] + // if (response == undefined) { + // $.post('walking-tour/index/get-item', { id: feature.properties.id, tour: tourId }, function (response) { + // allItems[`${tourId}:${feature.properties.id}`] = response; + // featureOnclickAction(response, layer, marker, itemIDList, value, tourId); + // }) + // } else { + // featureOnclickAction(response, layer, marker, itemIDList, value, tourId); + // } + + // }); + + // } + // }); markerData[tourId].allMarker = markerList; - markerData[tourId].geoJson = geoJsonLayer; - var walkingPath = []; - var json_content = response.features; - var pointList = []; - for (var i = 0; i < json_content.length; i++) { - lat = json_content[i].geometry.coordinates[1]; - lng = json_content[i].geometry.coordinates[0]; - var point = new L.LatLng(lat, lng); - pointList[i] = point; - } - getOverallPath(pointList, key).then((data) => { - var path = data["features"][0]["geometry"]["coordinates"]; - path = orderCoords(path); - for (var p of path) { - walkingPath.push(p); - } - var tourPolyline = new L.Polyline(walkingPath, { - color: value["Color"], - weight: 3, - opacity: 1, - smoothFactor: 1 - }); - markerData[tourId].walkingPath = tourPolyline; - resolve() - }); + // var json_content = response.features; + // var pointList = []; + // for (var i = 0; i < json_content.length; i++) { + // lat = json_content[i].geometry.coordinates[1]; + // lng = json_content[i].geometry.coordinates[0]; + // var point = new L.LatLng(lat, lng); + // pointList[i] = point; + // } + // getOverallPath(pointList, key).then((data) => { + // var path = data["features"][0]["geometry"]["coordinates"]; + // path = orderCoords(path); + // for (var p of path) { + // walkingPath.push(p); + // } + // var tourPolyline = new L.Polyline(walkingPath, { + // color: value["Color"], + // weight: 3, + // opacity: 1, + // smoothFactor: 1 + // }); + // markerData[tourId].walkingPath = tourPolyline; + // resolve() + // }); }); }) Promise.all(requests).then(() => { createCustomCSS(); - doFilters(); + // doFilters(); }); }); } From 742bdea494d34d025fdff170d16355eabf0f0ce8 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Tue, 7 May 2024 10:54:21 -0500 Subject: [PATCH 6/9] use image overlay instead of iiif --- views/public/javascripts/walking-tour.js | 60 ++++++++++++++++-------- 1 file changed, 41 insertions(+), 19 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index 2b45608..f98e46d 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -100,7 +100,6 @@ const Iiif = L.TileLayer.extend({ var sw = _this._map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom); var ne = _this._map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom); var bounds = L.latLngBounds(sw, ne); - _this._map.fitBounds(bounds, true); }, _getInfo: function() { @@ -234,6 +233,9 @@ const Iiif = L.TileLayer.extend({ } // return a default zoom return 2; + }, + _getImageSize: function() { + return this._imageSizes; } }); @@ -298,6 +300,17 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { var allItems = {}; var allMarkers = {}; + var imageZoom; + + var yx = L.latLng; + + var xy = function(x, y) { + if (Array.isArray(x)) { // When doing xy([x, y]); + return yx(x[1], x[0]); + } + return yx(y, x); // When doing xy(x, y); + }; + /* @@ -550,6 +563,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { const maps = allmapsAnnotation.parseAnnotation(data) const transformer = new allmapsTransform.GcpTransformer(maps[0].gcps); console.log(maps) + imageZoom = maps[0].resource.height / $('#map').height() mapSetUp(maps[0]) doQuery(transformer, maps); }) @@ -567,19 +581,29 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { * Call only once during set up */ function mapSetUp(maps) { - console.log(maps.resource.height) - console.log( $('#map').height()) - var zoom = maps.resource.height / $('#map').height() - console.log(zoom) + var bounds = [[0,0], [6950/imageZoom, 9428/imageZoom]]; + var center = [(bounds[1][0] - bounds[0][0])/ 2, (bounds[1][1] - bounds[0][1])/ 2] map = L.map('map', { - center: [0, 0], + center: center, crs: L.CRS.Simple, - zoom: 0 + zoom: 0, + maxBounds: bounds }); - iiif(maps.resource.id+'/info.json', { - fitBounds: true, - setMaxBounds: true - }).addTo(map) + + console.log(map.getSize()) + + // const iiif_layer = iiif(maps.resource.id+'/info.json', { + // fitBounds: true, + // setMaxBounds: true, + // }).addTo(map) + var bounds = [[0,0], [6950/imageZoom, 9428/imageZoom]]; + var image = L.imageOverlay('https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:ht250943q/full/9428,/0/default.jpg', bounds).addTo(map); + + // console.log(iiif_layer) + // console.log(iiif_layer._getImageSize()) + // const imageSize = iiif_layer._imageSizes.map(ele => { + // return xy(ele[0], ele[1]) + // }) map.on('zoomend', function() { console.log(map.getZoom()) @@ -589,10 +613,8 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { // console.log(bounds) // map.fitBounds(bounds) - console.log(map.getBounds(), map.getZoom()) - console.log(L.CRS.Simple.latLngToPoint(map.getBounds(), 0)) - map.onZoom - // var rect = L.rectangle(map.getBounds(), {color: 'blue', weight: 1}).on('click', function (e) { + // console.log(map.getBounds(), map.getZoom()) + // var rect = L.rectangle(imageSize, {color: 'blue', weight: 1}).on('click', function (e) { // // There event is event object // // there e.type === 'click' // // there e.lanlng === L.LatLng on map @@ -764,7 +786,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { var test = transformer.transformBackward( ele.geometry ) - test = test.map(ele => {return ele/7}) + test = test.map(ele => {return ele/imageZoom}) // console.log(test) itemIDList.push(ele.properties.id) return({ @@ -789,7 +811,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { var marker = L.marker(xy(feature.geometry[0], feature.geometry[1]), { icon: numberIcon }); marker.on('click', function (e) { // center click location - map.flyTo(e.latlng, 0); + map.flyTo(e.latlng, 4); // Close the filtering var filterButton = $('filter-button'); filterButton.removeClass('on'). @@ -809,7 +831,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { if (response.thumbnail) { popupContent += '' + response.thumbnail + '
'; } - popupContent += 'View More Info'; + popupContent += 'View More Info'; if (!marker.getPopup()) { marker.bindPopup(popupContent, { maxWidth: 200, offset: L.point(0, -40) }).openPopup(); allMarkers[response.id] = marker; @@ -820,7 +842,7 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { if (response.thumbnail) { popupContent += '' + response.thumbnail + '
'; } - popupContent += 'View More Info'; + popupContent += 'View More Info'; if (!marker.getPopup()) { marker.bindPopup(popupContent, { maxWidth: 200, offset: L.point(0, -40) }).openPopup(); allMarkers[response.id] = marker; From 3f44ad61b2d3aa631348fc876837eb3fd2e8e617 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Tue, 7 May 2024 12:08:34 -0500 Subject: [PATCH 7/9] remove hard coded width --- views/public/javascripts/walking-tour.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index f98e46d..adde717 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -581,23 +581,22 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { * Call only once during set up */ function mapSetUp(maps) { - var bounds = [[0,0], [6950/imageZoom, 9428/imageZoom]]; + var mapHeight = maps.resource.height / imageZoom + var mapWidth = maps.resource.width / imageZoom + var bounds = [[0,0], [mapHeight, mapWidth]]; var center = [(bounds[1][0] - bounds[0][0])/ 2, (bounds[1][1] - bounds[0][1])/ 2] map = L.map('map', { center: center, crs: L.CRS.Simple, - zoom: 0, + zoom: -1, maxBounds: bounds }); - console.log(map.getSize()) - // const iiif_layer = iiif(maps.resource.id+'/info.json', { // fitBounds: true, // setMaxBounds: true, // }).addTo(map) - var bounds = [[0,0], [6950/imageZoom, 9428/imageZoom]]; - var image = L.imageOverlay('https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:ht250943q/full/9428,/0/default.jpg', bounds).addTo(map); + var image = L.imageOverlay('https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:ht250943q/full/'+ maps.resource.width +',/0/default.jpg', bounds).addTo(map); // console.log(iiif_layer) // console.log(iiif_layer._getImageSize()) From 786ad30ee733d2aa6b3b390191eb169aa1b36f49 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Tue, 7 May 2024 13:18:11 -0500 Subject: [PATCH 8/9] update --- views/public/javascripts/walking-tour.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index adde717..159de66 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -280,7 +280,8 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { $('#map').css('height', windowheight - 54); var MAP_URL_TEMPLATE = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'; - const annotationUrl = 'https://annotations.allmaps.org/manifests/47574ee029cca631' + // const annotationUrl = 'https://annotations.allmaps.org/manifests/47574ee029cca631' + const annotationUrl = "https://annotations.allmaps.org/manifests/c047e9dd35f2d377" var MAP_CENTER; var MAP_ZOOM; // MAP_ZOOM controls the default zoom of the map @@ -596,8 +597,9 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { // fitBounds: true, // setMaxBounds: true, // }).addTo(map) - var image = L.imageOverlay('https://iiif.digitalcommonwealth.org/iiif/2/commonwealth:ht250943q/full/'+ maps.resource.width +',/0/default.jpg', bounds).addTo(map); - + console.log(maps.resource.id +'/full/'+ maps.resource.width +',/0/default.jpg') + var image = L.imageOverlay(maps.resource.id +'/full/'+ $('#map').width() +',/0/default.jpg', bounds).addTo(map); + console.log(image) // console.log(iiif_layer) // console.log(iiif_layer._getImageSize()) // const imageSize = iiif_layer._imageSizes.map(ele => { From e7060b6976cc4ac19d38d442df18aac2d18c18d3 Mon Sep 17 00:00:00 2001 From: tutingjun Date: Thu, 30 May 2024 22:11:10 -0500 Subject: [PATCH 9/9] update url --- views/public/javascripts/walking-tour.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/views/public/javascripts/walking-tour.js b/views/public/javascripts/walking-tour.js index 159de66..aeb9602 100755 --- a/views/public/javascripts/walking-tour.js +++ b/views/public/javascripts/walking-tour.js @@ -245,7 +245,7 @@ return new Iiif(url, options); const getPackages = async function() { const allmapsAnnotation = await import("https://unpkg.com/@allmaps/annotation?module") - const allmapsTransform = await import("https://unpkg.com/@allmaps/transform?module") + const allmapsTransform = await import("https://unpkg.com/@allmaps/transform@1.0.0-beta.37/dist/bundled/index.es.js?module") return [allmapsAnnotation, allmapsTransform] } @@ -280,8 +280,8 @@ function walkingTourJs(allmapsAnnotation, allmapsTransform, iiif) { $('#map').css('height', windowheight - 54); var MAP_URL_TEMPLATE = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'; - // const annotationUrl = 'https://annotations.allmaps.org/manifests/47574ee029cca631' - const annotationUrl = "https://annotations.allmaps.org/manifests/c047e9dd35f2d377" + const annotationUrl = 'https://annotations.allmaps.org/manifests/47574ee029cca631' + // const annotationUrl = "https://annotations.allmaps.org/manifests/c047e9dd35f2d377" var MAP_CENTER; var MAP_ZOOM; // MAP_ZOOM controls the default zoom of the map