HTML5 Canvas map for showing isometric and cartesian maps.
Currently under development / testing / documentation. and therefore not fully available yet.
HTML5 Canvas
https://reda1000.github.io/canvas-map/demo.html
-
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.
npm install canvas-map
Not yet available
Very thankful for the assets that are being used in the examples from https://github.com/BulloRosso/isoplant
MIT, see LICENSE.txt