Canvas-map NPM

canvas-map

HTML5 Canvas map for showing isometric and cartesian maps.

Currently under development / testing / documentation. and therefore not fully available yet.

Depends

HTML5 Canvas

Demo

https://reda1000.github.io/canvas-map/demo.html

Usage

Download the assets and put them under your HTTP-Server reachable as origin/assets - thats where the tile images are currently being fetched from.
Render a map in your Browser in simple JS:

    <script src="http://cdn.jsdelivr.net/gh/Reda1000/canvas-map/canvasmap.bundle.min.js"></script>
    <script src="http://cdn.jsdelivr.net/gh/Reda1000/canvas-map/example.map.js"></script>
    <script>
        config = undefined; // use internal standard config
        map = defaultMap
        mapInstance = new canvasmap.IsoMap({
            window: { nativeElement: window },
            parent: { nativeElement: document.getElementById('parent') },
            cnvs: { nativeElement: document.getElementById('canvas') }
        }, config, map);
        mapInstance.setSelectedCB((a) => console.log(a));
    </script>

Hint: In case you are interested in an Angular2+ Typescript Port please have a look at ngx-canvas-map in NPM - planning on porting to ReactJS as well.