canvas-map/demo.html at master · Reda1000/canvas-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html style="margin: 0; padding: 0; width: 100%; height: 100%;">
    <head>
    </head>
    <body style="margin: 0; padding: 0; width: 100%; height: 100%;">
        <div id="parent" style="width: 100%; height: 100%;">
            <canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
        </div>
        <script src="https://cdn.jsdelivr.net/gh/Reda1000/canvas-map/canvasmap.bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/Reda1000/canvas-map/example.map.js"></script>
        <script>
            config = {
                quality: 1,
                zoomStepTap: 0.5,
                zoomStepScrollDebouncer: 100,
                maxZoom: 6,
                maxSize: 16000,
                maxOffset: 300,
                topOffset: 0,
                topOffsetCenterCalcModification: true,
                refresh: 'automatic',
                style: {
                    map: {
                        backgroundColor: 'white',
                        backgroundImage: 'tiles/floor.svg',
                        borderColor: 'grey',
                        borderWidth: 10
                    },
                    tile: {
                        backgroundColor: 'transparent',
                        borderColor: 'grey',
                        borderWidth: 1,
                        fontSize: 0.16739,
                        fontFamily: 'Arial',
                        fontColor: 'black',
                        textAlign: 'center'
                    },
                    selectedTile: {
                        backgroundColor: 'transparent',
                        borderColor: 'transparent',
                        borderWidth: 2,
                        fontSize: 0.26739,
                        fontFamily: 'Arial',
                        fontColor: 'black',
                        textAlign: 'center'
                    }
                }
            }; // use internal standard config
            map = {
                "size": [1318, 775],
                "tiles": []
            }
            mapInstance = new canvasmap.CartMap({
                window: { nativeElement: window },
                parent: { nativeElement: document.getElementById('parent') },
                cnvs: { nativeElement: document.getElementById('canvas') }
            }, config, map);
            mapInstance.setSelectedCB((a) => console.log(a));
            mapInstance.setDroppedCB((a, b) => console.log(a, b.dataTransfer.getData("text")));
        </script>
    </body>
</html>