In my code, I have several arcs being formed within the US map. However, I am confused as to how to draw arcs whose coordinates are added in realtime. I am simulating this by using a working sleep function for 10 seconds. The code is here: https://pastebin.com/D2gSydUS
Here is where I define and call the arcs:
var arcs = [
{
origin: {
latitude: 64.2008,
longitude: -149.4937
},
destination: {
latitude: 21.289373,
longitude: -157.917480
}
},
{
origin: {
latitude: 37.618889,
longitude: -122.375
},
destination: {
latitude: 30.194444,
longitude: -97.67
}
}
];
map.arc(arcs, {strokeWidth: 2});
I've seen examples online but the datamaps website doesn't have any detail and the source code for it hasn't been particularly helpful either.
What the screen looks like:
Related
So what I want is for all the clusters and markers to be visible from the start. that is, when entering the page. But that's not the case.
Everything that should be on the map loads completely sporadically. Like when i hit hard refresh some times it suddenly wont load.
const bounds = Map.current
? Map.current.getMap().getBounds().toArray().flat()
: null;
The code block above might be the issue. When the map is empty of markers and clusters this code block logs null aswell. How can i use this in useEffect if that could work?
Cluster code:
const points = useMemo(
() =>
data.map((store) => ({
type: "Feature",
properties: {
cluster: false,
storeId: store.id,
category: store.country_code,
},
geometry: {
type: "Point",
coordinates: [store.coords[0], store.coords[1]],
},
})),
[data]
);
const bounds = Map.current
? Map.current.getMap().getBounds().toArray().flat()
: null;
const { clusters } = useSupercluster({
points,
bounds,
zoom: viewport.zoom,
options: { radius: 75, maxZoom: 20 },
});
Before and after refresh/move on map/saving code/pretty much anything
So when i console log this:
Before:
After:
#Kruzt are you using Mapbox GL JS? In that case, I'm not sure there's a need for the supercluster library. Have you tried something like this example? https://docs.mapbox.com/mapbox-gl-js/example/cluster/
I want to add clustering to my map from mapbox, I followed the getting started as they suggest:
https://www.mapbox.com/install/js/cdn-add/
And now I have a map, I also added some of my own markers, which are users from my backend that have lats and longs.
So I have a map and some markers.
Now, I want to add clustering, and in the example:
https://docs.mapbox.com/mapbox-gl-js/example/cluster/
they add a source:
map.addSource("earthquakes", {
})
which I don't have, and at this moment I don't think I even need. because I can see the tiles and my markers.
I thought about adding a source, but which source? I don't need a source, I already have what I needed, the tiles and the markers... but the cluster option is in the addSource method on the map. So.. I'm lost here.
This is what they show in the example, but as I said, I don't have or need any other source, as I already see the tiles and my markers, I just want to cluster.
map.addSource("earthquakes", {
type: "geojson",
data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});```
I found the solution,
I had to create a geoJson object from my users like this:
const geoJsonMarkers = users.map( (place, i ) => {
const [placeLng, placeLat] = place.location.coordinates;
const position = { lat: placeLat, lng: placeLng };
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [position.lng, position.lat]
},
"properties": {
"name": place.name
}
}
})
const usersArray = {
"features": geoJsonMarkers
}
And then pass it to the data property of the source like so:
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("users", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: usersArray,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
...
the addSource name is arbitrary, could be anything in my case are users so I called it users.
Does anyone know how to click on a country, then have it zoom in on that country/area in a 2D geo world map?
I am using the world 2D map that is provided in eCharts 3. So my options look like this:
geo: {
name: '2D Global Map',
type: 'map',
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
...
Here is what I have thus far. When I click it just zooms straight in to 4 rather than where I clicked.
myChart.on('click', function (params) {
myChart.setOption({
geo: {
zoom: 4
}
});
});
myChart.setOption(option);
I have tried to find ways to zoom in on the x and y offsets, but that doesn't work.
I also tried to center the map first like this but you need the latitude and longitude of where to center the map inside the array. The map uses JSON for the coordinates, and I can see them, but I can't get them to pull into the array.
myChart.on('click', function (params) {
myChart.setOption({
geo: {
center: [(need to get lat/long of where clicked)],
zoom: 4
}
});
});
myChart.setOption(option);
Any thoughts on ways to do this?
Just in case anyone else is having this same problem, I was able to solve it in this manner:
myChart.on('click', function(params) {
if (params.data) {
myChart.setOption({
geo: {
center: params.data.value,
zoom: 6
}
});
} else {
myChart.setOption({
geo: {
center: [0,0],
zoom: 1
}
});
}
myChart.setOption(option);
});
It doesn't fully solve the problem where I wanted to be able to zoom in on any country, but it does solve the problem in the fact that I can zoom into a data point inside a country.
If anyone else has suggestions on how to do the country part please let me know.
I have latitude and longitude data pass to me from the server and is saved in as $scope.Adress, I need to make a map object using those values like you see below. However this doesn't work and what I need answered is how do I format this so it will work.
$scope.map = {
center: {
latitude: $scope.Address.Latitude,
longitude: $scope.Address.Longitude
},
markers: [{
latitude: $scope.Address.Latitude,
longitude: $scope.Address.Longitude
}],
zoom: 15
};
It might just be a typo. You say you save the location data in $scope.Adress, but your code uses $scope.Address.
I'm using a Google Maps plugin for AngularJS - http://angular-google-maps.org.
I'm trying to populate the map with polygons, so my HTML looks like that:
<google-map center="map.center" zoom="map.zoom" draggable="true">
<polygon ng-repeat="poly in mapPolygons" path="poly.path" fill="poly.fill" stroke="poly.stroke"></polygon>
</google-map>
Every time I try to populate my
$scope.mapPolygons = [{
path: [{
latitude: 32.22,
longitude: 34.33
},
{
latitude: 0.22,
longitude: 0.33
},
{
latitude: 32.22,
longitude: 35.33
},
{
latitude: 12.22,
longitude: 12.33
}],
fill: {
color: "#00bbf2",
opacity: 0.8
},
stroke: {
color: "#cacaca",
weight: 5,
opacity: 1.0
}
}];
I get the following error: Error: [$rootScope:inprog] $digest already in progress
What am I missing?
I had this exact same issue and ended up just using the map object directly.
I bound the control method on the map directive to $scope.control. Then I have to wait til google maps fires the tilesloaded event. Then I can get the map object with.
gMap = $scope.control.getGMap();
After I have the map object I append polygons to it the non-Angular way.
This is really hacky and I would love to be able to use the polygon directive.