We Keep Coding

angularjs google map zoom map after max zoom exceeded

I want to zoom the google map after it exceeds it maximum zoom level. I google it and didn't find any solution. I am building a rooftop app any one can please help me on this.

The Google Maps API docs show that the google.maps.MapOptions object has a property called maxZoom that you can set when creating the map to set the maximum amount the map can be zoomed.
You can also set minZoom in the same way. So as long as your users don't need to be able to zoom very far out in order to move around effectively (e.g. if your app moves the map programmatically somehow) then you may even want to set the minZoom to a realistic value to ensure that people don't accidentally zoom too far out when trying to scroll down the page (I personally do that all the time with embedded google maps and it drives me crazy). But be careful with this: you don't want to ruin the user experience by removing your users' ability to navigate the map efficiently.
One thing you'll notice when reading the description of the maxZoom and minZoom parameters is that the docs don't specify the range of acceptable numbers. So how are you to figure out what numbers to pass in? And how do you change the max zoom after creating the map?
If the Map object is bound to a variable called map, then you can get the current zoom with map.getZoom() and you can set the current zoom with map.setZoom(zoom) where zoom is floating-point Number such that zoom >= 0. (Note: These methods get and set the "zoom" property of the Map object, but making changes directly to map.zoom will not cause the map to change, so be sure to use the getter and setter methods).
The most-zoomed-out level for the zoom property is 0, but the most-zoomed-in level will actually vary depending on where in the world the map is focused. (This makes sense, since street-level in some places could be a mile underground in others depending on elevation.) And at some zoom level, Google will no longer have (usable) satellite images.
Enter the MaxZoomService Class. This object's constructor can be found at google.maps.MaxZoomService. The instances of this class have only one useful method: getMaxZoomAtLatLng which takes a LatLng instance or a LatLngLiteral as its first parameter and a callback function to handle the result as its second.
A LatLng instance can be created with the google.maps.LatLng constructor, and a LatLngLiteral is just a normal object literal that has a lat property and a lng property. But since you'll probably be passing in a LatLng object from another method like map.getCenter(), you shouldn't have to worry about it.
Here's an example showing how to find out the maximum zoom available on the Satellite View at the center of the map's current view.
var mzs = new google.maps.MaxZoomService(); // Create a MaxZoomService instance
var mapCenterLatLng = map.getCenter(); // Get a LatLng instance
var handleMaxZoom = function(res) { // Callback Function accepting MaxZoomResult instance
if (res.status === "OK") {
// handle success
console.log("Max Zoom: " + res.zoom); // Print max possible zoom
map.setZoom(res.zoom); // Set the zoom to the max possible
} else {
// handle failure
console.log("Oops");
}
};
mzs.getMaxZoomAtLatLng(mapCenterLatLng, handleMaxZoom);
// => Max Zoom: [Number]
Edit:
If you really want to exceed the maximum zoom level (not just the default maximum zoom level as described above) your only real option is going to be using css transforms. Depending on how complicated the page layout is, this could end up being pretty difficult to get perfect.
I should note that this is typically not a good idea even if you can manage to get the layout to look good and the images to not be blurry. It carries all the same problems as using CSS to transform canvas elements (and some additional problems on top because it's not as simple as dealing with just a single DOM element). One notable problem is that applying CSS transforms will not affect the internal coordinates of the map (like those contained in click events) so you'll have to transform those every time you want to use them. Additionally, since the primary map div (the one returned by map.getDiv()) has to sit inside a container, this method will often cause it to overflow its container and you'll have to deal with that added complexity.
If you still want to do it, then here are some pieces of the puzzle that may help:
var mapCanvas = map.getDiv(); // The "main" div element that contains the map
var container = mapCanvas.parentElement; // You'll need some sort of container here
var scalingFactor = 1.5; // => Set a scaling factor (ex: 1.5 means scale it to 150% normal size)
/* Use CSS zoom property and/or vendor transforms to scale the map (though you could do this in straight CSS instead) */
mapCanvas.style.zoom = scalingFactor;
mapCanvas.style.MozTransform = 'scale(' + scalingFactor + ')';
mapCanvas.style.WebkitTransform = 'scale(' + scalingfactor + ')';
/* Then try to fit the scaled map back into its container, which will depend on how you're displaying it */
mapCanvas.style.width = "calc(100% / " + scalingFactor + ")"; // The CSS 'calc()' method might be useful here

mapbox fit bounds to country

i just want fit my map to my country. I saw some example from https://www.mapbox.com/mapbox-gl-js/example/fitbounds/ and it's fit to whole Kenya. It's a simple code but i don't know why this function takes two lat and longs. I just google it for what is Keyna lat and long? it's 1.2667° S, 36.8000° E. Why this is different than google's result.
function fit() {
map.fitBounds([[
32.958984,
-5.353521
], [
43.50585,
5.615985
]]);
}
How to fit to my specific area just like this.

If i search for the bounding box of Kenya, i find the following:
http://isithackday.com/geoplanet-explorer/index.php?woeid=23424863
Using those coordinates, it's looks ok:
map.fitBounds([
[-4.71712, 33.90884], // Northeast
[4.62933, 41.899059] // Southwest
]);
Example using Leaflet on Plunker: http://plnkr.co/edit/yRuTxjmQxcoqkVyFbE4q?p=preview

.fitBounds takes two latlng arguments, one for the upper-left corner of the mapview and one for the lower-right corner.
If you would like to just center the map on Kenya, you could use:
map.flyTo({center: [Lat, Lng]})

I also was looking for the answer on this question. Leaflet, for example, has a property of a layer to get its bounds (e.g.,map.fitBounds(layer.getBounds());). Mapbox GL doesn't have anything like that. At least not that I know. To handle this you may access the first and the last coordinates of the currently selected feature: map.fitBounds([feature.geometry.coordinates[0], feature.geometry.coordinates[feature.geometry.coordinates.length-1]]).
Here is the whole piece of code in case you want to have a popup with a Zoom button on it:
map.on('click', function (e) {
map.featuresAt(e.point, {layer: 'route-lines', radius: 10, includeGeometry: true}, function (err, features) {
if (err || !features.length)
return;
var feature=features[0];
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(popupTemplate)
.addTo(map);
var buttonZoomFeature = document.getElementById('button-zoom');
buttonZoomFeature.addEventListener('click', function (e) {
map.fitBounds([feature.geometry.coordinates[0], feature.geometry.coordinates[feature.geometry.coordinates.length-1]]);
});
});
});
var popupTemplate = '<div id="popup-div">\
<button id="button-zoom" class="button-zoom" type="button">Zoom to</button>\
</br>\
</div>';
PS. This approach works fine when the layer is a number of lines (roads, for example). If you want to fit the bounds to a country, which is a polygon, you may try taking the first longitude-latitude point as the one that has min latitude and for the second point the one that has max longitude. Or something like that. Just try to play around with this approach. I am sure it will work out.

cesium - moving billboards

I am testing Cesiumjs to see if it can reflect a near-real-time expreience - for example: position of airplanes.
For that, I need to draw billboards and make them move - which I know is possible with cesium, just not sure how.
The code looks like this:
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
var billboard = {
image : '/path/to/logo.png',
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
};
billboards.add(billboard);
My question is how do I change the position of the billboard. I couldn't find ant documentation that would explain.
I thought doing:
billboard.position = ... //new position
but how will cesium know that I've changed the position attribute unless it somehow turns that reference into a observable object.
So how do I update the location?
Thanks.

Cesium does indeed listen for changes to billboard.position
(source code here), so it is correct behavior for apps to simply write a new position.
Note that you must write the whole position at once, meaning you may not write to billboard.position.x. Instead, keep a "scratch" Cartesian3 around (don't create a new one every animation frame at 60fps), write to the x,y,z properties of your scratch variable, and then assign your scratch variable to billboard.position. You can see in the source that the assigned value will be cloned into another pre-existing Cartesian3, so you may immediately reuse the scratch variable.
Here's an example:
// Just once at app startup. Don't call "new" at 60fps.
var scratchCartesian3 = new Cesium.Cartesian3();
var ellipsoid = viewer.scene.mapProjection.ellipsoid;
function onTick() {
// This is safe to call at 60fps.
billboard.position = Cesium.Cartesian3.fromDegrees(
lon, lat, alt, ellipsoid, scratchCartesian3);
}
Also note that your question and the above answer are focused on the "Graphics Primitive" layer of the Cesium API. Cesium has one higher layer, called the "Entity" API, that you can use if you want Cesium to handle the concept of user-selectable objects with pop-up descriptions etc. Here's a Sandcastle demo showing how to add a billboard as a property of an entity, instead of as a primitive. This allows you to add other properties to the same entity, for example a name, description, label, 3D model, etc, and have them all be controlled from the same position property, and have Cesium take care of popup descriptions. The position property is more complex for entities than for primitives, for example it can be constant or sampled. This allows entities to change position over time when the timeline is shown.

LatLong falls within a given polygon in D3 + Leaflet

I am trying to learn how to use the Javascript library leaflet along with d3 to create various map visualisations.
I have been following this tutorial which creates a choropleth map of the United States with some interactivity. This provides some of what I need, but the main functionality I want is to have a list of lat/long coordinates classified according to which region they belong to.
This would mean, in the tutorial map for example, if I had a lat long value (55, -3) which fell within the state of Arizona's polygon, the program could classify this point as belonging to Arizona.
Is there a function in the leaflet (or d3) library which will allow me to enter a lat long coordinate as a parameter and return the name of the feature it belongs to? The tutorial above allows you to attach a function to every feature via the onEveryFeature property and can fire mouseover events when each feature is hovered over. Surely there is a way to extend this functionality to numerically entered data instead of mouse points?

Leaflet would need some tweaking if you wish to do this. It leaves the handling of mouseclicks to the browser and therefore does not need logic for determining if a point lies inside a polygon.
I am not very knowledgeable about d3 but it's not glaringly obvious to me how it'd do this out of the box. Looking at the polygon code, I do find a clipping algorithm and intersection of infinite lines.
If you add a third library, however, this should be rather simple.
The OpenLayers Geometry library can determine if a point lies inside a polygon.
EDIT: I got this to work, see also http://jsfiddle.net/VaY3E/4/
var parser = new OpenLayers.Format.GeoJSON();
var vectors = parser.read(statesData);
var lat = 36;
var lon = -96;
var point = new OpenLayers.Geometry.Point(lon, lat);
for( var i = 0; i< vectors.length; i++ ){
if(vectors[i].geometry.intersects(point)){
alert(vectors[i].attributes['name']);
}
}
Or you could use https://github.com/maxogden/geojson-js-utils , a bit more specific library. It looks like it knows how to read GeoJSON and it has a method gju.pointInPolygon. I've not tested it though.

JavaScript: best way to maintain bounds (Google Maps)?

I am using the Google Maps v3 API. I currently am making a request to fetch new data each time a person changes the viewport (by either zooming or shifting the map) and am throwing away the old data I have. This works great, but now I want to cache the data so that I don't need to fetch the data each time the viewport changes. The Google Maps API defines a viewport by its Northeast and Southwest coordinate consisting of a latitude and a longitude. They are stored in objects called LatLngBounds.
I have come up with 2 ways I can do this:
Store the bounds of each new viewport the user visits and check if the new viewport is in an old viewport and fetch new data only of the part of the new viewport that is not within an old viewport. Essentially,
Divide each new viewport up into rectangular sections of data that we have and data that needs to be fetched. Store the bounds of each of the rectangular sections.
If anyone can think of a better way to do this, feel free to suggest new approaches.
My question is which one is going to be better in terms of better performance/memory usage and overall speed? They are both similar algorithms so does it really matter?
Also, right now both algorithms rely on dividing up the new viewport based on old viewports. What would the algorithm to divide new viewports look like? (Assume I implemented my 2nd algorithm)
var prevBounds = [ /* Array of previously seen bounds */ ];
var newViewport = map.getBounds(); // New Viewport to divide up
var sw = newViewport.getSouthWest();
var swlat = sw.lat();
var swlng = sw.lng();
var ne = newViewport.getNorthEast();
var nelat = ne.lat();
var nelng = ne.lng();
// newViewport.intersects(bounds)
// Returns true if this bounds shares any points with this bounds.

I might consider doing this more or less exactly the way Google serves up map tiles - instead of loading data for the entire viewport at once, carve up the entire map into square areas (though probably bigger areas than Google's 256x256 tiles), determine which areas are in the current viewport, and load data for those areas. As the user pans and zooms the map, check the viewport bounds to see whether new areas have come into the frame, and load them as necessary. Rough pseudocode:
var cache = {}
function onViewportChange() {
// get new bounds
var bounds = map.getBounds();
// identify all the areas in the bounds
var areas = getAreas(bounds);
areas.forEach(function(area) {
if (area.key in cache) {
// do nothing, or load items from cache
} else {
// load new data, storing the key (and maybe the data)
// to the cache
}
})
}
function getAreas(bounds) {
/* given a set of bounds, return an array of objects like:
[
{
x: 1,
y: 2,
zoom: 4,
key: "4-1,2",
bounds: b // lat/lon bounds of this area
},
...
]
*/
}
(See the Google explanation of map coordinates and this example for an idea of how to implement getAreas.)
The appeal of this is that the areas you're retrieving are much simpler, and it becomes very easy to check whether you've already loaded data for a given area - each area can have a simple unique key, probably a string made out of the x/y/zoom coordinates, and as each new area is loaded you save the key (or maybe the key and the data - it depends on whether you're removing old data from the map or just leaving it there) to some cache object. Then all you have to do when the viewport moves to a new area is check for the existence of that key in your cache.
The downside is that you might often load data outside the current viewport, and you're probably sending more requests to the server than you would with the implementations you suggest. This method might work best if you're serving up different data at different zoom levels - otherwise you might be stuck trying to choose a single-size cache area that works well at different zooms.