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());
});
Related
I am practicing on a simple weather app using OWM. I am fetching the coordinates and pass them to a function to display a map using leaflet.
Here is my code
function drawMap(lat,lon){
const mymap = L.map('map').setView([lat, lon],3);
L.tileLayer(`https://tile.openweathermap.org/map/temp_new/3/1/1.png?appid=${apiKey}`).addTo(mymap);
}
My issues are :
-Zoom level is required by leaflet but it's also in the openweather URL so i don't know if i need to put the same or not
-in the url, i'm supposed to put x and y tile coordinates , I don't really understand the required X and Y values and the OWM API doc doesn't really elaborate on those.
Right now , using the values 3/6/1 for example, i get
The zoom is just the same tiles over and over and you can't make out anything so obviously I'm doing something wrong
Thanks
I don't really understand what you are describing but normaly you would set template strings in the Tile-Url that can are replaced by leaflet:
L.tileLayer(`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${apiKey}`).addTo(mymap);
Question
Is the lng/lat provided by leaflet not a GPS coordinate? Do I have a way to convert it into GPS coordinates or is this a bug in leaflet?
Steps to reproduce
Setup a map that repeats. Click on the repeating section, the click event will return diffent and often invalid coordinates.
Expected behavior
The correct (repeated) coordinate would be provided for each GPS location, regardless if it repeats on the display.
Code to show error
Simply bind a click event
L.map(name, {fullscreenControl: true}).fitWorld().zoomIn().on("click", selectorConfirm);
function selectorConfirm = function(e) {
console.log('selected:'+e.latlng.lat+','+e.latlng.lng);
}
Minimal example reproducing the issue
https://www.hikerock.com/rock/210/
Click on map -> the console log will output what the gps coordinates are provided by leaflet.
The code is super simple, if you need to access it :
https://www.hikerock.com/plugin/map/js/map.min.js?cache=6x3cWuxp
function map() => inits leaflet
map.prototype.selectorConfirm () -> is what is collects the event, is doing the console.logging
Looks like this is how Leaflet is designed :
https://github.com/Leaflet/Leaflet/issues/1885
It can be addressed by using :
e.latlng.wrap();
e.latlng.wrap().lat;
I have some coordinates for example:
A-15.555, 25.6565
B-15.631, 25.9565
C-16.585, 26.2435
...
I want to make a script using my location (by mobile phone).
If my location is in a radius of 500 meters of each position, it will show something as "You're between the position A and B".
So if I'm in the location 15.604, 25.7521, I'm between the A and B positions and the script will tell me that.
I don't know how to do because I'm not expert of the geolocation scripts.
Thanks so much!
--------------------EDIT---------------------
--------------------UPDATE---------------------
Maybe it should be simple in this way:
-I obtain the user's location using the PHP Geolocation.
-I need to make a PHP script to search for the two nearest position based on the user's location
-Display these two position
Is it possible?
One solution (not sure if it's what you're looking for) is to measure the distance between your location and the specified points. So you could say something like this:
if (pointA.distance(MyLocation) < 500 distance_units && pointB.distance(MyLocation) <
500 distance_units) {
notify_user
}
Not sure which programming language you're using, but maybe there are some handy labraries you could use that already have such functions. Otherwise you should make a method to gives you the distance between one geo location and another.
Hope this helps. Have a good night!
I would use a vincenty formula. It will allow you to calculate the distance between two sets of coordinates. Movable Type has JavaScript source code to do so, and it returns the distance in meters. Just remember, that the author extended the JavaScript number object with toRadians() and toDegrees() methods. You will have to do the same. I've used this code previously in a production app and it works well.
I have created a webpage displaying markers on an ersi map using javasvipt.
Data:
MapNorth MapEast
439624 504743
439622 504736
439722 504775
439738 504739
439715 504774
439734 504739
The javascript code:
var points = data.map(function(x){
return [x.MapEast, x.MapNorth];
});
var myMultiPoint = {"geometry":{"points":points,"spatialReference":27700},"symbol":{"color":[255,255,255,64],
"size":6,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",
"outline":{"color":[0,0,0,255],"width":6,"type":"esriSLS","style":"esriSLSSolid"}}};
var gra = new esri.Graphic(myMultiPoint);
myMap.graphics.add(gra);
var graExtent = esri.graphicsExtent(myMap.graphics.graphics);
myMap.setExtent(graExtent);
What the above code does is plot markers on the map and then zooms into the extent. What my employers want now is for me to find the central point of all of those points and display one marker in the center.
Can this be done? If so and you tell me how?
Thanks
Paul
Couple of things.
Did you know about gis.stackexchange.com? They might better solve your problem.
What you're trying to do is find the centre of a polygon assuming those points aren't all in a line.
Here's a link with an answer to the question I think you're asking https://gis.stackexchange.com/questions/7998/how-can-i-calculate-the-center-point-inside-a-polygon-in-arcgis-9-3
The solution posted there uses getExtent().getCenter() as seen here
var myPolygonCenterLatLon = myPolygon.getExtent().getCenter();
I think what you want to be doing here is instead of creating a Multipoint, create a Polygon from your array of points. Once you have a polygon defined, you can do something like
var myPolygon = new Polygon(points);
var centroid = myPolygon.getCentroid();
This should get you the centroid of the points making up the Polygon.
https://developers.arcgis.com/javascript/jsapi/polygon-amd.html
Note that this requires at least version 3.7 of the JS API, though.
One thing to point out to those trying to using .getCentriod() , make sure your polygon is closed. Your 1st point and Last Point need to be in the same spot. Otherwise it wont work right. ( I ran into this a year ago, not sure if they changed this)
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.