amcharts4 getting map elements to link to URL using polygon property

amcharts custom map
amcharts map example
amcharts 4
amcharts 4 world map
amcharts options
amcharts map template
amcharts 4 react
amcharts anatomy

The following (while call core.js, maps.js, animated.js and a contextual countryLow.js file renders a map with polygons of regions (or sub-administrative districts):

var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_franceLow;
chart.projection = new am4maps.projections.Miller();

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.applyOnClones = true;
polygonSeries.fill = am4core.color("#a791b4");
polygonSeries.fillOpacity = 0.8; 
polygonSeries.strokeOpacity = 0.3;

var regionTemplate = polygonSeries.mapPolygons.template;
regionTemplate.tooltipText = "{name}";
regionTemplate.properties.fillOpacity = 0.8; 
regionTemplate.propertyFields.fill = "color";
regionTemplate.propertyFields.url = "url";
regionTemplate.columns.template.url = "http://localhost:3000/go/cities?region_id={properties.id()}"

While the tooltip is being revealed, how can one get the polygon to be clickable while passing the polygon's ID value as a parameter to the URL?

Just write zeroin code in Javascript instead of typescript and you will not have the error ;

regionTemplate.url = "http://www.amcharts.com/";
regionTemplate.adapter.add("url", function(url, target) { return url + "?id=" + target.dataItem.dataContext.id; }):

Polygon – amCharts 4 Documentation, The following (while call core.js, maps.js, animated.js and a contextual countryLow.js file renders a map with polygons of regions (or sub-administrative districts): So far we have shown you how to use map series' data property to add map objects like polygons, lines and markers. It's a convenient way to add a lot of data to map. However, there's another way - creating objects of appropriate type, then setting their properties directly.

You can use placeholders in URLs. E.g.:

regionTemplate.url = "http://localhost:3000/go/cities?region_id={id.urlEncode()}"

Demo:

https://codepen.io/team/amcharts/pen/30dc8cb2bcdef6a2d5f11d41db1e58a1

MapPolygonSeries – amCharts 4 Documentation, Specifies if property changes on this object should be Returns DOM element reference associated with this element. Returns a Dictionary which maps object ids with their respective objects A Sprite or sprite template to use when getting colors for tooltip. Click-through URL for this element. JavaScript / HTML5 charts and maps data-viz libraries for web sites and applications. Fast and responsive. WordPress plugin available. Developed since 2006.

You can use adapter to modify original url, like:

regionTemplate.url = "http://www.amcharts.com/";
regionTemplate.adapter.add("url", (url, target)=>{
   return url + "?id=" + target.dataItem.dataContext.id;
})

Question: amcharts 4 state abbreviations as labels over US map , A related chart/map object, this element is drawn on. Returns DOM element reference associated with this element. The Sprite will automatically get the value for fill from its DataItem. Please note that URL will be parsed by data placeholders in curly brackets, to be populated from data. E.g.:. google.maps. Polygon class A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region. See the samples in the developer's guide, starting with a simple polygon, a polygon with a hole, and more. Note that you can also use the Data layer to

Svg maps html, Hello all, I am having issue adding states labels on map. dataContext, // but maybe not a value. if (polygon.properties.url && isNaN(polygon. You can then modify the map using the Formatting options such as Default color, Zoom, and more. And, you can also add a category data column to the Legend bucket, and classify the map regions based on categories. Use custom maps. You can use custom maps with Shape Map as long as they are in the TopoJSON format.

amCharts V4: Adding labels to map, For commercial use please consider acquiring an amCharts 4 license. Just to An area element with a parent node must have a map element ancestor. The following code creates an HTML marker, and sets the color property to Load the image, map out your links and get the code! Fully customizable colors, url. Welcome to documentation website for amCharts Version 4 - the latest installment in our data visualization libraries. About V4. While Version 4 was written in TypeScript, it can be used in any JavaScript-compatible environment - TypeScript applications, React or Angular2+ apps, and even plain old JavaScript.

amCharts 4: Selectively filling countries with patterns on a map, So you don't have access to higher-up elements like the <html> tag. To get the best cross-browser support, it is a common practice to apply Any URL's added here will be added as <link> s in order, and before the CSS in the Miller(); // Create map polygon series var polygonSeries = chart.series.push(new am4maps . The charts use opacity to hide/show elements, so your setting might be lost if element is hidden and then later shown. Instead use methods hide() and show() to completely toggle off and on the element. Or, use properties fillOpacity and strokeOpacity, if you need to make the element semi-transparent. outerHeight # Type number. Inherited from Sprite

Comments
  • scirpt does not compile ` SyntaxError: Unexpected token: operator (>)` for the rocket after target. Though it does execute!
  • @Jerome that function is written in ES6, it's an arrow function, or => "fat arrow". Most browsers support it now with the exception of IE. Not sure what you mean by "script does not compile".
  • @notacouch the browsers may support it, but the compilation process of javascripts - I believe rails gem uglifier - doesn't digest it. Both your answer and @luca 's do however pass muster.
  • @Jerome Ah okay, that's what I was looking for. Thanks for the clarification. These days all we see are things like webpack, rollup, etc. environments that one way or another pass settings to Babel so minifiers can process. So it's nice to see different setups and what kind of errors they get when a little ES6 is slipped in.