Map point series with rounded image bullets
This demo shows how we can use a Circle element in map point series bullets to make a regular square image rounded.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create rootvar root = am5.Root.new("chartdiv");
// Set themesroot.setThemes([am5themes_Animated.new(root)]);
// Create chartvar chart = root.container.children.push( am5map.MapChart.new(root, { panX: "rotateX", panY: "none", projection: am5map.geoNaturalEarth1() }));
// Create polygon seriesvar polygonSeries = chart.series.push( am5map.MapPolygonSeries.new(root, { geoJSON: am5geodata_worldLow, exclude: ["AQ"] }));
// GeoJSON datavar cities = { type: "FeatureCollection", features: [ { type: "Feature", properties: { name: "New York City", pictureSettings: { src: "https://docs.amcharts.com/assets/nyc.jpg" } },
geometry: { type: "Point", coordinates: [-73.778137, 40.641312] } },
{ type: "Feature", properties: { name: "London", pictureSettings: { src: "https://docs.amcharts.com/assets/london.jpg" } },
geometry: { type: "Point", coordinates: [-0.454296, 51.47002] } },
{ type: "Feature", properties: { name: "Beijing", pictureSettings: { src: "https://docs.amcharts.com/assets/beijing.jpg" } },
geometry: { type: "Point", coordinates: [116.597504, 40.072498] } } ]};
// Create point seriesvar pointSeries = chart.series.push( am5map.MapPointSeries.new(root, { geoJSON: cities }));
pointSeries.bullets.push(function (root, series, dataItem) { var container = am5.Container.new(root, {});
container.children.push( am5.Picture.new(root, { templateField: "pictureSettings", width: 90, centerX: am5.p50, centerY: am5.p50, forceInactive: true }) );
var circle = container.children.push( am5.Circle.new(root, { radius: 30, stroke: am5.color(0xb4e1ff), fill: am5.color(0xb4e1ff), strokeWidth: 4, tooltipText: "{name}" }) );
container.set("mask", circle);
return am5.Bullet.new(root, { sprite: container });});<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 95vh;}map-point-series-with-rounded-image-bullets