I used Google map and visited a location and saved it as an html page by this I am able to view that location in future also with zoom functionality. Is it possible to save that location(map) in .pdf format instead of html format with zooming capability.
If yes how and if no then please answer why.
If you go to print that html file, the print dialog will pop up with the default printer. Click 'change' under the printer and choose 'Save as PDF'. You can zoom a pdf in adobe reader.
or (the long way)
Launch InDesign and create a new A4 landscape document. Now press F (Frame tool) on your keyboard and drag a frame with a size you wish to have for the map.
Go to Workspace settings (top right corner of InDesign) and change it to interactive for PDF. Go to Window → Interactive → Buttons. In InDesign you can create buttons very easily. Create any object and then right click and select Interactive - Convert to button.
To import a Google map to flash you need to download Google Map Component - map_1_18.swc.
In Windows 7 navigate to C:Program Files (x86)AdobeAdobe Flash CS6CommonConfigurationComponents. Then create a new folder there and name it Google. Store the .swc file there and then go to this page and follow the instruction to get the API key and save it. Your Flash is now set up to supports Google maps API.
Open the Components panel by pressing CTRL + F7 or click Window → Components in the menu. You should see the Google map library there. Drag and drop it to the Library panel.
Go to Layer panel in timeline and call it e.g. gmap. Open the Action panel (or Press F9) Windows → Actions. Now put there the code below to import the map:
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.Map3D;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.View;
import com.google.maps.geom.Attitude;
// Creating map variable
var map:Map3D;
/ Creating map
create_map();
function create_map()
{
map = new Map3D();
map.key = "your api key";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
}
function onMapReady(event:MapEvent):void
{
map.setCenter(new LatLng(48.207401,16.372805), 13);
map.setAttitude(new Attitude(20,30,0));
map.viewMode = View.VIEWMODE_PERSPECTIVE;
}
In order to create the marker, you need to put some ActionScript again. Go to ActionScript panel and copy the following code. Change the classes to match yours if necessary.
var c:Marker = new Marker(new LatLng(-33.925272,18.423557),
new MarkerOptions({icon:new capeTown()}));
map.addOverlay(c);
var p:Marker = new Marker(new LatLng(50.075651,14.431229),
new MarkerOptions({icon:new prague()}));
map.addOverlay(p);
var v:Marker = new Marker(new LatLng(48.206371,16.375122),
new MarkerOptions({icon:new vienna()}));
map.addOverlay(v);}
If you want to have control fly.to animations with acrobat buttons. Since we call ActionScript from Javascript, we use the function ExternalInterface.addCallback that will build bridge between SWF and Acrobat Javascript. Create a new action layer and put there something similar to this. It should have the same marker coordinates:
function pr(e:MouseEvent = null):void
{
map.flyTo(new LatLng(50.075651,14.431229),12,new Attitude(0,0,4),5);
}
ExternalInterface.addCallback("pr",pr);
function vn(e:MouseEvent = null):void
{
map.flyTo(new LatLng(48.206371,16.375122),9,new Attitude(0,30,3),5);
}
ExternalInterface.addCallback("vn",vn)
function cp(e:MouseEvent = null):void
{
map.flyTo(new LatLng(-33.925272,18.423557),3,new Attitude(0,30,-10),3);
}
ExternalInterface.addCallback("cp",cp)
With map.flyTo function you can control the following parameters: LatLng, Zoom, Attitude, Time.
Now open your InDesign file again, that we have already prepared. Select the frame that will serve as placeholder for the map. With placeholder selected press CTRL + D (File – Import) to place your SWF map. Open the media panel and check Play on Page Load on. Choose None for Poster option. Now you are ready to export it to interactive PDF. Go to File – Export or CTRL + E and select Adobe PDF Interactive.
Open the file in Acrobat. You have your interactive Acrobat buttons and your embedded Google map there. The buttons do nothing now, except for the rollover effect if you have created any. In the Interactive tab tools choose select object tool and double click on one of the buttons. In the windows that arrive go to Actions and from Select action dropdown menu select Run a Javascript, Then Press Add. In a a new windows that open again put the following code:
getAnnotsRichMedia(this.pageNum)[0].callAS(“pr”);
Press OK and close
Reference
You may want to have a look at the Static Maps API https://developers.google.com/maps/documentation/staticmaps/. It allows you to request 640x640 Static Maps and you can adjust the zoom accordingly by altering the parameter. You can either use coordinates or names of places, which will get geocoded for your request.
Here are a few examples with different zoom levels and map types:
640x640, Zoom 14, Terrain Map:
http://maps.googleapis.com/maps/api/staticmap?center=Eiffel+Tower&zoom=14&size=640x640
640x640, Zoom 18, Satellite: http://maps.googleapis.com/maps/api/staticmap?center=Eiffel+Tower&zoom=18&size=640x640&maptype=satellite
Be aware though that according to 10.1.2.(b) of the Terms of Use, you:
(b) No Direct Marketing. You must not print more than 5,000 copies of sales collateral
materials containing a screenshot of the Content for purposes of
commercial sales lead generation ("Direct Marketing") or incorporate
the Content as a core part of printed matter (such as printed maps or
guide books) that you redistribute for a fee. You must contact the
Google Maps API for Business sales team to obtain a direct license if
you desire to do either of the above.
Related
We are using a custom extension to handle window selection in the forge viewer following the steps from this blog post: https://forge.autodesk.com/blog/custom-window-selection-forge-viewer-part-iii.
We're able to set 'partial selection' mode on that extension. Is there a way to do this with the new BoxSelection extension that was added in v7.32?
A new option is added with Autodesk.BoxSelection extension:
useGeometricIntersection
Due to the other issue, this option is not on by default, you can switch it by the code below. After it is loaded again, Left to right mouse drag is containment, Right to left mouse drag is intersection.
async function enableGeomtricBoxSelection() {
// unload the extension, which was loaded with geometric selection turned off
viewer.unloadExtension('Autodesk.BoxSelection');
// reload the extension with geometric selection turned on
ext = await viewer.loadExtension('Autodesk.BoxSelection', {
useGeometricIntersection: true
});
// Display the toolbar button (optional) in the toolbar. You can invoke box
// selection by holding cmd(mac) / ctrl(windows) + mouse drag
ext.addToolbarButton(true);
}
enableGeomtricBoxSelection();
we have implemented the forge viewer in our web application. When clicking the asset in forge viewer, we need to make our entire page should be loaded.
any click event is available when object is selected in viewer?
please provide the function name or code, we need to hit any function when asset selecting.
you can use below even, you can write this event after you create instance of viewer
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectionChanged);
function onSelectionChanged()
{
perform your operation;
}
for zooming the asset you can use
viewer.fitToView([arrayofdbid],viewer.model);
if you want to highlight selection, you can use,
viewer.select([array of dbid]);
When selecting many elements in the Autodesk's online viewer, I double click accidentally and the model zooms to the element. I have to zoom and pan to the view I'm comfortable with again and it is very annoying. Is there a way to disable this functionality in the online viewer?
I found similar questions for the desktop apps (https://forums.autodesk.com/t5/autocad-forum/turn-off-wheel-double-click-zoom-extents/td-p/53144) but not the online viewer.
There is a fairly straightforward workaround for that: create a custom tool and absorb the double-click event. See that article for a start Creating "Tools" for the View & Data API.
To absorb an event implement the corresponding handler and return true:
this.handleDoubleClick = function(event, button) {
// ... do your stuff if needed ...
// event handled
return true;
};
I was working with Sikuli for desktop application like notepad,
but want to know like can I open new tab in browser using Sikuli?
Yes, using Sikuli you can also automate browser. Take images of required web elements (Open new tab button in your case) and stimulate click action using Sikuli APIs.
Yes, you can use Sikuli for web testing.
In this code example, you can use sikuli app to: open browser --> New tab --> Give a like on a webpage (UTAD in this case):
click("mozilla_icon.png")
click("nova_aba.png")
click("endereco.png")
paste("www.utad.pt")
type(Key.ENTER)
wait(8)
click("like_btt.png")
wait(5)
Images of sikuli code:
yes you can use sikuli for performing open tab first take the image of new tab control like in case of FF https://drive.google.com/file/d/0B09BIsDTY_AuZFpMWko1U3BFc0E/view?usp=sharing .Save this image on you local machine. But make sure that image which is used for reference is visible on screen.Call the function mentioned below by and give it Absolute path to above mentioned image.
//provide absolute path in img
public void click_Image(String img)
{
s = new DesktopScreenRegion();
target = new ImageTarget(new File(img));
r = s.find(target);
// Create a mouse object
mouse = new DesktopMouse();
// Use the mouse object to click on the center of the target region
mouse.click(r.getCenter());
}
I have thousands of points that need to be plotted on google maps and got a very responsive maps using the example from https://github.com/ubilabs/google-maps-api-threejs-layer .
Did anyone have a play at this and wondering if it is possible to have different colored markers and possible marker click events?
Appreciate any pointers or examples online.
Millions of clickable data points can be painted on a google map using webgl.
A data point is represented by an x,y pair for a location on the canvas, an int for size, an off screen color, and an on screen color. These values are stored in separate typed arrays.
Each data point has a unique rgb color to act as a key in a lookup table of data point ids.
Create a texture to store the off screen colors and render it to an off screen buffer. On event, load the off screen buffer and use glReadPixels to retrieve the rgb color of the pixel clicked and then find the id in the lookup table. Points on the on screen buffer, what the user sees, can share a common color.
canvas.addEventListener('click', function(ev) {
# insert code to get mouse x,y position on canvas
pixels = new Uint8Array(4);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
if (colorToId[pixels[0] + " " + pixels[1] + " " + pixels[2]]) {
# Pixel clicked is a data point on the map
}
});
Webgl code is lengthy, so only the click event is included.
Here is a live demo and a repo. (angular and coffeescript)
Here is a second example using plain js: webgl-picking-geo-polygons
Here is react-webgl-leaflet
The solution is based on Brendan Kenny's Google Maps + HTML5 + Spatial Data Visualization which explains some of the code in the excerpt above at the 30 min mark, and Displaying WebGL data on Google Maps.
The demo features less than ten data points, but you can just as easily paint over 16 million pickable data points using all combinations of rgb values.
I discovered OpenLayers this past week. Very, very impressive framework. I would strongly suggest taking a look at it. OpenLayers.org is an open source JavaScript web mapping library distinguished from other alternatives, like Leaflet or Google Maps APIs, because of its huge set of components.
I spent the entire weekend creating sample apps by integrating OpenLayers with API's such as MapBox, WebGL etc... After all was said and done, I was extremely impressed with OpenLayers - and I plan to make use of OpenLayers in an upcoming POC/Project.
Here is a link to my test harness. From there you can also download the code for all of the examples, too.
Updates for 2021!!
Google Maps JS now has a WebglOverlayView class and exposes the WebGL context.
const webglOverlayView = new google.maps.WebglOverlayView();
webglOverlayView.onAdd = () => {
// Do setup that does not require access to rendering context.
}
webglOverlayView.onContextRestored = gl => {
// Do setup that requires access to rendering context before onDraw call.
}
webglOverlayView.onDraw = (gl, coordinateTransformer) => {
// Render objects.
}
webglOverlayView.onContextLost = () => {
// Clean up pre-existing GL state.
}
webglOverlayView.onRemove = () => {
// Remove all intermediate objects.
}
webglOverlayView.setMap(map);
Additionally, #googlemaps/three extends this class for easier use with ThreeJS.
// instantiate a ThreeJS Scene
const scene = new Scene();
// Create a box mesh
const box = new Mesh(
new BoxBufferGeometry(10, 50, 10),
new MeshNormalMaterial(),
);
// set position at center of map
box.position.copy(latLngToVector3(mapOptions.center));
// set position vertically
box.position.setY(25);
// add box mesh to the scene
scene.add(box);
// instantiate the ThreeJS Overlay with the scene and map
new ThreeJSOverlayView({
scene,
map,
});
Here is a link to a jQuery/google map app. Not exactly what you are looking for; however you might find the example useful. Feel free to use - it can be downloaded from my site.
Link to app on my website
Click here to download the zip