map.setZoom() is not working but map.setCenter() is working - javascript

Part of my code looks like this, I am able to center the map using
map.setCenter(myLatlng);
but after that I am trying to zoom the map
marker_id = id;
marker_id = new google.maps.Marker();
marker_id.setIcon(image);
myLatlng = new google.maps.LatLng(loctionupdateobj[id].lat, loctionupdateobj[id].lang);
marker_id.setPosition(myLatlng);
marker_id.setMap(map);
map.setCenter(myLatlng);
alert(map.getZoom());
map.setZoom(10);
alert("game again " + map.getZoom())
You can see the
alert("game again " + map.getZoom())
in the code it is giving me an alert like game again 10 but the zoom level is never going to 10.
But the first alert is 4 (which I set during initialsation).
As I am not able to setZoom, I am creating a new map instance each time when I am adding new markers.

Finally found !!!
The previous programmer who coded my project wrote a line
google.maps.event.clearListeners(map);

So the second alert is retuning 10, what is the first alert returning, is this 10 too?
If so you're zoom is already 10 (sorry if it's a stupid question, but no mention of this).

My map works with the places api and is looking for a location.
I first initialize my map with zoom : 23.
Once I search and submit my location the map defaults to its original zoom. So i had to use map.setZoom(23), It was working at first then just stopped.
It's strange because map.fitBounds() works perfectly.
setTimeout(function(){
map.setZoom(23);
console.log('zoomed');
},1);
My dirty solution for the time being. ¯\_(ツ)_/¯

To solve this issue, you can try calling the setZoom method after all the markers have been plotted on the map and all the other methods such as setCenter, bounds.extend are called. So u have to call setZoom method in the last marker function.

Related

Setting a Max Boundary is not working Leaflet

I seem to be unable to set a Max Boundary, so that the map bounces back after the user has reached a certain point. Also every time I've tired to change the fitbounds() code the map disappears from my Website.
I've looked at the Leaflet documentation over and over again, with very little luck and been looking through Google for any answers and all the code I have tried has not work. I believe I'm missing or not seeing something really simple.
Any ideas?
If all you want is to restrict the view to a given geographical boundary, the simplest solution is to set the maxBounds option. Unless you want to do it dynamically, in which case the option to use is setMaxBounds. The fitBounds method seems redundant and may actually be the reason why you aren't getting the desired outcome.
var southWest = L.latLng(52.456009,-10.685582);
var northEast = L.latLng(51.699800,5.215615);
var maxBoundArea = L.latLngBounds(southWest, northEast);
var map = L.map('map', {
zoomControl:true,
maxNativeZoom:28,
minZoom:8,
maxBounds: maxBoundArea
});
I would suggest writing a constrain function
function constrain(n,low,high){
return Math.max(Math.min(n, high), low);
}
* Note: I did not think of this myself, it is a function in p5 and thought it might work*
Documentation:
https://github.com/processing/p5.js/blob/0.7.3/src/math/calculation.js#L76

Mapbox.js set map default zoom option

