Develop Reference

Mapbox Display Lat and Lng and Zoom then putting them inside a textbox

enter image description here
I was wondering how to actually get the lat and lng and zoom values like in the picture example on mapbox style builder not with a mouse click or with a mouse move, just the entire map inside a div.
So explaining in detail, I was wondering if there was a way to grab the maps coordinates and display them based off of what mapbox does in there studio editor. They calculate the lat and lng and zoom level of their whole map and when a user scrolls around the map the lat and lng changes and it displays the new coordinates with the zoom level. I need to take those values and place them inside a textbox.

You have several samples on this.
how to get the coords of a point
how to create a draggable marker
how to get the coords of cursor
If you need the zoom too, you only need to add map.getZoom() to he methods that are painting the lngLat.lng and lngLat.lat

Leaflet map layers (circle, polygon) not scaling properly during zoom

I can't figure out why the radiusmap layer (first map shown) and the isochronemap layer (second map shown) don't scale correctly when I zoom in and out. The third map, which has the exact same layers, works just fine.
Here's the code for a) creating the circle and polygon layers and then b) adding them to the radiusmap, the isochronemap and finally, the combined map.
var isochrone = L.polygon(isochronedetails, {color: 'red'});
var radius = L.circle([radiuslat, radiuslng], {fillColor: circleStyle.color[0], fillOpacity: circleStyle.opacity[0],radius: radiusmeters});
radius.addTo(radiusmap);
isochrone.addTo(drivetimemap);
radius.addTo(combinedmap);
isochrone.addTo(combinedmap);
The code that is creating / initializing the three maps is here:
radiusmap = L.map('radiusmap').setView([radiuslat, radiuslng],10);
radiusmap.addControl(new L.Control.Fullscreen());
drivetimemap = L.map('drivetimemap').setView([isochronelat, isochronelng], 10);
drivetimemap.addControl(new L.Control.Fullscreen());
combinedmap = L.map('combinedmap').setView([isochronelat, isochronelng], 10);
combinedmap.addControl(new L.Control.Fullscreen());
And here's a gif of what happens on zoom in/out for each map. You'll see that when the zoom happens for the first two maps, the circle or polygon moves away from the original drawing position. But, on the third map, it behaves correctly.
https://screencast-o-matic.com/watch/cYe1VQx6pZ
What am I doing wrong? I just want the first two maps to behave like the third map. :-)

Simply do not add your layers (namely isochrone and radius) to several maps, but create different layers (possibly with same parameters) for each separate map.
Leaflet makes the assumption for simplicity that when a layer is added to a map, it belongs only to that map.

Custom overlay in google maps area clicked then zoom in

So I tried to draw grid line on my map and I found a good example on google api documentation here : https://developers.google.com/maps/documentation/javascript/examples/maptype-base
it works , now I have another problem in every area or rectangle which built by grid line, I want them to have a listener on click event and then zoom to area that has been clicked. I have tried like this
google.maps.event.addListener(map, "click", function (e) {
var latLng = e.latLng;
map.setCenter(new google.maps.LatLng(latLng.lat(), latLng.lng()));
map.setZoom(17);
});
it works either, but as you can see the latitude and longitude are the exact location where the cursor / pointer clicked, it's not in the middle of the rectangle or area it means the map after zoomed in is wrong. Could anyone help me with this?

I think the problem is because you are using the overlay(as your grid line), when using the tile overlay Google Maps API breaks up the imagery at each zoom level into a set of square map tiles arranged in a grid. When a map moves to a new location, or to a new zoom level, the Maps API determines which tiles are needed and translates that information into a set of tiles to retrieve.
For example each zoom level increases the magnification by a factor of two. So, at zoom level 1 the map will be rendered as a 2x2 grid of tiles. At zoom level 2, it's a 4x4 grid. At zoom level 3, it's an 8x8 grid, and so on.
So when you zoom in, the coordinates that you click is not always in the middle because tile overlay is not set because of your coordinate.
Check this page for more information about overlay.
You can also check this SO question for more information.

how to choose random x,y coordinates of a polygon

I have a shape, a polygon. I have the x,y coordinates of the edges of this polygon.
I'd like to draw 50 circles of 10 pixel radius randomly in this shape.
How do I randomly choose a position in my polygon?
I'm doing this in canvas with javascript, but I don't need any actual code. Maybe some math equations or some direction would be enough

You'd get the whole area of the polygon , apply a rand function on it and draw the circles, if you need to avoid intersection you could create a 'collision' function. Perhaps this helps:
Set: https://en.wikipedia.org/wiki/Set_%28mathematics%29
Calculating the area of a polygon: http://www.wikihow.com/Calculate-the-Area-of-a-Polygon

How to get the current center tile in OpenLayers 3?

I'm trying to find out which is the currently centered tile in OpenLayers 3.
I can get the current position as latitude/longitude with map.getView().getCenter(), and the zoom level as map.getView().getZoom().
Am I supposed to convert this to map tiles manually, or does OpenLayers 3 provide a functionality to easily calculate the correct tile x/y indices (the one in which the center lat/lon is located), or am I supposed to calculate this by myself?

you can convert the center position with
center = ol.proj.transform(center, 'EPSG:900913', 'EPSG:4326');

Given a ol3 tile source, you can get the TileGrid by source.getTileGrid().
Then use the getTileCoordForCoordAndResolution method, to get the tile coordinates from a given map coordinate and resolution.