Scale radius of circle based on range of string - Mapbox - dataset

I'm trying to dynamically set the radius of circles plotted with a dataset that has three columns: Latitude / Longitude / # of Sessions. Data imports fine and all the locations plot correctly with the # of sessions as the label.
Here's the scenario:
The radius should be based on the number of sessions, so a lat/lon pair with 5 sessions is 1px, a lat/long pair with 5,000 sessions is 10px, etc.
Is there a way to have this dynamically set in a dataset? I can create layer "bands" myself by adding multiple instances of the dataset and filtering to 1-10, 11-100, etc., but it'd be great to set a "min" radius and a "max" radius and have it auto-scale based on available data.
Is there a way to do this in Mapbox?

Assuming I understand this right - basically you have some type of data based off of the session # you'd like to draw a bigger or smaller circle on that lat, long pairing.
What you can do is originally import the data followed by taking the # of sessions and physically creating a set to render on the map (some type of array or something). You can use mapbox markers to render these icons or circle and physically assign them a size.
Prior to this you will have to pre-determine a function to take the # of sessions and map them to a physical radius value - say 1000 sessions = a radius of 10 and 50,000 sessions = a radius of 500.
For example in an ios app I created this is my code, using - https://github.com/mapbox/react-native-mapbox-gl
markersArray = markersArray.concat({
coordinates:[bList[i].latitude, bList[i].longitude],
'type': 'point',
title: bList[i].bname,
subtitle: bList[i].data,
id: bList[i].o_ID.toString(),
startTime: bList[i].startTime,
endTime: bList[i].endTime,
annotationImage: {
url: (bList[i].type === 'drink') ? (drinkUrl) : (foodUrl),
height: 30,
width: 30
},
rightCalloutAccessory: {
url: 'image!info-icon',
height: 20,
width: 20
}
});

Related

Core Data Filter by Distance From Current User Location

I have an NSManagedObject class that's persisted in a SQLite database in Core Data. This object has persistent Latitude and Longitude properties. I'm trying to create an NSFetchedRequestController that fetches all of the instances of that class that are within a certain distance from the user. Having done some research, it seems impossible to do this with Core Data, because Core Data only supports bounding-box style queries, not predicates with blocks.
For example, I have a class of Groups with latitude and longitude properties. Given the latitude and longitude (of, say, a user), fetch all groups that are within a 6 mile radius of the given latitude and longitude.
class Group{
var latitude: Float
var longitude: Float
}
I'd like to take advantage of Core Data's R-Tree Indexing to do a fast bounding-box query on the latitudes and longitudes of instances of my class near my user. Then I'd like to filter the results with a more precise predicate, using my own block of code to see which of the instances are within my users current location. Here's the "Bounding box" query.
let request: NSFetchRequest<Group> = Group.fetchRequest()
let (topLeft,bottomRight) = boundingBox(center: center, radius: searchRadius)
let maxLat = topLeft.latitude
let minLon = topLeft.longitude
let minLat = bottomRight.latitude
let maxLon = bottomRight.longitude
let predicate = NSPredicate(format: "(%f < longitude AND longitude < %f) AND (%f < latitude AND latitude < %f)", minLon, maxLon, minLat, maxLat)
request.predicate = predicate
The problem is that I'd like a fetch that looked like this:
let location: CLLocation = /* Initialize a CLLocation */
let predicate = NSPredicate { (obj, _) -> Bool in
let object = obj as! Group
let objLocation = CLLocation(latitude: Double(object.latitude), longitude: Double(object.longitude))
return location.distance(from: objLocation) < 9656 //6 miles in meters
}
NSFetched results controller doesn't allow predicate with block. There's a significant difference between these two fetches. The first gets all groups in a Bounding Box, (the minLat, minLon, maxLat, and maxLat), the latter gets all groups in a Circle of a given radius.
I want to then use an NSFetchedRequestController to display the results in a table, and take advantage of the nice auto-update features. But of course, Core Data only supports bounding-box style queries, not the two-step filter method I need. Is there a proper solution?
I'm open to using other databases, if Core Data simply won't work with this type of use. I took a look at YapDatabase, and it seems more flexible, and includes R-Tree indexing, but I'm concerned that it's not well supported. Realm doesn't support R-Tree Indexing.