I have a mapbox.js map but the parameter zoom doesn't seem to be doing anything
and I can't figure it out in the documentation. whatever I set zoom to the zoom level always defaults to my project zoom level Here is the code:
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
$(document).ready(function() {
var map = L.mapbox.map('map', 'nhaines.hek4pklk', {
zoom: 1
});
// disable drag and zoom handlers
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
if (map.tap) map.tap.disable();
});
It took me a lot of digging around but I figured this out on my own. The dev's didn't respond yet. We were going about this all wrong. Here's what to do:
First, create the MapBox object, but set zoomAnimation to false. This question helped me realize that trying to setZoom while a CSS3 animation was in progress wouldn't ever work because it's tough to break out of. At least that's what I think is going on. Setting zoomAnimation to true allows the map to animate in and bypasses any custom zoom levels, so clearly this is very important.
var map = L.mapbox.map('map', 'username.map_id', {
zoomAnimation: false
});
Next, create a polygon layer and add to map from map's geojson. You find this within your MapBox projects > info tab. (In my case this geojson happens to contain the lat/lng coords of a polygon but your case may be different. featureLayer() should still add the geojson either way.)
var polygonLayer = L.mapbox.featureLayer().loadURL('http://your/maps/geojson').addTo(map);
After polygon layer (or whatever your lat/lng coords are of) has been added to map
polygonLayer.on('ready', function() {
// featureLayer.getBounds() returns the corners of the furthest-out markers,
// and map.fitBounds() makes sure that the map contains these.
map.fitBounds(polygonLayer.getBounds());
map.setView(map.getCenter(), 10);
}
Apparently fitBounds satisfies the map requirements to allow setView to be called on it, since now you can just call the map object directly to get the center lat/lng.
I haven't tested this in simple cases - I adapted this code from mine which checks if an address's lat/lng coords fall within a polygon while iterating over a series of MapBox maps. It should get you going though. Hope it helps!

ArcGIS JavaScript API (3.8) centerAndZoom does not appear to be working

I'm new to ESRI's JavaSCript API and am very impressed by its ease of use and speed. As part of a interactive data portal I have users enter latitude and longitude as decimal degrees as part of a spatial query to return State, County and FIPs. That part works just fine, but as an added feature I want to draw a dot graphic on an existing map showing the entered coordinates location (DONE) then Center and Zoom to said point at some reasonable scale.
The centerAndZoom method is the logical choice here, but it doesn't seem to be working. My sense is that the Map needs to be refreshed but I can't seem to figure this one out.
I'm sure I'm missing something fundamental here; Thanks in advance for your time!
function DrawPointAndZoom() {
// Get currently entered lat/long.
var lat = $('#SiteLatitude').attr('value');
var long = $('#SiteLongitude').attr('value');
var latLongPoint = new esri.geometry.Point(long, lat, new esri.SpatialReference({ wkid: 4326 }));
//Draw point
var symbol = new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([255, 0, 0]));
var graphic = new esri.Graphic(latLongPoint, symbol);
var infoTemplate1 = new esri.InfoTemplate();
infoTemplate1.setTitle("point1");
infoTemplate1.setContent("test point 1");
graphic.setInfoTemplate(infoTemplate1);
map.graphics.add(graphic);
map.centerAndZoom(latLongPoint, 15);
}
95% of the time, anything that doesn't work with a Point in the JS API is due to the spatialreference being wrong. :)
Check that your map's SR (map.spatialreference.wkid) is the same as the point's (4326, as you've defined it here.) You may need to use everyone's favourite function, geographicToWebMercator if the map is using one of its usual Web Mercator coordinate systems.
Edited with details from Tony's comment/answer:
var webMercPoint = esri.geometry.geographicToWebMercator(latLongPoint)
{Missing code here}
map.centerAndZoom(webMercPoint, 15);
Yes! thanks for taking the time to respond. I went down that hole yesterday and tried it with a webMercatorPoint... and viola it worked!
var webMercPoint = esri.geometry.geographicToWebMercator(latLongPoint)
{Missing code here}
map.centerAndZoom(webMercPoint, 15);
Much Appreciated!

Google Maps receive polygon coordinates

I use this example to draw polygon on google maps :
http://nettique.free.fr/gmap/toolbar.html
After drawing a polygon, I would like to read coordinates of polygon created by me. So, in file mapToolbar.js (which is part of above example from nettique.free.fr) in javascript function called stopediting (is run when I click on 'hand' button).
So, my solution to read those coordinates is somekind of loop which I read coordinates :
MapToolbar.features.shapeTab.shape_1.latLngs.b[0].b[i].ib - latitude
MapToolbar.features.shapeTab.shape_1.latLngs.b[0].b[i].jb - longitude
It works quite well, but my problem is that from time to time the suffix ib and jb change to for instance Ya and Za. I hope that you know what it means. I must change my code ;/ but i do not want to! ;)
Do you know how to fix this issue ?
MapToolbar.features.shapeTab.shape_1 is a google.maps.Polygon-instance.
Use getPath() to retrieve the path and the method forEach to loop over the path:
MapToolbar.features.shapeTab.shape_1.getPath().forEach(function(latLng,index){
console.log('shape_1',index,latLng.toString());
});

slow loop on google maps markers

i have a question about google maps markers and javascript.
i have a page that only has a div (map_canvas) that creates a marker when you click on it, and a textfield where you input the name of a marker and the marker starts bouncing ...
to keep track of the markers i have an array of all the markers added. The problem is that when it gets to 20+ markers the UI tends to become unresponsive while its looping...
here is the loop that i have, its inside a function that takes the marker id as a parameter
for (var i=0; i < markers.length; i++) {
if(markers[i].id == id)
{
if(markers[i].getAnimation() != null)
{
markers[i].setAnimation(null);
}
else
{
markers[i].setAnimation(google.maps.Animation.BOUNCE);
}
}
else
markers[i].setAnimation(null);
}
please let me know if this is a re-post or if i should provide more information ... this is my first question here!
I would suggest using id as the index in your markers array so that you can access each marker directly rather than looping to find it. Once you have a "current" marker, make a note of which it is in order that you know which one to stop bouncing when you start the next one bouncing.
var lastmarker;
...
if (lastmarker) {markers[lastmarker].setAnimation(null)}
markers[id].setAnimation(google.maps.Animation.BOUNCE);
lastmarker=id;
Of course, the viability of this suggestion depends on the rest of your code, of which we know nothing.
I would suggest adding steps/breakpoints in your code, not sure what coding environment you are in.....if you are just using straight html I would suggest using firebug to step through your code using breakpoints as this will allow you to see the issue in your code. I am guessing it is code related.
If you have already done so, I am pretty perplexed on your issue as to why it would just stop working at 20 or more markers....if it is not code related I would venture to guess that it has something to do with Google's api as I have run into some real odd occurrences once you get past their maxes on certain things although I haven't experienced a max on marker placement before, I have done something like what you are doing but in asp environment with many more markers.

Categories