Map Clusters per country (number of dishes), support country deeplinks

[tillkuhn]

Feature Map should show centers of countries so dishes can deeplink into a MapLocation based on its (iso-)code

URL References

• Mapbox GL Show Cluster with Counter and different colors and Geo Locations
• iso country codes with coordinates
• ngx drag-a-point component
• Kitten Placeholder Images e.g. https://placekitten.com/200/300
• custom marker icons background image css
• icon cats in ngx mapbox (remove slash from images to avoid http redirect

  // add markers to map
  geojson.features.forEach(function (marker) {
  // create a DOM element for the marker
  var el = document.createElement('div');
  el.className = 'marker';
  el.style.backgroundImage =
  'url(https://placekitten.com/g/' +
  marker.properties.iconSize.join('/') +
  '/)';
  el.style.width = marker.properties.iconSize[0] + 'px';
  el.style.height = marker.properties.iconSize[1] + 'px';
  el.style.backgroundSize = '100%';

[tillkuhn]

@Component({
  template: `
  <mgl-map
    [style]="'mapbox://styles/mapbox/streets-v9'"
    [zoom]="[5]"
    [center]="[-65.017, -16.457]"
  >
    <mgl-marker
      [lngLat]="[-66.324462890625, -16.024695711685304]"
    >
      <div
        (click)="alert('Foo')"
        class="marker"
        style="background-image: url(https://placekitten.com/g/60/60); width: 60px; height: 60px"
      >
      </div>
    </mgl-marker>
    <mgl-marker
      [lngLat]="[-61.2158203125, -15.97189158092897]"
    >
      <div
        (click)="alert('Bar')"
        class="marker"
        style="background-image: url(https://placekitten.com/g/50/50); width: 50px; height: 50px"
      >
      </div>
    </mgl-marker>
    <mgl-marker
      [lngLat]="[-63.29223632812499, -18.28151823530889]"
    >
      <div
        (click)="alert('Baz')"
        class="marker"
        style="background-image: url(https://placekitten.com/g/40/40); width: 40px; height: 40px"
      >
      </div>
    </mgl-marker>
  </mgl-map>
  `,
  styleUrls: ['./examples.css', './custom-marker-icons.component.css']
})
export class NgxCustomMarkerIconsComponent {
  alert(message: string) {
    alert(message);
  }
}