Is there any possibility to obtain the displayed min and max values for X axis and Y axis on a chartjs graph?

I have a chartjs(wrapped by react-chartjs-2) line graph which is zoomable. The zoom functionality was enabled by using javascript library chartjs-plugin-zoom and passing the following configuration to chartjs.ChartOptions:
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
On X axis I display the time and on Y axis some values related to my application. When I zoom or pan the chart the X axis min and max values change, here I need to obtain these values in order to perform a backend call(to update the chart) and also to synchronise it with another component in React.
Is there any possibility to obtain the new values for min and max upon a zoom or pan? I tried to look for a callback function which would provide this but found none so far.

How to find the locations (indices whose lat long co-ordinates are stored in geo-json format) within 5 Km radius of a h3 index in h3-js?

I'm creating a hyper local delivery service app . I can only receive order if there is a store within 5 km radius from the user . I stored the store locations in geojson format . Is there a function in h3-js which will take radius , array of stores , h3 index and then give back the list of stores which are within 5 km range from the given h3 index . or how can i implement this using h3-js?
There are a few different parts here:
Pick a resolution: Pick an H3 resolution for lookup. Finer res means more accuracy but more memory usage. Res 8 is roughly a few city blocks in size.
Indexing Data: To use H3 for the radius lookup, you need to index the stores by H3 index. If you want this to be efficient, you'd be better off indexing all the stores ahead of time. How you do this is up to you; one easy way in JS might be to create a map of id arrays:
const lookupIndexes = stores.features.reduce((map, feature) => {
const [lon, lat] = feature.geometry.coordinates;
const h3Index = h3.geoToH3(lat, lon, res);
if (!map[h3Index]) map[h3Index] = [];
map[h3Index].push(feature.id);
return map;
}, {})
Perform the lookup: To search, index your search location and get all the H3 indexes within some radius. You can use the h3.edgeLength function to get the approximate radius of a cell at your current resolution.
const origin = h3.geoToH3(searchLocation.lat, searchLocation.lon, res);
const radius = kmToRadius(searchRadiusKm, res);
// Find all the H3 indexes to search
const lookupIndexes = h3.kRing(origin, radius);
// Find all points of interest in those indexes
const results = lookupIndexes.reduce(
(output, h3Index) => [...output, ...(lookupMap[h3Index] || [])],
[]);
See a working example on Observable
Caveats: This is not a true radius search. The k-ring is a roughly hexagonal shape centered on the origin. This is good enough for many use cases, and much faster than a traditional Haversine radius search, especially if you have many rows to search over. But if you care about the exact distance H3 might not be appropriate (or, in some cases, H3 might be fine, but you might want the indexes inside a "true" circle - one option here is to convert your circle to a close-to-circular polygon, then get the indexes via h3.polyfill).

add result of image.plot layer on geographic map (bing map)

I have a 2D footprint result for an eddy-covariance system on a 1100*1100 square meter, with the domain of
domain = c(-100,1000,-100, 1000)
the cell size of the domain (each grid) is 2 meters with the origin (0,0) accordingly on this location:
Lon = -97.191391 #longtitude
Lat = 36.055935 #latitude
An example data (9.01 Mb) is attached here. FFP.rds
then I can plot a Bing map on my site as this:
library(OpenStreetMap)
library(rgdal)
map <- openmap(c(36.05778,-97.19250), c(36.05444,-97.18861),type='bing')
plot(map)
and I use image.plot() from package "fields" to plot the footprint with these following codes:
library(fields)
str(FFP$fclim_2d)
image.plot(FFP$x_2d[1,],FFP$y_2d[,1],FFP$fclim_2d)
But I am wondering how to scale each grid of my footprint result to Bing map (or google map).
Any suggestions would be greatly appreciated.

Openlayers 3 Circle radius in meters

