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
Related
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
})
});
Here is the coordinates of Tehran on Google Maps.
https://www.google.com/maps/place/Tehran/#35.6964895,51.0696315,10z/data=!3m1!4b1!4m2!3m1!1s0x3f8e00491ff3dcd9:0xf0b3697c567024bc
35.6961° N, 51.4231° E
I'm trying to find this coordinate in OpenLayers but I had no luck, here is my code:
map = new ol.Map({
target: 'sample-map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [35.6961, 51.4231],
zoom: 4
})
});
I'm also trying to get current coordinates in degrees but I don't know how.
I'm not entirely sure what is the problem, but I can say this: you need to swap your parameters on center to [51.4231, 35.6961].
According to the Openlayers documentation the center is in the format [x-axis, y-axis] or in your case [East, North].
In your specific case your source projection is NOT lat/long so you have to convert. The following code should work for you:
map = new ol.Map({
target: 'sample-map',
layers: [ new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([51.4231, 35.6961], 'EPSG:4326', new ol.source.OSM().getProjection()),
zoom: 10
})
});
Here are the code i am using to get google Map, But i am a getting blank map on response.
function initialize(address) {
jQuery('#mapgoogle').show();
jQuery('#store_img_default').hide();
var myLatLng = new google.maps.LatLng( 50,50 ),
myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'mapgoogle' ), myOptions ),
marker = new google.maps.Marker( {position: myLatLng, map: map} );
marker.setMap( map );
moveMarker( map, marker,address );
}
Below is the Response from googleMap.
http://i.stack.imgur.com/pcf22.png
This code was fully working since last 6 months, and suddenly this creating issues. Any help in this will be highly appreciable.
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
I am trying to use Google maps with backbone.js. So I created a view as below. But this isn't working for me. Any inputs?
(function($){
var CreateMap = Backbone.View.extend({
tagName: "div",
initialize: function() {
_.bindAll(this, 'render');
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.el, myOptions);
this.render();
},
render: function() {
return this;
}
});
var mapview = new CreateMap({el: $("#map_canvas")});
})(jQuery);
As PhD noted, you need to have render actually do something. Here's my own working example, which assumes there is some existing <div id="map"></div> on the page:
APP = {};
APP.Map = Backbone.Model.extend({
defaults: {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
});
APP.map = new APP.Map();
APP.MapView = Backbone.View.extend({
id: 'map',
initialize: function(){
this.map = new google.maps.Map(this.el, this.model.attributes);
this.render();
},
render: function(){
$('#map').replaceWith(this.el);
}
});
APP.mapView = new APP.MapView({model: APP.map});
Instead of passing the #map_canvas div, set it up so you inject mapview.render().el into your DOM. You could do this in a backbone router class.
Calling the render function from your initialization function is not necessary.
If after this you still don't see anything, add a className to your view and make sure you have the right CSS width/height styles linked to that class.
Are you passing in Backbone to the scope of your wrapping function?