Is it possible to show the change for Latitude / Longitude in Google Map as the user moves the mouse cursor over a KML polygon ?
The following script works fine for Google Map. Yet it does not change when the user moves the mouse cursor over a polygon region.
google.maps.event.addListener(
map, 'mousemove',
updateLatLngBox
);
Snapshot showing the Lat/Long does not change when the user moves into the Blue Region
Partially solved via the following using mouse 'click' :-
google.maps.event.addListener(AreaA, 'click', function(kmlEvent) {
var latitude = kmlEvent.latLng.lat().toFixed(12);
var longitude = kmlEvent.latLng.lng().toFixed(12);
document.getElementById("latLngContainer").innerHTML =
"Lat/Long (dd):<br/>" + latitude + "," + longitude;
});
Related
I want to learn pixels band values, for example when I clik on mNDWI image in screen of Earth Engine, I need learning values of red, green and blue
var geometry=ee.Geometry.Polygon([[38.877002459052335,40.75574968156597],
[41.206104021552335,41.17882292442983],
[40.645801287177335,41.59918091806734],
[40.052539568427335,41.84517989453356],
[39.569141130927335,41.886088143011904],
[38.800098162177335,41.48405920501165],
[38.877002459052335,40.75574968156597],
]);
var s2SR = ee.ImageCollection('COPERNICUS/S2_SR')
//filter start and end date
.filter(ee.Filter.calendarRange(2020,2020,'year'))
.filter(ee.Filter.calendarRange(8,8,'month'))
//filter according to drawn boundary
.filterBounds(geometry)
.filterMetadata('CLOUD_COVERAGE_ASSESSMENT', 'less_than',10);
//Map.addLayer(s2SR, {bands:['B4', 'B3', 'B2'], min:0, max:8000}, 's2SR');
// adding mNDWI function
var addMNDWI = function(image) {
var mndwi = ee.Image(image).normalizedDifference(['B3', 'B11']).rename('MNDWI');
return ee.Image(image).addBands(mndwi);
};
var mndwı=s2SR
.map(addMNDWI);
Map.addLayer(mndwı.first(), { min:245, max:5000}, 'mndwı');
It is simple to view the values for any displayed image. First, click on the “Inspector” tab in the top right pane of the Earth Engine Code Editor.
Then, click wherever you want on the map. The Inspector tab will display:
The coordinates of the location you clicked.
The values of every band of every image under that point. (When there are many, as a chart.)
The details of the image (or feature), including properties.
I'm using leaflet with custom CRS.Simple projection. If I draw a polyline at the page Load it is more or less drawn ok (Although much more accurate in firefox than in chrome) but if I drag the map the polyline remains in the same place of the browser window, so then appears shifted respect of the background map.
Example:
Initial load
After drag the map, the map moves but the polyline remains in the same place
To add the polyline I'm converting the coordinates to the CRS.Simple projection. I don't think there is a problem here as every other map marker or text appears correctly
.....
//initialize leaflet map
map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.Simple //simple coordinates system
}).setView([0, 0], mapMaxZoom);
//set the bounds of the map to the current dimension
var mapBounds = new L.LatLngBounds(
map.unproject([0, mapHeight], mapMaxZoom),
map.unproject([mapWidth, 0], mapMaxZoom)
);
//load the tiles
map.fitBounds(mapBounds);
L.tileLayer(mapData.info.tiles+'/{z}/{x}/{y}.png', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: '',
noWrap: true,
continuousWorld: true
}).addTo(map);
.....
var pointList = [getMapCoordinates(1750,1750),
getMapCoordinates(1520,1764),
getMapCoordinates(1300,1560),
getMapCoordinates(1132,1258),
getMapCoordinates(1132,1060),
getMapCoordinates(926,960)];
polyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
polyline.addTo(map);
....
function getMapCoordinates(px,py)
{
//as we use simple system, transform the point (based on pixel) on map coordinates that leaflet understand
return map.unproject([px, py], map.getMaxZoom());
}
Any idea what I'm doing wrong, or is it a bug? Any workaround would be appreciated
Ok, it seems the problem was in stable version (0.7.3) Using dev version (1.0-dev) works ok and even solves the problem with the different browser drawing
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.
I have two polylines drawn on a google maps api v3 directions service.
My problem is that where they overlap on part of the map, one covers the others. I wish to draw 6 lines in total which are bus routes in my city. All routes come back to the same area of the city but it will be very difficult to distinguish them apart.
Is there a way to slightly offset each line?
function busRoute2(source,destination){
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true,
polylineOptions: { strokeColor: '#000000', strokeOpacity: 0.5 }
});
directionsDisplay.setMap(map);
var request = {
origin:source,
destination:destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
Heres the working code (very basic) polyLine offset map animated Note: The icon 'offset' property is the percent offset of the icon along the line.
You need to manipulate the relative 'path' Coordinates (SVG format) of the icon (in your case a line) itself in order to offset it away from the line
Forget my suggestions. I tried to create a repeat icon (2 pixel dot) repeated every 4 pixels offset from the polyLine. It looks absolutely disgusting and lags the browser.
I am going to have to create a function that edits the coords of the polyline at load time according to angle dLat, dLng and zoom scale.
As you want your markers (stops, buses) and lines to be on one side of the road going one direction and the opposite going back. You also dont want to obscure the road name on the map
If anyone wants to help with this email me at huntington#beachincalifornia.com
I have a very strange problem.
Using Gmap3, I place the pin on the map and save its coordinates in a database. After a refresh, I give the same coordinates to Gmap3 to place the pin on the map. The problem here is that the pin is positioned on the same coordinates, but now these coordinates are in different position on the map.
Example: If I place the pin near Moscow, Russia, after a refresh, the pin is placed near Afghanistan...
First I`m loading pins from here http://bghelpmap.com/listPins.php
And i use this before add them to the map:
var bghMarkers = [];
$.each(ttt, function(i, tmp){
bghMarkers.push({
lat: tmp.lat,
lng: tmp.lng,
options: { icon:new google.maps.MarkerImage("http://www.bghelpmap.com/images/pin"+tmp.pinType+".png") },
data: tmp
});
});
After this i am useing setMyMarkers() from file http://bghelpmap.com/js/default.js
The function is long, so i`m not posting it here.
Any suggestions?
It looks like you might be switching latitudes and longitudes when you store/retrieve the coordinates in your database.
Moscow is at roughly (55.747, 37.628)
http://maps.google.com/maps?q=55.747,%2037.628&z=5
(33.628, 55.747) is somewhere in the middle east.
http://maps.google.com/maps?q=37.628,%2055.747&z=5