I have noticed that the Bing layer from OpenLayers disappears at low (0) and high (20) zoom levels. How could I avoid it? Is it possible to force some limit on the zoom levels?
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var map;
map = new OpenLayers.Map('map', {
allOverlays: false,
autoUpdateSize: true,
displayProjection: new OpenLayers.Projection('EPSG:4326'),
numZoomLevels: 16,
projection: new OpenLayers.Projection('EPSG:900913'),
zoomMethod: null,
units: 'km'
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
var osm = new OpenLayers.Layer.OSM();
var bing = new OpenLayers.Layer.Bing({
name: "Road",
key: apiKey,
type: "Road"
});
map.addLayer(osm);
map.addLayer(bing);
var center = new OpenLayers.LonLat(-0.125, 51.5);
center.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913'));
var zoomLevel = 4;
map.setCenter(center, zoomLevel);
$('#zoomLevel').html(zoomLevel);
map.events.register('zoomend', map, function() {
$('#zoomLevel').html(this.zoom);
});
Here is my codepen and as you can test, this behaviour does not occur with the OSM layer. Please help me fix this.
Thanks
Bing Maps map tiles are only available at zoom levels 1 - 19. In Bing Maps zoom levels 20 and 21 are birds eye imagery which projected type of imagery not available in Open Layers. Zoom level 1 in Bing Maps is only 2 tiles wide. Zoom level 0 would be a single tile for the whole word which isn't used in Bing Maps.
Related
Is it possible to show multiple layers in google maps? For example showing both the transit and traffic layers. I am looking to great a map with multiple layers using rail, bus, car, etc. traffic data to show bottlenecks, hotspots etc.
var map = new google.maps.Map(document.getElementById("map"),
{
zoom: 13,
center: new google.maps.LatLng(53.4760053,-2.2198102),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var transitLayer = new google.maps.TransitLayer();
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map); // can only appear to show one label at once?
You could try making one layer transparent...
I'm implementing a ground overlay that covers the entire world map. I have 2 issues at the moment.
First the image even if it's proportioned for the entire world map and I have stretched it (I think) properly, still displays somewhat weirdly stretched.
Second I'd like to tile the ground overlay to 'cover more worlds' when zoomed out excessively, but don't know if tiling is possible.
here's my code:
var start = new google.maps.LatLng(0, 0),
sw = new google.maps.LatLng(-84, -178), // South West
ne = new google.maps.LatLng(84, 178), // North East
imageBounds = new google.maps.LatLngBounds(sw, ne),
mapOptions = {
zoom: 3,
center: start,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),
oldmap = new google.maps.GroundOverlay("images/world.png", imageBounds);
oldmap.setMap(map);
You can see it here:
http://jsfiddle.net/maurizioliberato/A64nb/1/embedded/result/
Thanks in advance
Did you concern about projection when you stitch the images? Google Maps API uses Mercator Projection.
So I recommend you use a stitcher software to make a map image; PTGui, Hugin, etc.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
Using the Google Maps API is it possible to detect whether or not satellite tiles will be available given coordinates and a zoom level?
Yes, it is possible. Read the "Maximum Zoom Imagery" section of the Google Maps API v3 for an explanation and a code sample.
http://code.google.com/apis/maps/documentation/javascript/services.html#MaxZoom
Here is the sample code from that documentation that "shows a map of metropolitan Tokyo. Clicking anywhere on the map indicates the maximum zoom level at that location. (Zoom levels around Tokyo generally vary between zoom levels 18 and 21.)"
var map;
var maxZoomService = new google.maps.MaxZoomService();
var tokyo = new google.maps.LatLng(35.6894875, 139.6917064);
function initialize() {
var mapOptions = {
zoom: 11,
center: tokyo,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', showMaxZoom);
}
function showMaxZoom(e) {
maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
if (response.status != google.maps.MaxZoomStatus.OK) {
alert("Error in MaxZoomService");
return;
} else {
alert("The maximum zoom at this location is: " + response.zoom);
}
map.setCenter(e.latLng);
});
}
If you go to http://maps.google.com and zoom in until Google runs out of map the viewer automatically transitions to Streetview-mode (at least if Streetview is available at the location you zoomed in on).
I'm mucking around with the Google Maps v3 API. Is there a way to replicate the map-to-streetview effect here? I can enable Streetview just fine by putting streetViewControl: true in the mapOptions, but the user still has to manually drag the stickman onto the map to get Streetview going.
This will open a panorama at the map center:
var G = google.maps;
var svpContainer = document.getElementById('svp'); // Make sure this div exists
var svp = new G.StreetViewPanorama(svpContainer);
G.event.addListener(map, 'zoom_changed', function(){
var z = map.getZoom();
var center = map.getCenter();
if (z > 15) {
svp.setPosition(center);
svp.setVisible(true);
}
});
Tested over Dallas, TX. Make sure you have a div with id 'svp'