I'm working with Pixel Compare extension. It works well with rvt files, and almost with pdfs.
When comparing two pdf, the viewer will zoom in on a part of the file and i'm unable to unzoom it.
Furthermore, it appears the original file is reduced to the zoomed part.
Examples:
Heres the file before comparing :
And then after, it zooms on the left corner. I cannot access the rest of the file nor zoom out.
I looked for zooming properties on the api docs, but found nothing.
Ive honestly no idea what causes it and would welcome any pointer in the right direction.
Thanks in advance.
Edit:
I load pdf this way , Autodesk.Viewing.Initializer not pictured:
viewer1.addEventListener(Autodesk.Viewing.LOADER_LOAD_FILE_EVENT, function (e) {
viewer1.loadExtension('Autodesk.PDF').then(() => {
viewer1.loadExtension("Autodesk.Viewing.MarkupsCore");
viewer1.loadExtension("Autodesk.Viewing.MarkupsGui");
});
});
Have you tried other PDFs, and is this happening to all of them?
I just tried passing two arbitrary PDF files to the extension, and it seems to work fine:
If this is just related to a specific set of PDFs you're using, I'd ask you to share those with us (confidentially, we will not share them with anyone outside of Autodesk) via forge (dot) help (at) autodesk (dot) com so that we can debug it locally.
EDIT: here's a simple example of how I initialized the extension for the screenshots above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<title>Autodesk Forge: Pixel Compare</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, function () {
const config = {
extensions: ['Autodesk.Viewing.MarkupsCore', 'Autodesk.Viewing.MarkupsGui']
};
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'), config);
viewer.start();
viewer.loadModel('/path/to/one.pdf', {}, (model1) => {
viewer.loadModel('/path/to/another.pdf', {}, async (model2) => {
const pixelCompareExt = await viewer.loadExtension('Autodesk.Viewing.PixelCompare');
pixelCompareExt.compareTwoModels(model1, model2);
});
});
});
</script>
</body>
</html>
Try using this yourself, just replacing /path/to/one.pdf and /path/to/another.pdf with URLs to your own PDFs.
Related
expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
Good day, I am having difficulties using PDFExtension to load PDF's directly into the viewer. I have omitted the markups extension for testing purposes. I have tried following the steps here to no avail:
https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
https://forge.autodesk.com/en/docs/viewer/v7/reference/Extensions/PDFExtension/
instance.canvas.append(htmlViewer); Simply creates a div defined by htmlViewer
let htmlViewer = "<div id=forgeViewer></div>";
//The Viewer will be instantiated here
instance.canvas.append(htmlViewer);
let viewer, markup;
function initializeViewer(pdf) {
if (viewer) {
console.log('loading');
viewer.impl.unloadCurrentModel()
if (markup)
markup.hide();
viewer.loadModel(pdf, viewer);
return;
}
var options = {
env: "Local",
useADP: false
}
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
viewer.setTheme("light-theme");
viewer.start();
if (!pdf) return;
viewer.loadExtension('Autodesk.PDF').then( () => {
viewer.loadModel(pdf, viewer);
});
});
}
initializeViewer('//dd7tel2830j4w.cloudfront.net/f1635895094123x658226723587068400/sample.pdf');
The actual viewer itself gets initialized but I see an infinite loading loop. In the console (network) I get a 404 not found for this PDF. However, I can confirm that this URL is indeed correct and I have access to it. Furthermore, I have tried using several different URL's for this file. I cannot use a locally stored file, it must be fetched with a URL. Maybe this is due to a misuse of the env: in options? I am confused... this is pulled directly from the example linked above.
Any help would be appreciated, thank you so much!
Have you checked your browser's dev tools to see if there are any errors?
Here's a minimal Forge Viewer setup that can load a PDF natively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<title>Autodesk Forge: PDF Demo</title>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, async function () {
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start();
await viewer.loadExtension('Autodesk.PDF');
viewer.loadModel('/foo/bar.pdf');
});
</script>
</body>
</html>
Just replace /foo/bar.pdf with your own URL. Note however that if you try and load PDF documents from different origins, you might run into CORS problems.
I've just setup atom and installed p5.js packages.
it is running but canvas is not visible.
sketch.js
function setup() {
createcanvas(200,200)
canvas.style("visibility", "visible")
// put setup code here
}
function draw() {
// put drawing code here
background(0);
rect(100,100,50,50);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
on running it using atom editor the canvas is not visible on the browser screen
You have to capitalize the second c in createCanvas(width, height);
You can't use canvas.style("visibility", "visible"), so remove that line
3.For future reference, inspect the page and look at the console, I found both of these things from errors.
function setup() {
createcanvas(200,200)//on this line, capitalize the c in canvas
canvas.style("visibility", "visible")//remove this line
// put setup code here
}
Your html is all correct
#Hgbanana is correct. I thinks it would be better if you put your library scripts in the head tag to make sure the libraries load before the page. But it should work anyways.
Since the latest release (on Tuesday) of the Google Maps API, every time I drag the little man onto a road and drop it, I get a script error (http://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/en_gb/util.js). The Street View then displays fine - but there is no Address Control and therefore no way to exit from Street View!
A similar script error also happens when specifying v3.23 (the error is http://maps.googleapis.com/maps-api-v3/api/js/23/7/intl/en_gb/util.js instead)!
However, if I set the controlStyle to 'azteca' everything works fine. As this setting will be removed in August, I'm keen to start using the latest version as soon as possible.
Can anyone help?
Here's some code:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100%; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&v=3.23"> </script>
<script type="text/javascript">
var map;
function Initialize() {
try{
//google.maps.controlStyle = 'azteca';
map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 13, center: new google.maps.LatLng(51.41347, -0.83518), mapTypeId: google.maps.MapTypeId.ROADMAP });
return "";
} catch (err) {
return err.message;
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
If you uncomment the commented line all works fine (but with the old controls).
John
I'm pleased to say that I am now able to answer my own question!
This may be of use to the other poster (Mac21 was it) who was also having this same issue.
The vb.net WebBrowser control is the problem!
In the latest Frozen Release of the Google Maps API, they have stopped supporting IE8 (which is understandable!). The WebBrowser control, by default, uses IE7 for its rendering.
Fortunately, there is a way to over-ride this behaviour by adding a value into a key in the registry. Once this value is in place, the Google Maps API works a treat!
I can't claim any credit for the actual solution as I found it here https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version - so thanks to Rick Strahl!
Enjoy!
John
I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512¢er=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...