Clever Geek Handbook

How do I make a map with clickable countries in Angular 2?

So far I have this:

<div class="map col-xs-12">
          <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

            <sebm-map-polygon [paths]="paths"></sebm-map-polygon>

          </sebm-google-map>
</div>

This gives me a square polygon on the map. But the idea is to have a map with clickable countries (that is, clicking each country triggers an event and returns some data).

I just started using the sebm google map for Angular 2, but it looks like the documentation is somewhat inconsistent.

I am new to Angular and have no idea how to do this. Would you recommend using sebm-map-polygon with geojson data for all countries?

Sorry, I know this is a general question, but the figure can be valuable in the context of Angular 2.

+3


source to share


1 answer


Try using Visualization: GeoChart

A geochart is a map of a country, continent or region with areas indicated in one of three ways:

  • Region mode will color entire regions such as countries, provinces or states.
  • Markers mode uses circles to mark areas that are scaled according to the value you specify.
  • The text mode places regions with identifiers (for example, "Russia" or "Asia"). Geostart is displayed in the browser using SVG or VML . Note that the geostart cannot be scrolled or dragged and is a line drawing, not a map of the area; if you want any of this consider rendering a map .

Here's some sample code:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>


You can also check the following for code implementation:

Hope it helps.

+2


source






More articles:


All Articles