How to get Circle radius in meters
May be this is existing question, but i am not getting proper result. I am trying to create Polygon in postgis with same radius & center getting from openlayers circle.
To get radius in meters I followed this.
Running example link.
var radiusInMeters = circleRadius * ol.proj.METERS_PER_UNIT['m'];
After getting center, radius (in meters) i am trying to generate Polygon(WKT) with postgis (server job) & drawing that feature in map like this.
select st_astext(st_buffer('POINT(79.25887485937808 17.036647682474722 0)'::geography, 365.70644956827164));
But both are not covering same area. Can any body please let me know where i am doing wrong.
Basically my input/output to/from Circle will be in meters only.
ol.geom.Circle might not represent a circle
OpenLayers Circle geometries are defined on the projected plane. This means that they are always circular on the map, but the area covered might not represent an actual circle on earth. The actual shape and size of the area covered by the circle will depend on the projection used.
This could be visualized by Tissot's indicatrix, which shows how circular areas on the globe are transformed when projected onto a plane. Using the projection EPSG:3857, this would look like:
The image is from OpenLayer 3's Tissot example and displays areas that all have a radius of 800 000 meters. If these circles were drawn as ol.geom.Circle with a radius of 800000 (using EPSG:3857), they would all be the same size on the map but the ones closer to the poles would represent a much smaller area of the globe.
This is true for most things with OpenLayers geometries. The radius, length or area of a geometry are all reported in the projected plane.
So if you have an ol.geom.Circle, getting the actual surface radius would depend on the projection and features location. For some projections (such as EPSG:4326), there would not be an accurate answer since the geometry might not even represent a circular area.
However, assuming you are using EPSG:3857 and not drawing extremely big circles or very close to the poles, the Circle will be a good representation of a circular area.
ol.proj.METERS_PER_UNIT
ol.proj.METERS_PER_UNIT is just a conversion table between meters and some other units. ol.proj.METERS_PER_UNIT['m'] will always return 1, since the unit 'm' is meters. EPSG:3857 uses meters as units, but as noted they are distorted towards the poles.
Solution (use after reading and understanding the above)
To get the actual on-the-ground radius of an ol.geom.Circle, you must find the distance between the center of the circle and a point on it's edge. This could be done using ol.Sphere:
var center = geometry.getCenter()
var radius = geometry.getRadius()
var edgeCoordinate = [center[0] + radius, center[1]];
var wgs84Sphere = new ol.Sphere(6378137);
var groundRadius = wgs84Sphere.haversineDistance(
ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326'),
ol.proj.transform(edgeCoordinate, 'EPSG:3857', 'EPSG:4326')
);
More options
If you wish to add a geometry representing a circular area on the globe, you should consider using the method used in the Tissot example above. That is, defining a regular polygon with enough points to appear smooth. That would make it transferable between projections, and appears to be what you are doing server side. OpenLayers 3 enables this by ol.geom.Polygon.circular:
var circularPolygon = ol.geom.Polygon.circular(wgs84Sphere, center, radius, 64);
There is also ol.geom.Polygon.fromCircle, which takes an ol.geom.Circle and transforms it into a Polygon representing the same area.
My answer is a complement of the great answer by Alvin.
Imagine you want to draw a circle of a given radius (in meters) around a point feature. In my particular case, a 200m circle around a moving vehicle.
If this circle has a small diameter (< some kilometers), you can ignore earth roudness. Then, you can use the marker "Circle" in the style function of your point feature.
Here is my style function :
private pointStyle(feature: Feature, resolution: number): Array<Style> {
const viewProjection = map.getView().getProjection();
const coordsInViewProjection = (<Point>(feature.getGeometry())).getCoordinates();
const longLat = toLonLat(coordsInViewProjection, viewProjection);
const latitude_rad = longLat[1] * Math.PI / 180.;
const circle = new Style({
image: new CircleStyle({
stroke: new Stroke({color: '#7c8692'});,
radius: this._circleRadius_m / (resolution / viewProjection.getMetersPerUnit() * Math.cos(latitude_rad)),
}),
});
return [circle];
}
The trick is to scale the radius by the latitude cosine. This will "locally" disable the distortion effect we can observe in the Tissot Example.

Resources