I need to keep the zoom level between certain levels (5-19) and not allow the user to zoom in/out any further. I've tried setting the minZoom/maxZoom properties of the view, and also the minResolution/maxResolution, but it doesn't seem to work.
Here is the code:
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM( {crossOrigin: null} )
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 5,
minZoom: 5,
maxZoom: 19,
minResolution: 4891.96981025128,
maxResolution: 39135.75848201024,
projection: new ol.proj.get("EPSG:900913")
})
});
I've tried it using just the settings for minZoom/maxZoom, just the ones for minResolution/maxResolution or all of them... nothing happens, I am stil able to zoom further.
Edit: it was "zoom: 5", not "zoom: 2" in the code above.
view: new ol.View({
center: [0, 0],
zoom: 5,
minZoom: 5,
maxZoom: 19,
minResolution: 4891.96981025128,
maxResolution: 39135.75848201024,
projection: new ol.proj.get("EPSG:900913")
})
Change zoom parameter to 5 or more. It will fix your issue.
try to add maxResolution property to ol.view in map element.
` view: new ol.View({
center: ol.proj.transform([20.6031834, 48.6325657], 'EPSG:4326', 'EPSG:3857'),
zoom: 11,
maxResolution: 4000
})`
Easy map example
var map = new ol.Map({
layers: [map, satMap],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.transform([20.6031834, 48.6325657], 'EPSG:4326', 'EPSG:3857'),
zoom: 11,
maxResolution: 4000
})
});
Related
I have this piece of code in a template :
view: new ol.View({
center: ol.proj.fromLonLat([/*[[${center.longitude}]]*/, /*[[${center.latitude}]]*/]),
zoom: 14
})
this is the value of the object:
center [ Coordinate [latitude=41.33434906005859, longitude=1.8457042932510377]]
but when I see the source of the template I see this
view: new ol.View({
center: ol.proj.fromLonLat([[[${center.longitude}]], /*41.33434906005859*/]),
zoom: 14
})
Please assign the values into js variables first.
var centerLat = /*[[${center.longitude}]]*/;
var centerLng = /*[[${center.latitude}]]*/;
Then use it.
view: new ol.View({
center: ol.proj.fromLonLat([centerLng, centerLat]),
zoom: 5
})
Find the working code in here
QUESTION:
Is it possible to hide the dropdown menu off the MapTypeControl?
(Nothing found in the Google Maps API v3 documentation).
DESCRIPTION:
I'm using the default control with google.maps.MapTypeControlStyle.HORIZONTAL_BAR style and i don't want to create a custom control.
MapTypeControl:
MapTypeControl with dropdown menu on mouseover:
Javascript:
var mapOptions = {
...
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
The MapTypeId.TERRAIN control looks to get added as a drop-down. Do you need it? If not, you can use the following code
var mapOptions = {
...
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
},
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},tree,{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
center: new google.maps.LatLng(3.951941, 102.052002),
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
});
function addInfoWindow(lat,lng) {
var map123 = Ext.getCmp('mygooglemap');
var latLng = new google.maps.LatLng(lat, lng);
map123.SetCenter(latLng);
}
how come i can't set the map to center of the coordinate?
Firebug with this error
TypeError: map123.setCenter is not a function
[Break On This Error]
map123.setCenter(latLng);
EDITED
where is my GMapPanel.js download from https://raw.github.com/VinylFox/ExtJS.ux.GMapPanel/master/src/GMapPanel3.js
then i put it in my localhost/ux/GMapPanel3.js
and this is my config before use the GMapPanel
Ext.Loader.setPath('Ext.ux', 'ux/');
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox',
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
but fail to set Center , why?
I am assuming that you are using the plugin from here: https://github.com/VinylFox/ExtJS.ux.GMapPanel
Assuming that is true, from looking at the code it looks like you need to use getMap() on your gmappanel before calling setCenter():
map123.getMap().setCenter(latLng);
Or, you can specify the setCenter property when configuring the gmappanel:
{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
setCenter: {
lat: 3.951941,
long: 102.052002
},
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
One of the great things about ExtJS/Javascript is that you have access to the code of all of your libraries. When you see errors like "xxx is not a function", it should be pretty self-explanatory: the function you are trying to use is not available on the object on which you are calling it.
On load, I'm setting up the map:
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40, -100),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
I have a variable called current_location that I need to populate with what is essentially 40, -100 ... or the default LatLng that I've declared above.
What is the method to get this? google.maps.getLatLng or something similar??
var current_location = map.getCenter();
Or you could say:
var current_location = new google.maps.LatLng(40, -100);
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: current_location,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
I want to show 3 map type controls: ['roadmap', 'satellite', 'hybrid'] on GoogleMap in my website, but it always show only 'roadmap', and 'satellite' with a checkbox 'Label' under 'satellite' as dropdown menu.
Here is the code:
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid'],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}
});
}
How can I show 3 of them(map type controls) in a row on google map.
Create a custom control for the hybrid-mapType