I want to generate heat map from a set of data which is latitude & longitude. I've 20,000+ latitude & longitudes in a text file.
Can any one tell me how to generate heat map?
I'll appreciate if some one can provide me free version of heat map.
Thanks!
There's an open source library called heatmap.js which might work for you. It's HTML5 based so won't work in older browsers though. They also have a GMaps Heatmap Overlay, so it's fairly plug and play.
Simpleheatmap.com will let you plot latitude & longitude coordinates on an interactive heatmap for free. No limit on the number of lat/lon pairs you can plot, though as of the time of this writing it's in beta so that might change. The site also has the ability to geocode addresses and other geographic data and plot them as well, but there are limits on how many geocoding attempts you can make.
Another useful website for heatmap is http://www.openheatmap.com
Also a blog discusses about heatmap: http://blog.smartbear.com/web-monitoring/the-heat-is-on-a-simple-guide-to-creating-heatmaps/
StringBuilder sb = new StringBuilder();
sb.Append("<script>");
sb.Append(" var latlng = new google.maps.LatLng(18.345, 79.497);");
sb.Append("var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.satellite };");
sb.Append("var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);");
sb.Append("var heatmap = new google.maps.visualization.HeatmapLayer({ data:[");
for (int i = 0; i < dreal.Rows.Count; i++)
{
string str = "new google.maps.LatLng(" + dreal.Rows[i][0].ToString() + "," + dreal.Rows[i][1].ToString() + ")";
if (i> 0)
{
sb.Append(",");
}
}
sb.Append("]");
sb.Append(", map: map });");
sb.Append("</script>");
Page.ClientScript.RegisterStartupScript(this.GetType(), "ArrayScript", sb.ToString());
Here I am generating javascript from backend and I am taking datatable values which are having two columns for longitude and latitude. and I am taking one of the datatable for initializing the map variable.
Related
I have this coordinate: 778597.3125000001, 9148353. I am told this coordinate is Arc 1960 / UTM zone 36S.
When I go here and click "Get Position on Map" and enter in the above coordinates, it places the point in the correct place on the map (at the corner of a field).
What kind of transform/projection do I have to do to make it Latitude and Longitude, and then go to the same point in Google Maps?
I have tried various ways but seems to end up 400 - 200m diagonal offset.
The correct latitude and longitude should be: Lat: -7.699944 Long: 35.5262575 (corner of the field, see link):
I am using DotSpatial.
var Arc1960UTMZone36S = KnownCoordinateSystems.Projected.UtmOther.Arc1960UTMZone36S;
Arc1960UTMZone36S.AuthorityCode = 21036;
var WGS1984 = KnownCoordinateSystems.Geographic.World.WGS1984;
//4326 google earth
//3857 for google maps
WGS1984.AuthorityCode = 3857;
double[] xy = new double[2] { 778597.3125000001, 9148353 };
double[] z = new double[1] { 0d };
Reproject.ReprojectPoints(xy, z, Arc1960UTMZone36S, WGS1984, 0, 1);
var latitude = xy[1];
var longitude = xy[0];
Debug.WriteLine($"Lat: {latitude} Long: {longitude}");
Would anybody know why it is offset?
The solution was to use proj4 string instead of the Known Coordinate System.
Instead of
var Arc1960UTMZone36S = KnownCoordinateSystems.Projected.UtmOther.Arc1960UTMZone36S;
Arc1960UTMZone36S.AuthorityCode = 21036;
Use
String proj4_21036_str = "+proj=utm +zone=36 +south +ellps=clrk80 +towgs84=-160,-6,-302,0,0,0,0 +units=m +no_defs";
ProjectionInfo proj21036 = ProjectionInfo.FromProj4String(proj4_21036_str);
although, I don't understand why.
I have a initial Lat/Lng derive from click event in google maps.
Using that Lat/Lng, I want to be able to construct a rectangle polygon that is 2km by 2km. Since I already have a lat/lng, I attempted to find SE corners of a rectangle - using computeOffset.
var initial_pos = new google.maps.LatLng(lat, lng)
var south = spherical.computeOffset(initial_pos, 2000, 135);
var east = spherical.computeOffset(initial_pos, 2000, 90);
var bounds = new google.maps.LatLngBounds(
initial_pos, south, east
);
var rectangle = new google.maps.Rectangle({
map:map,
bounds: bounds
});
You are right. To draw a rectangle you will need the bounds, which can be derived from two diagonally opposite vertices of the rectangle to be drawn. Let's say you have NW (NorthWest) corner and you are trying to draw a square of side s. You may then find out LatLng of the SE corner, using computeOffset, with distance as s*√2 (in meters) and heading as 135 (degrees).
Following are suggestions on the currently posted source code:
You should calculate a new position only once. Since this position is diagonally opposite, distance should be 2000*1.414. Also, note that the bounds is not initialized with LatLng. They are initialized with four variables. north and south are Lat values. east & west are Lng values. Here are my code change suggestions. Please try them. Please treat this as pseudo code and suite appropriate changes as needed.(Following code is now updated during my edit and should work. Ensure that libraries=geometry is added in the script tag, e.g.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry&callback=initGMap">
</script>)
var initial_pos = new google.maps.LatLng(18.39,77.12);
// initialize initial_pos variable based on click event or so
var calculated_pos = google.maps.geometry.spherical.computeOffset(initial_pos, 200*1.414, 135);
var rectangle = new google.maps.Rectangle({
map: map,
bounds:{
north: initial_pos.lat(),
south: calculated_pos.lat(),
west: initial_pos.lng(),
east: calculated_pos.lng()
}
});
I am working on an user interface that shows many pins on a map.
During the development I am randomly generating 1500 map pins just to be placed on the map to test look/feel/performance etc. issues.
The code which does that looks like this:
for (var i = 0; i <= 1500; i += 1) {
$scope.mapPins.push({
latitude: (Math.random() * 2) + 51,
longitude: (Math.random() * 4) + 3,
icon: themeImages[Math.floor(Math.random() * themeImages.length)],
title: 'Sample title',
infoContent: 'Sample content'
});
}
Naturally the area of the pins covered is a rectangle for latitudes 51-53 and longitudes 3-7. For those who are wondering where it is, it is the area roughly around Netherlands.
Now, there's a little problem that the Netherlands is not a rectangular area and a lot of these coordinates fall over the sea and I would like my coordinates to be only on the land.
Is there a witty mathematical way how I can pool coordinates from a non-rectangular area?
Of course I could make a google.maps polygon object that covers a nonrectangular shape and then via google api test every random generated pin whether it falls within the bounds of this shape etc, but that would be an overkill for UI design phase. Basically my question is whether there is a neat mathematical trick that would allow me to randomly generate coordinates from a non-rectangular space.
Leave your code as it is, the rectangle is the bounding box over your area of interest.
Then add a line
if (isPointInpolygon(polygon, longitudeOrX, latitudeOrY) {
// use this location
}
now you only need to search for a point in polygon function, which is easy to find.
you can directly use the coordinates in (long, lat) order, longitude is related to x coordinate, lat to y.
The polygon has to be filled with the coordinates of the country not insode the water.
If you have islands, then maybe you need multiple such polygons, then iterate over all.
Not to be a stickler but you're actually generating 1501 map pins :)
It is very unlikely that you'll find a simpler solution than using a simple pointinpolygon check.
Use the Google Maps Drawing library (https://developers.google.com/maps/documentation/javascript/drawing#using_the_library) to draw a polygon around the boundary of the Netherlands and save it however you want (e.g., in database, or just copy the string that defines the boundary's coordinates).
Then in your script above, define the google maps polygon (similar to what is done here in the official docs: https://developers.google.com/maps/documentation/javascript/shapes#polygons), then use the containsLocation method in the Google Maps Geometry library (https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation) to check if your random map pins lie within the boundaries of the Netherlands before adding them to the map.
For example:
var netherlandsCoords = [
// comma-separated list of coordinates defining the Netherlands boundary
];
var netherlandsBoundary = new google.maps.Polygon({
path: netherlandsCoords
});
for (var i = 0; i <= 1500; i += 1) {
var lat = (Math.random() * 2) + 51;
var lng = (Math.random() * 4) + 3;
var latlng = new google.maps.LatLng(lat, lng);
if (google.maps.geometry.poly.containsLocation(latlng, netherlandsBoundary)) {
$scope.mapPins.push({
latitude: lat,
longitude: lng,
icon: themeImages[Math.floor(Math.random() * themeImages.length)],
title: 'Sample title',
infoContent: 'Sample content'
});
}
}
I have divided the my google map display in to numbers of parts, Now I want of find it out if any markers are positioned inside a/any particulate cell.
Any Help ?
Farther Explained :
I have got the map bounds by
map.getBounds();
method and then farther divide it into numbers of sub-bounds.
also I have putted markers as
map.addOverlay(markerObject);
Now , I want find if of the cells (which I got by dividing the map by bounds) is containing any markers or not .
I have divide the entire map bounds into numbers of sub bounds
So keep all markers in array. Each marker has a method called get_position( ). After you have finished division of map bound into small sub bounds, you just need to iterate over the sub bounds and check whenever the marker within it.
PS. Also take a look on it, in some cases could be useful.
Suppose you on sub bound cell:
var sub_bounds = new Array();
// here you've pushed into an array the sub bounds
for ( var i = 0; i<sub_bounds.length; ++i)
{
for ( var j = 0; j < markers.length; ++j)
{
var lat = markers[j].get_position( ).lat;
var lng = markers[j].get_position( ).lng;
if ( sub_bounds[i].sw.lat<lat && lat<sub_bounds[i].ne.lat &&
sub_bounds[i].sw.lng<lng && lng<sub_bounds[i].ne.lng)
// marker within cell, do whatever you need to do
}
}
Here is an alternative to the above solution without re-iteration:
First - how big are your sub_bounds? Say 10 latitude and longitude degrees each.
Second - The position of the marker is (floor(marker.lat / 10), floor(marker.lng / 10))
Third - Each marker is added to the map and dropped in a bucket for that subdomain.
so (40, -78) would lie in bucket (4,7) i.e. bucket["4~7"]
Correction: would lie in bucket (4,-7) i.e. bucket["4~-7"]
which would contain all markers between 40 and 50 lat and -70 and -80 lng.
You can use GLatLngBounds as the object that holds all these markers in each bucket, which would give you a good set of methods to use, such as calculating center of the bucket depending on the markers currently in it.
Probably the best solution is given here: how to find out whether a point is inside a polygone:
How to detect that a point is inside a Polygon using Google Maps?
I need an algorithm that will convert a GPS coordinate to a screen location on a displayed google map. I would think this would be simple- get the coordinates for the four corners of the displayed map, find the differential and create a scaling factor for a pixel location on the screen. Is this correct or am I missing something. I'm know this has been done ad nauseum but I am hoping I can hear from someone who has implemented it successfully or has a resource for implementing it.
Basically you need the code for Transverse Mercator projection (which is used by Google maps and others). Here's a C# snippet I used my Kosmos software:
public Point2<int> ConvertMapToViewCoords (Point2<double> mapCoords)
{
double x = (mapCoords.X - MapPosition.Longitude) / resolution;
double y = Math.Log (Math.Tan (Math.PI*(0.25 + mapCoords.Y/360)))*u180dPiResolution;
return new Point2<int> ((int)(x + viewWidthHalf), (int)((y0 - y) + viewHeightHalf));
}
variables used:
double resolution = 360.0 / (Math.Pow (2, MapPosition.ZoomFactor) * 256);
double u180dPiResolution = 40.7436654315252 * Math.Pow(2, MapPosition.ZoomFactor);
double y0 = Math.Log(Math.Tan(Math.PI * (0.25 + MapPosition.Latitude / 360))) * u180dPiResolution;
float viewWidthHalf = ViewWidth / 2.0f;
float viewHeightHalf = ViewHeight / 2.0f;
ZoomFactor is Google zoom level (see http://laudontech.com/GISBlog/?p=28).
BTW the same code works for OpenStreetMap, Yahoo Maps etc., since they all use the same projection and tiling system.
The Google Maps API lets you do stuff like this.
Here is some JS code I've written using the APIs that does something similar:
var map = new GMap2(document.getElementById("map"));
//...
var location = new GLatLng(37.771008, -122.41175);
map.setCenter(location);
var marker = new GMarker(location);
var overlay_caption = "Our location!";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(overlay_caption);
});
map.addOverlay(marker);
marker.openInfoWindowHtml(overlay_caption);
You can also redirect the page to a new map with a URL like this:
http://maps.google.com/maps?q=37.771008,+-122.41175+(You+can+insert+your+text+here)&iwloc=A&hl=en
If you need the pixel coordinate of a latitude/longitude position of a current instance of Google Maps you may use the fromLatLngToDivPixel() function.
Assuming map is an instance of an initialized GMap2:
var location = new GLatLng(37.771008, -122.41175);
var point = map.fromLatLngToDivPixel(location);
alert("X: " + point.x + ", Y: " + point.y);
Depending on your needs, see also fromLatLngToContainerPixel.