I have an app that displays a world map using amCharts 4, in which each continent is to be colored differently and then there are some bubbles places in certain countries to show some data.
For the map, I have an object that lists all countries by the country code key. Then I have an API that returns the data regarding which countries have some values associated with them that should be displayed on the map.
For the purpose of having differently colored continents ( with country borders ) I created a different series for each continent and colored it accordingly. However due to the data structure, this wouldn't let me place the bubbles, so I have another series, beneath all the colored ones, of a full world map.
For the bubbles to be places, I've followed an example from the demos, and calculate the visual center for each country.
My problem is that this has become very resource-intensive, to the point where sometimes, randomly, the map fails to build properly resulting in all the bubbles being places on the top left corner. I was wondering if there are any ways to improve this performance, namely:
- An easier way to calculate the visual center, or get the coordinates for such.
- Some way to color each continent without having to rely on a separate series
If you don't need country borders, I recommend the following steps:
1) Create a map with countries and calculateVisualCenter = true set on country series.
2) When map is build, loop through all polygons and save visualLongitude/visualLatitude of each into some object, output the result in console.
3) Use the coordinates in your actual map for bubble positions.
Here is a quick demo where the coordinates are saved and logged to console:
https://codepen.io/team/amcharts/pen/bGdQXzE
Related
In my GEOJSON data layer I have a set of about 20 regions. Each Feature has a GeometryCollection with two geometries: a Polygon to define the region, and a Point that gives the centre of the region.
I want the Polygons to be invisible, but show the Points on the map as markers.
Additionally, I want to be able to set the region markers as visible or invisible depending on zoom level.
Is it possible to show just the Points on the map, and set them visible / invisible separate to the Polygons? I know I can add them to the map as markers the normal way, e.g.
new google.maps.Marker(etc)
but ideally I want to use the stock data layer so I can turn the markers off and on without looping through an array.
GEOJson is basically a "features collection", which means it can contain various features (and feature types: Point, MultiPoint, Polygon, etc.).
In your use case, you could have your Polygons and your points as separate features. You can then do various things with each feature separately. You can remove a feature, or you can override its style.
You can use map.data.getFeatureById('your_feature_id'); then use one of the available methods of the Data layer, for example remove or overrideStyle.
As an example, please check this fiddle that demonstrates how you can add a few points (MultiPoint) and a Polygon to the Data layer, then hide/show only one feature.
Hope this helps.
I realize there are some conceptual gaps in my knowledge—I'm not 100% clear on how everything fits together in Mapbox. Hopefully someone can set me straight and help me achieve what I'm trying to do.
Our client is a multinational corporation with locations divided into global regions: North America, South America, Europe & Africa, Asia Pacific, etc.
What they want is for the initial map view to be a zoomed-out world map. When each of these individual regions are moused over, the countries belonging to that region will be highlighted, a label will be displayed with the name of the region, and clicking will zoom the viewport to center/display the region.
The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.
The underlying country map was created and styled by a designer using TileMill. It uses the Natural Earth country map. When I look at the project in TileMill and inspect the layer "features", it appears that the shapefile has a list of the individual countries with some associated metadata. So far so good.
Ideally, on the client side, I would have a list of countries belonging to each region. When the user mouses over an individual country, I'll figure out what region it belongs to, iterate through the country list and apply an effect (like opacity) to highlight the region.
The problem is, I can't figure out how to get the country metadata in the TileMill file for whatever country is currently being moused over. Is it even possible to attach events and access the features added in TileMill?
FYI: an alternate approach I tried was adding this map data at runtime. I was able to attach events to GeoJSON features, but the granularity of the map is WAY lower than the underlying map, so it doesn't line up correctly at higher zoom levels.
The problem is that there is no concept of a region in the map, and I'm not sure how to add one programatically.
Okay, so the fundamental thing to understand here is the difference between interactivity you add in TileMill and interactivity via GeoJSON, in Mapbox.js.
TileMill supports raster interactivity based on UTFGrid, and exports tiles. It can handle high levels of detail and thousands of features, but since the geo data itself is not transferred to your browser, you can't do hover interactions like highlighting data - you can only open tooltips and popups
Mapbox.js/Leaflet support vector interactivity. They can handle much lower levels of detail and amounts of data. But the geo data is transferred to your browser, so you can do hover interactions as well as adding tooltips.
I've been searching the internet for a package which can create a simply global map.
There are several which I've searched, webgl globe, kartograph, cartodb, R etc.
None of these have what I'm looking for.
What I'm looking for:
I want a map of the globe, which has two colours for the each country.
there would be a background colour, then the second colour would fill from the bottom by x percent based on an input. For example, if I created a map of gun owners as a percentage over the US map, the background colour would be cream and the second colour would fill the map 55% which represents the amount of gun owners.
So, basically, the second colour in the map would act like a bar chart which fills the colour of the country by the % being applied to the country/area.
Please let me know if any .js library or which tools might be able to do this.
Just take any SVG map of the world and change every country into a mask with two rects below it. Do the rest with a simple loop and svgTopOfTwoElements.style.setProperty("height", heightPercentage, ""). Just search google for getting started with SVG from javascript (it's practically the same as working with HTML elements). The only possible concern would be that 17% of the users don't support SVG (IE8-), but for the ease of use you get in return I would believe this to be an acceptable price.
Is there any link which points to an chart/graph/map example using D3JS with World geoJSON data and highlights some of the location based on certain data with lat/lng?
For example, the world map should be rendered using world-geo.json and then adding/highlighting few countries based on another dataset web-user-statistics.json
Thanks
Thangaraju R
Here is an example that in addition to showing a world map allows to select particular countries which will be highlighted and zoomed into. This example doesn't show a map of the entire globe, but is probably closer to what you're looking for as it shows data for each country (both by colour and on mouse over). It also uses two different JSON files for the different data.
I have map with 30-50 polygons on it. There are like 4000 points in every polygon but they are hidden at beginning. I want to disply the point only when zoom is <=6 but not all of the point but only ones related to the currently displayed polygon(s). So I need to get the polygons in view (displayed in this moment on the screen).
Do you know how to get the polys in view ?
ps.Im working with javascript
Wont be quick if you have complex or lots of polygons but works (assumes v7 api):
https://gist.github.com/1704172