Google Maps zoom gets overridden, when using a kml file - api

How do I specify zoom level for google maps in a kml file or why is it that my zoom level gets over ridden when I load this file. My question is actually how do I control zoom of a map for the following link:
http://code.google.com/apis/maps/documentation/javascript/examples/layer-kml-features.html

By default, the map is centered and zoomed to the bounding box of the contents of the kml layer.
You can change the default behaviour with preserveViewport property of google.maps.KmlLayerOptions object. If you set it to true the map isn't centered and zoomed.
In the example, use:
var nyLayer = new google.maps.KmlLayer(
'http://www.searcharoo.net/SearchKml/newyork.kml',
{
suppressInfoWindows: true,
map: map,
preserveViewport: true
});
If you want to center and zoom to the contents of the kml layer later, use:
var bounds = nyLayer.getDefaultViewport();
map.fitBounds(bounds);
EDIT:
If you want the map to be always centered (but not zoomed) when the kml layer is loaded, utilize defaultviewport_changed event of the google.maps.KmlLayer object. You have to set the map center to the center of the kml layer default viewport. The event is triggered when the contents of the kml layer are loaded and its default viewport is computed.
google.maps.event.addListener(nyLayer, 'defaultviewport_changed', function() {
var bounds = nyLayer.getDefaultViewport();
map.setCenter(bounds.getCenter());
});

Related

Polyline drawn is showing below buildings

The polyline is drawn showing below building.
(source: gifyu.com)
How can I get the polyline top of all layers
please suggest
adding polyline as
var coordinates = locationsArrToAdd.map({ (location: CLLocation!) -> CLLocationCoordinate2D in
return location.coordinate
})
let polyline = MKPolyline(coordinates: &coordinates, count: locationsArrToAdd.count)
self.mapView.addOverlays([polyline], level: .aboveLabels)
According to Apple, the highest available level you can add an overlay to is the MKOverlayLevel.aboveOverlays constant you are currently using. However, their documentation states that this will:
Place the overlay above map labels, shields, or point-of-interest icons but below annotations and 3D projections of buildings.
From what I can see, the best solution is to disabled buildings in 3D mode, so that your polylines are visible:
self.mapView.showsBuildings = false

How to center map to selected point

I have a featurelayer that consists of points. by clicking some row on the table grid, the map view is switched and only one selected point is displayed
by the JavaScript command:
featureLayer.setDefinitionExpression("ID="+num);
Now my goal is to center the map to this point
First you must get the graphic from featureLayer by featureLayer.graphics. Then use map.centerAndZoom(mapPoint, levelOrFactor) or map.centerAt(mapPoint) to zoom to your graphic.
var graphic = featureLayer.graphics[0];
if (graphic && graphic.geometry.type === "point") {
map.centerAndZoom(graphic.geometry, 17); // or map.centerAt(graphic.geometry);
}

Can I get an Unclickable geoxml3 Shadow Layer that sits entirely behind a Clickable Marker Layer?

In order to have markers that are clickable and marker shadows that are not, I'm setting up two geoxml3 parsers, one for the markers and one for the shadows. That works, but I'm hoping that having two layers will also let me keep the shadow of one marker from falling on another marker. It's a subtle thing, but having a visually horizontal shadow overlaid on a visually vertical marker undercuts the 3-D effect. And in a cluster of markers, things get pretty murky down among the marker stems.
Now, I get that icons are rendered from north to south, so that an icon will peek over the top of an overlapping icon to the south of it. What I was expecting was that each parser would create its own layer, in the sense that a marker layer would appear entirely in front of a preceding shadow layer, with no shadow falling on any marker. It sure looks, though, like the parsers are working north to south down both "layers" at the same time. It seems like for each point they render the shadow image and then the corresponding marker image before moving down to the next point. If the next marker is pretty close to the southwest of the previous marker, its shadow image falls onto that previous marker.
To make sure I wasn't seeing some sort of illusion, as an exercise I put together a map with a couple of big, overlapping shadowed markers. What I'd hope for would be to have the images layered, bottom to top:
East Greenland Shadow
Greenland Shadow
East Greenland Marker
Greenland Marker
Instead, they appear to be layered:
East Greenland Shadow
East Greenland Marker
Greenland Shadow
Greenland Marker
with the Greenland Shadow falling on the East Greenland Marker.
So, can I get all of the markers to appear, collectively, in front of all the shadows? I can't track it down at the moment, but I believe I saw a list of standard Google Maps layers somewhere, which included something like a non-clickable "Shadow Layer". When I create a google.maps.KmlLayer with standard icons, the API automatically pulls up the corresponding shadow images and places those on what I guess is the Shadow Layer, which sits entirely behind the KmlLayer I asked for.
In my current project, I need a geoxml3 marker layer, so I can programatically access the placemarks. Since I can actually work with 32x32 icons, in this case I can just fall back to using a KmlLayer for the shadows, but for future reference it would be great to have the option of a non-clickable geoxml3 layer that sits entirely behind a clickable layer. Is there a way to do that? Would that be a matter of somehow rendering onto that Google Maps Shadow Layer?
Here's the script:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(71, -45),
zoom: 4,
preserveViewport: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Shadow Layer
var shadow = new geoXML3.parser({
map: map,
zoom: false,
markerOptions: {clickable: false}
});
shadow.parse('greenland_shadow_5.kml');
// Marker Layer
var blues = new geoXML3.parser({
map: map,
singleInfoWindow: true,
zoom: false,
suppressDirections: true,
markerOptions: {
shape: {
type: 'circle',
coords: [38,38,38]
}
}
});
blues.parse('greenland_5.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
The two KML files are identical except for the IconStyles:
<IconStyle>
<Icon>
<href>bluemarker_76x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="38" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
versus:
<IconStyle>
<Icon>
<href>markershadow_188x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="96" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
You could take the "MarkerShadow" class and use it to make a layer of just shadows. and make a layer with just markers: proof of concept
- disadvantage: processes the same KML twice.
I can think of 4 options for you:
Put your shadows in a separate KML file and display them using the native google.maps.KmlLayer, that should put them underneath all the google.maps.Marker objects, which is what geoxml3 uses to render the icons. The issue with KmlLayer is that it does not support scaling, all icons are scaled to 64x64 and if they can't be, they are replaced by the default blue icon. KmlLayer is rendered in the overlayLayer pane.
create custom "markers" using Custom Overlays that support combining a marker image with a shadow image. Used to be supported natively by the Google Maps Javascript API v3, but they removed that functionality with the "visual refresh". It looks like the "shadowPane" still exists (at least for now), you could put all the shadows there.
overlayShadow contains the marker shadows. It may not receive DOM events. (Pane 2).
mapPanes reference
Use the zIndex option of the google.maps.Marker object to put the shadows below the markers. Put all the shadows at zIndex = 0 (so they are on the bottom, then use an algorithm to put the markers in their default orientations:
zIndex: Math.round(latlng.lat()*-100000)<<5
"manually" add a shadow to the markers in a custom "createMarker" function (append the shadow image to the shadowPane)
proof of concept marker with shadow

Thumbnail of previous image instead of cancel button while camera is open

i want to show the thumbnail of the previous image taken by camera instead of the cancel button while camera is running ...
Is that possible ?? Need help ..
Yep. Just capture the last image, keep it in memory (or save it to disk), then use it as one of the controls. We can do this using the overlay property of the Titanium.Media.showCamera function. Here is a quick example:
First we need an overlay view to show the image.
var overlayView = Ti.UI.createView();
var imageView = Ti.UI.createImageView({
width:44,
height:44,
left : 5
});
overlayView.add(imageView);
Now this is the function we use to open the camera with the overlay view. Note that we don't have controls so you need to add those (for closing etc). All we do right now is set the overlays image.
Titanium.Media.showCamera({
success:function(event) {
// called when media returned from the camera
imageView.image = event.media;
},
cancel:function() {},
error:function(error) {},
saveToPhotoGallery:true,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
overlay : overlayView,
showControls: false // This is important!
});
To really make this work, you may need to save the event.media in a global variable, or use a similiar technique make sure overlayView will not be nulled out / garbage collected.
Also this is a barebones solution, not very robust, but this is the basic method I would use!

Mozilla PdfJs Operations

given a PDF that is rendered in the browser using pdfjs, are there functions to do the following basic view operations:
rotate
flip
zoom
If not, what are the best strategies I can use to do the operations above?
You can set rotation when you getting viewport form PdfPage object:
var viewport = pdfPage.getViewport(scale, rotation);
If you want to immediately set all the parameters, you can clone viewport, created with scale = 1:
var defaultViewport = pdfPage.getViewport(1);
var neededViewport = defaultViewport.clone({scale: needScale, rotation: needRotation, dontFlip: true});