OpenLayers is showing 720 degree around the globe - javascript

My current OpenLayers looks like the following:
a wrong map http://i1179.photobucket.com/albums/x384/yoyomyo/Picture2.png
It has twice as many continents as there should be.
I was trying to set Bounds to my map, but the entire map just refuses to render:
var map = new OpenLayers.Map('map', {restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)});
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayers([layer]);
map.setCenter(
new OpenLayers.LonLat(-71.147, -42.472).transform( new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),
12);
Does any Map guru know what I did wrong?

WrapDateLine
Try wrapDateLine:false

It sounds like you want to set maxExtent.
http://trac.osgeo.org/openlayers/wiki/SettingZoomLevels
Otherwise I have no clue. :)

It would be easier to answer with an example to work off of. I would zoom in 12 is pretty far out. And yes you can zoom in on OSM http://www.openstreetmap.org/
In that site, they use these values
var centre = new OpenLayers.LonLat(-0.1, 51.5);
var zoom = 5;
setMapCenter(centre, zoom); //It calls map.setCenter()

Okay I give up. I think this is just the way OpenStreetMap displays its map.
I have seen many demos and they are all like the one above.

Related

Handle JavaScript map framework - fix bounds or deny to swipe the map out of the view

I just work on a JavaScript based map (leaflet is the framework).
The problem is I do not have much experience with maps in HTML and JavaScript.
I want to achieve that the map does not disapper after swiping to the left or right border (or even bot/top). Is there a solution to fix the bounds to the view?
I set it up like this:
var bounds = [[0,0], [750,499]];
var image = L.imageOverlay('map.png', bounds).addTo(map);
map.fitBounds(bounds);
Would be nice if someone has a suggestion to this problem.
Greetings
Tobias
UPDATE:
I found an acceptable solution:
var bounds = [[0,0], [750,499]];
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -1,
maxBounds: bounds,
});
As u can see in the init process of the map i allocate maxBound. With this solution there are not fixed bounds as i asked for, but the map always swipes to it initial point back!

adjusting google Map lat-long with a google.Point()

so i have a custom svg marker, so i needed to give it an anchor of
anchor: new google.maps.Point(100, 100). from what i can see this causes my marker to be slightly off from where it should be. how can i correct this, for instance i was thinking something like
var marker = new google.maps.Marker({
anchor:google.maps.Point(sizeX , sizeY ),
position: myLatLng- new google.maps.Point(sizeX, sizeY),
});
but obviously this doesnt work because latlng and Points are different formats. so any idea on how to get around this? how can i convert google.Points into something i can do latLong Operations on

how to make the map clusters larger distance in less dense area in map instead of showing markers

I am using google map(clustering version) from the following link:
google map clusterer
everything is good and for example when I have 1000 location it clusters them but when I have 200 location and density is not high it does not clusters. I want to clusters even those that are not dense what should I do? is there anyway that I can change level of sensitivity of this google map to distance and zoom to be able to cluster even markers in a less dense area?
As you figured out which parameters to use with the above comments, here is how to pass these params to your marker cluster constructor:
var mcOptions = {
gridSize: 50,
minimumClusterSize: 10
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
Where map is your map object and markers is your markers array. The numbers used are only for example. You have to play with these to get the desired results. Hope this helps.
Swift
cluster size change worked for me this way in the latest version and its super easy
// Set up the cluster manager with the supplied icon generator and
// renderer.
let iconGenerator = GMUDefaultClusterIconGenerator()
let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
let renderer = GMUDefaultClusterRenderer(mapView: mapView,
clusterIconGenerator: iconGenerator)
renderer.delegate = self
renderer.minimumClusterSize = 5 // Here is the setting
clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm,
renderer: renderer)
clusterManager.setDelegate(self, mapDelegate: self)

Openlayer Projection

I want to zoom to a particular house in the google mapS, but when I provide its bounds and lattitude and longitude, it does not show images as well as the particular house. Can anyone provide the solution for this?
Solution would be probably to transporm coordinates first. Unfortunately when You pass coordinates to OpanLayers.LonLat(lon,lat) it is supposed to be WGS:84, while OpenLayer.Bounds() needs coordinates given in EPSG:900913.
You should then use Proj4js.transform and pass transformed coordintes in EPSG:900913
You can transform it like this one:
var map = new OpenLayers.Map('map');
var location.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:900913"));

Google Maps centering or marker positioning issue

I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.

Categories

Resources