I have two JavaScript variables values comes from two text fields t1 and t2. When I pass values like:
var point=new ol.geometry.point(new ol.proj.transform([-81.9571,35.01],'4326','3857'));
Something like above works but not if I pass the variables. It points to wrong location. Like below code:
var point=new ol.geometry.point(new ol.proj.transform([t1,t2],'4326','3857'));
Make sure your coordinate value is not a string type:
var lon = parseFloat(t1);
var lat = parseFloat(t2);
Use a valid projection identifier:
var coord = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
All together:
var coord = ol.proj.transform([parseFloat(t1), parseFloat(t2)], 'EPSG:4326', 'EPSG:3857');
var point = new ol.geom.Point(coord);
Related
I'm having trouble creating a new circle on a Leaflet map with a variable as the latlng.
I have a form that contains and input for radius and a select box that contains a few locations with options looking like this:
<option value="52.10953576, -0.498735399999987">Place Name</option>
When the save button is clicked the following code is run:
$('#drawcircle').click(function() {
var radius = document.getElementById("circleRadius").value;
var e = document.getElementById("locationcoord");
var latlng = e.options[e.selectedIndex].value;
var radiusinmeters = cr * 1609.344;
var circle = L.circle([latlng], radiusnmeters).addTo(map);
drawnItems.addLayer(circle);
});
I have done some debugging with console.log and can see that the latlng variable does contain the correct information from the select box.
However, I get
Uncaught TypeError: Cannot read property 'lng' of null
The value you get from var latlng = e.options[e.selectedIndex].value; is a string, not a pair of coordinates.
Split this string to get your coordinates in an array, cast the values to numbers, and feed that to L.circle. For example,
var radiusinmeters = cr * 1609.344;
var latlng_string = e.options[e.selectedIndex].value;
var latlng_array = latlng_string
.split(/,\s*/) // split the value
.map(function(v) { return +v; }); // cast to numbers
var circle = L.circle(latlng_array, radiusnmeters).addTo(map);
In your code, the variable latlng is a string, and L.circle accepts a LatLng Object, i.e. one of these:
L.latLng(<Number> latitude, <Number> longitude)
L.latLng(<Array> coords) // [Number, Number]
L.latLng(<Object> coords) // {lat: Number, lng: Number}
Your latlng variable is ["52.10953576, -0.498735399999987"]
You have to parse your string to get the correct values
more info in the Circle Documentation
I have a set of coordinates that I want to use them to draw a polygon with OpenLayers. The coordinates are the following:
[["50.12345","30.12345"],["40.12345","20.12345"],["60.12345","10.12345"],["70.12345","90.12345"]]
How can I draw a polygon with those coordinates? I'm trying the following but it doesn't seem to work:
var coords = "[["50.12345","30.12345"],["40.12345","20.12345"],["60.12345","10.12345"],["70.12345","90.12345"]]";
var polygon = new ol.geom.Polygon([coords]);
polygon.transform('ESPG:4326','ESPG:3857');
var feature = new ol.feature(polygon);
var vectorSource = new ol.source.Vector({});
vectorSource.addFeature(feature);
layer = new ol.layer.Vector({
source: vectorSource});
map.addLayer(layer);
Any ideas? Thanks!
// instead of this - a string
var coords = "[["50.12345","30.12345"],["40.12345","20.12345"],["60.12345","10.12345"],["70.12345","90.12345"]]";
// change to an array of arrays - remove the beginning quotes
var coords = [["50.12345","30.12345"],["40.12345","20.12345"],["60.12345","10.12345"],["70.12345","90.12345"]];
// and then you have to convert these string coordinates to number type
coords.map(function(coord){
return [parseFloat(coord[0]), parseFloat(coord[1])];
});
Proceed with the remainder - note that ol.Feature is written with capital letter.
google.maps.event.addListener(map, 'idle', function (event)
{
var ne = map.getBounds().getNorthEast();
//northeast lat and long
var sw = map.getBounds().getSouthWest();
//southwest lat and long
var x = document.getElementById('hdnControl').value;
// x contains all the markers retrived from database
// code part to filter markers withing bounds
}
var x contains all the markers and I want to place markers that are within bounds.how can i filter the markers which are within bounds?
any help will be appreciated
x contains value as
[
{"Latitude":19.2094000000,"Longitude":73.0939000000},
{"Latitude":19.2244070000,"Longitude":73.1545760000},
{"Latitude":19.1659242536,"Longitude":82.2436523438},
{"Latitude":18.3336694458,"Longitude":80.4309082031}
]
//as it has been serialized with
//dt is datatable retrived from database
JavaScriptSerializer oSerializer = new JavaScriptSerializer();
var Result = (from c in dt.AsEnumerable()
select new
{
Latitude = c.Field<Decimal>("Latitude"),
Longitude = c.Field<Decimal>("Longitude")
}).ToList();
hdnControl.Value = oSerializer.Serialize(Result);
The LatLngBounds object comes with a contains() method which takes a LatLng point and returns true if the point happens to be within the bounds, or false if outside.
Here's a sample code to point if the marker is within the bound:
function check_is_in_or_out(marker){
return map.getBounds().contains(marker.getPosition());
}
Here's a related SO ticket which discuss how to use bounds.contains(): check if map markers are within selected bounds
var map;
var vectors;
var point;
var drag;
Any long and Lat can be used
function mapCreate(lon,lat){
map = new OpenLayers.Map("map1");
var osm = new OpenLayers.Layer.OSM();
//create a vector
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(osm);
var center = new OpenLayers.LonLat(lon,lat).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
Assign a lat long to the point
point = new OpenLayers.Geometry.Point(lat,lon);
Add point to vectors
vectors.addFeatures([new OpenLayers.Feature.Vector(point)]);
map.setCenter(center, 15);
//add vectors to map
map.addLayer(vectors);
}
Am I missing something?
Are you looking at the full map? There's a high chance that you're setting the point's location as lat/lon. The OpenLayers LonLat object is so named only to trick innocent users like you into thinking that it automatically converts latitude longitude, or expects them, or something. Don't trust it, reproject into the projection of your map.
I thought Collection were necessary, but looks like you have lat & lon swapped. A point must have lon, then lat.
feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Collection([new OpenLayers.Geometry.Point(0, 0)]), {});
vectors.addFeatures([feature]);
I'm trying to pass two variable to a piece of Marker code that draws the markers on the map i just don't know how to pass the variable what type must they be in order for me to achieve this heres what im trying to do:
double car = -23.363882;
double car2 = 126.044922;
position: new google.maps.LatLng(car,car2)
In JavaScript, variables should be declared using the var statement. I'm not sure where you got double from.
Here's how you draw a marker on a map:
var lat = -23.363882;
var lng = 126.044922;
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: theMap,
position: latLng
});
I hate to say RTFM, but the API docs do spell out the answer to your question. http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
car and car2 variables should be declared in the following manner :
var car = -23.363882;
var car2 = 126.044922;
Note that Javascript doesn't use concrete types when declaring a variable.