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.
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/
Using Open Layers and leaflet-sidebar-v2, I've added the sidebar to my map, this works. However, I also need to add another layer to my map, this layer will outline each country. I have the coordinates stored in a 'borders.json' file. I'm attempting to use D3.json to to import the border coordinates and then L.geoJson to add the new layer to my map.
I'm currently getting the following error message:
Uncaught TypeError: t.getLayerStatesArray is not a function
Here is the relevant part of my code..
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], "EPSG:4326", "EPSG:3857"),
zoom: 3,
}),
});
var sidebar = new ol.control.Sidebar({
element: "sidebar",
position: "left",
});
map.addControl(sidebar);
d3.json(("borders.json"), function (json){
function style(feature) {
return {
fillColor: "transparent",
weight: 1,
opacity: 0.4,
color: 'grey',
fillOpacity: 0.3
}
}
geojson = L.geoJson(json, {
style: style,
}).addTo(map);
})
I think I might be adding the geojson layer to my map incorrectly, but I can't figure out what is wrong. I've spent quite a bit of time playing with it, but no luck.
Any helps is appreciated.
Cheers,
Beat
It might be hard to tell what the problem is without knowing other possible relevant parts of your code. I'd start by checking that the contents of borders.json follows valid GeoJSON format.
This is likely unrelated to your question, but is there a reason that you've declared style as a function like function style(feature) { ... }?
It looks like the style attribute of L.geoJson accepts an object rather than a function.
I'm adding a GeolocateControl in my Mapbox maps. It works fine and displays my current position. However it zoom way too much out out. By default my map is zoom at 10. But when I click the GeolocateControl is travels to new destination and zooms out. I've tried adding zoom: 10, but no luck...
map.addControl(
new mapboxgl.GeolocateControl({
zoom: 10,
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true,
})
);
It's a bit convoluted to follow the documentation, but basically instead of zoom going directly on the object you provide, it needs to go on an object called fitBoundsOptions:
map.addControl(
new mapboxgl.GeolocateControl({
fitBoundsOptions: {
zoom: 10,
},
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true,
})
);
I was interested in using google maps API with quite big KML imported as fusion table. I used the basic example from google tutorials on how to use fusion table as a layer in a map, and after ~8 hours of me just trying out stuff the API started to throw an error, that 25.000 map loads limit have been reached. Google developer console doesn't say it's even close hitting any limit. Does anybody know if KML complexity or size can affect API limits? Or maybe I've some potential loops in the code? Or generally what could cause the problem? Here is what I did:
<script type="text/javascript">
function initialize() {
console.log('asdf');
var mapDiv = document.getElementById('googft-mapCanvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(51.11786991747952, 17.001362352071737),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "col13",
from: "<TABLE>",
where: ""
},
options: {
styleId: 2,
templateId: 2
},
styles: [{
where: 'col3 \x3d \x27VALUE\x27',
polygonOptions: {
fillColor: '#0000FF'
}
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks
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: