javascriptangulardatamaps

How I can change map in the datamaps to an image of world map?


I want to change the map in the datamaps to a svg image. so that I can change it to different map as needed at a later stage. Is it possible to do that or do I need to change the code in the datamap to change the map to a different map ? or is there way I can hide some of the country in the world map ?


Solution

  • I have been able to solve the issue using the dataURL and get the desired results

     this.worldMap = new Datamap({
        element: this.worldMapElementRef.nativeElement,
        responsive: true,
        scope: 'world',
        aspectRatio: 0.60,
        fills: {
            defaultFill: '#22496e',
            'color-type-1': '#ffdd00'
        },
        geographyConfig: {
            dataUrl: '../../../../assets/world.topo.json',
            popupOnHover: true,
            highlightOnHover: false,
            borderWidth:1,
            borderOpacity: 1,
            borderColor: '#22496e',
        }
    });