Skip to main content

Migration map

The migration map displays the migration trajectory and magnitude of the data dynamically and in real time on the map, allowing you to visually view the source and destination of the data. turf.js needs to be introduced.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Migration Map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
</head>

<body>
<div id="map"></div>
<script>

    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.70899820084962, 31.339048513540533], 
        zoom: 14, 
        userId: '***', // Authorization code
    });

    map.on('load', function () {

        // data
        let data = { // color: default value '#00eaff'
        arcSet: [
            {
                coords: [[120.70254950835465, 31.34452333816192], [120.72899820084962, 31.339048513540533]],
                color: '#FFFF00'
            },
            {
                coords: [[120.71146083590128, 31.328411691268002], [120.72899820084962, 31.339048513540533]],
                color: '#00FF00',
            },
            {
                coords: [[120.6919983801705, 31.330883608912274], [120.72899820084962, 31.339048513540533]],
                color: '#ff4E5D'
            },
            {
                coords: [[120.69473931280976, 31.347288081092003], [120.72899820084962, 31.339048513540533]],
                color: '#00eaff'
            }
        ],

        // name: optional size: default value 1
        pointSet: [
            {
                name: 'Starting point 1',
                coords: [120.70254950835465, 31.34452333816192],
                color: '#FFFF00',
                size: 1
            },
            {
                name: 'Starting point 2',
                coords: [120.71146083590128, 31.328411691268002],
                color: '#00FF00',
                size: 1.2
            },
            {
                name: 'Starting point 3',
                coords: [120.6919983801705, 31.330883608912274],
                color: '#ff4E5D',
                size: 1.5
            },
            {
                name: 'Starting point 4',
                coords: [120.69473931280976, 31.347288081092003],
                color: '#00eaff',
                size: 2
            },
            {
                name: 'end',
                coords: [120.72899820084962, 31.339048513540533],
                color: '#0000ff',
                size: 2.3
            },
        ]
    };

    let a = map.addLayer({
        id: 'migrate-demo',
        type:'migrate',
        data: data,
        pointImgUrl: './point.png' // Icon of motion point
    })

    // Click the mouse to delete the migration map
    map.on('click', function () {
        map.removeLayer('migrate-demo');
    })
});

</script>
</body>
</html>