I am trying to draw an orbit on a ground track map using TLE lines like this using JS:
1 45657U 20035A 20196.59974008 .38210219 12083-4 47903-3 0 9997
2 45657 53.0001 319.7129 0028054 181.2741 293.9291 16.46735707 7405
var attribution =
'Map data © OpenStreetMap contributors';
var tile = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var tle_Pos = getPosVel();
var longitude = tle_Pos.longitude
var latitude = tle_Pos.latitude
var worldMap = drawMap();
var objectDrawer = drawObject();
function getPosVel(){
var tleLine1 = '1 45657U 20035A 20196.59974008 .38210219 12083-4 47903-3 0 9997',
tleLine2 = '2 45657 53.0001 319.7129 0028054 181.2741 293.9291 16.46735707 7405';
var gmst = satellite.gstime(new Date());
var satrec = satellite.twoline2satrec(tleLine1, tleLine2);
var positionAndVelocity = satellite.propagate(satrec, new Date());
var gmst = satellite.gstime(new Date());
var geodeticCoords = satellite.eciToGeodetic(positionAndVelocity.position, gmst);
console.log(geodeticCoords);
return geodeticCoords
}
function drawMap() {
var map = L.map("mapid").setView([0, 0], 4);
L.tileLayer(tile, {
maxZoom: 25,
minZoom: 1.8,
attribution: attribution
}).addTo(map);
return map;
}
function drawObject() {
return L.marker([longitude, latitude]).addTo(worldMap);
}
I have tried to use satellite.js and Leaflet map but I ran into couple of problems doing this, First thing I cant figure how to predict and draw the orbit and not only the object's current latitude and longitude, Secondly, when I provide the TLE lines below it doesnt work at all, and when I provided the regular ISS TLE lines it worked but I dont think the latitude and longitude are accurate at all.
Is there anything alternative to use other than satellite.js or is there a right way to draw the full orbit of the TLE lines?
EXTRA: Here is an image of how I want the map to look like.
Related
I have a world map in my web application, powered by Amcharts4. I want to add a marker on the map, displaying the user's geolocation (using the HTML5 getCurrentPosition function. But the map is already generated while the coordinates are retrieved, how to push a new marker to the map after it has been drawn?
I have working versions of both the Amcharts map, including markers on the map, and of the geolocation function.
Geolocation works asynchronously, the script continues while the location is retrieved, so the map is generated in the meantime.
I'm not a big fan of waiting for the coordinates to be found before continuing, as this might imply a multiple seconds delay.
Essentially I am looking for functionality to push marker data to my Amcharts object after that object is displayed.
This is my js for the map:
// Themes begin
am4core.useTheme(am4themes_animated);
// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Series for World map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.exclude = ["AQ"];
worldSeries.useGeodata = true;
worldSeries.data = mapdata;
var polygonTemplate = worldSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{text}";
polygonTemplate.adapter.add("tooltipText", function(text, ev) {
if (!ev.dataItem.dataContext.text) {
return "{name}";
}
return text;
})
polygonTemplate.fill = chart.colors.getIndex(0);
polygonTemplate.nonScalingStroke = true;
polygonTemplate.propertyFields.fill = "fill";
polygonTemplate.properties.fill = am4core.color("#dddddd");
chart.zoomControl = new am4maps.ZoomControl();
// Hover state
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#333");
// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#000");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{title}";
// Set property fields
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";
// Add data for the three cities
imageSeries.data = [{
"latitude": 51.561678,
"longitude": 5.049685,
"title": "Rural Spark HQ"
}];
if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }
function showPosition(position) {
clientlocation = ({"latitude": position.coords.latitude, "longitude": position.coords.longitude, "title": "I am here!"});
console.log(clientlocation)
//push this clientlocation data to the map somehow?
}
I can see the client location in the console, but I didn't find any method to get it on the map.
You just can add the new object (clientlocation) to imageSeries.data:
imageSeries.addData(clientlocation);
Or you can just add the data by reassigning the data field:
imageSeries.data = [...imageSeries.data, clientlocation];
Here is a code pen as reference.
This is my code, I've used angular-google-map API for it. Here I try to set the zoom level of 20 statically, but as per my requirement, in some place I need 17, somewhere 18 zoom level. So I want to dynamically generate the maximum possible zoom level to fit all the markers.
var deviceCords = [];
var bounds = new google.maps.LatLngBounds();
$scope.$parent.$parent.$parent.map.zoom = 20;
var devicePromise = SiteService.getDevicesForSite(marker).$promise;
devicePromise.then(function(deviceData){
var markerCategory = marker.category;
if(markerCategory === "Public Venues")
markerCategory = "Venue";
else if(markerCategory === "Public Transit")
markerCategory = "Trans";
$scope.$parent.$parent.$parent.categoryFilter(markerCategory);
var devices = deviceData.devices;
var markers = $scope.$parent.$parent.$parent.markers;
markers.splice(0, markers.length);
angular.forEach(devices, function(device){
deviceCords.push(new google.maps.LatLng(device.latitude, device.longitude));
var deviceMarker = {
id : device.deviceId,
name : device.name,
latitude : device.latitude,
longitude: device.longitude,
category : device.category,
icon: "assets/images/device.png"
};
markers.push(deviceMarker);
});
angular.forEach(deviceCords, function(deviceCord){
bounds.extend(deviceCord);
});
var latlng = bounds.getCenter();
$scope.$parent.$parent.$parent.map.center = {
latitude: latlng.lat().toString().substr(0, 20),
longitude: latlng.lng().toString().substr(0, 20)
};
$scope.$parent.$parent.$parent.map.fitBounds(bounds);
Remove the zoom level. It will automatically adjust the value such that all markers are covered. Read this section - https://developers.google.com/maps/documentation/static-maps/intro#Markers
I'm trying to, given a .json containing a lot of points, determine how many there are in each region (probably returning a dictionary), which are defined in another .json file.
I'm doing this based on this example:
https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/
However, I can't get it to work.
This line:
var layer = leafletPip.pointInLayer(this.getLatLng(), states, true);
Returns empty for my test case.
Here is a jsfiddle reproducing my code:
http://jsfiddle.net/Pe5xU/346/
map = L.map('map').setView([40.658528, -73.952551], 10);
// Load a tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap',
maxZoom: 18,
minZoom: 10
}).addTo(map);
geojson = L.geoJson(data).addTo(map);
var all_markers = [];
var layers = {};
$.each(dots, function(index, rec) {
var markers = {}
if (rec.hasOwnProperty("latitude") && rec.hasOwnProperty("longitude")) {
var marker = L.circleMarker([rec.latitude, rec.longitude], marker_style()).addTo(map);
all_markers.push(marker);
}
});
var all_layers = L.featureGroup(all_markers);
map.fitBounds(all_layers.getBounds());
function marker_style() {
return {
radius: 4,
weight: 0,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
$.each(dots, function(index, rec) {
if (rec.hasOwnProperty("latitude") && rec.hasOwnProperty("longitude")) {
var layer = leafletPip.pointInLayer([rec.latitude, rec.longitude], geojson, true);
console.log(layer);
}
});
This code example provides coordinates in latitude, longitude order. As documented in the leaflet-pip readme, leaflet-pip expects coordinates in longitude, latitude order, the same as GeoJSON and other geospatial formats.
I'm trying to do something very similar to what Chris Essig did here. Because I need to know how much datapoints there are in a radius of 20 meters from where the user has put down the 'trashMarker'.
So far I've got this code:
// Create the FeatureGroup and add it to the map
var jsonGroup = new L.FeatureGroup();
mapOverview.addLayer(jsonGroup)
//Retrieve all data and add to map
$.each(datalistObject['idlist'], function(key, value) {
$.getJSON('http://mydata.com' + value['id'], function(data) {
textbox = value['name'];
var dataid = L.geoJson([data], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: value['icon']
});
}
}).addTo(jsonGroup);
},function(xhr) { console.error(xhr); });
});
//Code to find the markers within a 20 meter radius of trashMarker
function markersInRadius() {
// Lat, long of trash marker on overview map
var trashMarkerLat_long = trashMarkerOverview.getLatLng();
// counter of the amount of markers that are within a 20 meter radius
var counter_markers_in_radius = 0;
console.log(jsonGroup);
// Loop through each point in JSON file
jsonGroup.eachLayer(function (layer) {
// Lat, long of current point
layerLatLong = layer.getLatLng();
// Distance from our circle marker
// To current point in meters
distance_from_layer_circle = layerLatLong.distanceTo(trashMarker_lat_long);
// See if meters is within raduis
// The user has selected
if (distance_from_layer_circle <= 20) {
counter_markers_in_radius += 1;
};
console.log(counter_markers_in_radius);
});
// Close pointsInCircle
};
When I run this code, I get the error saying layer.getLatLng is not a function.
After doing a console.log on the jsonGroup FeatureGroup, I found out that the group has two objects in it's layers tab without any latlng information, but instead a layers tab of its own, containing all the datapoints with
latlng info... Maybe this is where the problem is?
Managed to fix it by running the eachLayer function twice on the jsonGroup variable like so:
function markersInRadius() {
// Lat, long of trash marker on overview map
var trashMarkerLatLng = trashMarkerOverview.getLatLng();
// counter of the amount of markers that are within a 20 meter radius
var pointsInRadius = 0;
console.log(jsonGroup);
// Loop through each point in JSON file
jsonGroup.eachLayer(function (layer) {
layer.eachLayer(function (layer) {
// Lat, long of current point
layerLatLong = layer.getLatLng();
// Distance from trashMarker
// To current point in meters
distanceFromTrashMarker = layerLatLong.distanceTo(trashMarkerLatLng);
// See if meters is within radius
if (distanceFromTrashMarker <= 20) {
pointsInRadius += 1;
};
});
});
console.log(pointsInRadius);
// Close pointsInCircle
};
i am new in using nokia here map, how i can plot json of lat long in nokia here map without marker but it draw polyline..
Here is my code:
$.each(data, function(i, val){
var coord = new nokia.maps.geo.Coordinate(parseFloat(val.latitude),parseFloat(val.longitude));
var markerPolyline = new MarkerPolyline(
coord,
{
polyline: { pen: { strokeColor: "#00F8", lineWidth: 4 } }
}
);
map.objects.add(markerPolyline);
});
I hope you can give some answer.. thanks in advance :)
these are the steps you should follow
1.-Create an array of coordinate objects.
2.-assign those coordinates to the new instance of the polyline
3.-add new polyline to map
example:
var aoCoordinates = []
$(data).each(function(i,val){
var latitude = parseFloat(val.latitude);
var longitude = parseFloat(val.longitude);
//create coordinate object
var coord = new nokia.maps.geo.Coordinate(latitude,longitude);
//add to array
aoCoordinates.push(coord);
})
//after the loop ends create instance of polyline
var markerPolyline = new MarkerPolyline(
aoCoordinates,
{
polyline: { pen: { strokeColor: "#00F8", lineWidth: 4 } },
marker: { brush: { color: "#1080dd" } }
}
);
map.objects.add(markerPolyline);
there are more examples in Nokias Developer page http://developer.here.com/javascript-apis/api-explorer