I have offline map for leaflet.
Due to the reason of minimal weight in megabytes this map has 2 sectors:
First sector has zooms from 11th up to 14th.
Second sector has zooms from 11th up to 17th.
I need when a user see map in first sector and want to ZOOM in up to more than 14th zoom the map will not allow this and automatically zoom out to the 14th zoom.
And when user want to ZOOM the second sector - it's work properly up to the 17th zoom.
I use this code:
var layer1 = new L.tileLayer('map/all/{z}/{x}/{y}.png', { minZoom: 11, maxZoom: 14, errorTileUrl:'empty.png', opacity:1});
var layer2 = new L.tileLayer('map/center/{z}/{x}/{y}.png', { minZoom: 15, maxZoom: 17,errorTileUrl:'empty.png', opacity:1});
var map = new L.Map('map', {
center: new L.LatLng(55.74178084263216, 37.607244264547475),
zoom: 11,
minZoom: 11,
maxZoom: 17,
layers: [layer1,layer2]
});
You can catch the event when the map's zoom level changes, and make appropriate decisions here based on which one of your sectors is showing.
I'm not sure how you're determining which sector is shown, so my example code below has a comment. Put your logic in here for determining which layer is shown.
// Called when Map zoom changes
map.on('zoomend', function() {
if (/*The map is set to Sector 1*/) {
// If the user zooms past 14, this will set them back to 14.
if (map.getZoom() > 14) {
map.setZoom(14);
}
}
});
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 am working on a project with Google Street View.
We want to make the transitions smoother by caching the pages around our start point and adding to the end point (depending on our heading) as we go.
Has anyone had experience doing that with Street View?
When we create the map and panorama object, it seems to change between initial creation and final loading.
var map = new google.maps.Map(document.getElementById('streetview'), {
center: vancouver,
zoom: 18,
streetViewControl: true
});
// We get the map's default panorama and set up some defaults.
panorama = map.getStreetView();
panorama.setPosition(vancouver);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
panorama.setOptions({
'addressControlOptions': {
'position': google.maps.ControlPosition.BOTTOM_CENTER
}
});
panorama.setVisible(true);
I have created marker clusters for marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(propertiesData[i][1], propertiesData[i][2]),
map: map
....
});
var myOptions = {
boxStyle: {
marginTop:-60+'px'
}
};
markerCluster = new MarkerClusterer(map, markers,markerClustererOptions);
Till this I am able to work and show cluster.
Now I want to apply a check on zoom changed event where I need to get all visible clusters at that zoom level.
google.maps.event.addListener(map, "zoom_changed", function() {
// NEED TO GET ALL VISIBLE CLUSTERS HERE
});
I think you can do that with the Max zoom level setting in the MarkerClusterer.
As it is shown in this demo, if you set the Max zoom level to 7, then when user zoom in to zoom level 8, MarkerClusterer would stop clustering the markers.
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
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.