https://github.com/hawkins/minitium

A Leaflet-powered mini-map for the browser game Initium.
https://github.com/hawkins/minitium

Last synced: 7 days ago
JSON representation

A Leaflet-powered mini-map for the browser game Initium.

• Host: GitHub
• URL: https://github.com/hawkins/minitium
• Owner: hawkins
• Created: 2015-12-17T06:24:40.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-21T03:24:50.000Z (almost 9 years ago)
• Last Synced: 2023-03-06T23:37:07.629Z (over 1 year ago)
• Language: CSS
• Homepage: http://playinitium.com/
• Size: 255 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Minitium

A simple mini-map system built for the browser game [Initium](http://playinitium.com/), powered by LeafletJS.

# Dependencies

- LeafletJS

# Usage

Using this tool is easy. Simply include dependencies and minitium.js to your HTML, and you're good to go!

Creating a mini-map is as simple as:

```var minimap = new minitium('image-map', 64, 1, 4);```. This creates a minitium object focusing on div ```image-map``` with a tile size of ```64 x 64``` pixels. This map will have zoom levels ranging from ```1``` to ```4```.

Set the border tile for the map (think fog of war hiding the edges of discovered lands):

```minimap.setBorderTile('images/border_tile.png', 128);```

Note that border tiles are suggested to be larger than the normal tiles, as these will be stretched to cover areas slightly larger than a normal tile would cover.

Then, add the map tiles in whatever order you like:

```

minimap.addTile('images/tile_01.jpg', 0, 0);

minimap.addTile('images/tile_02.jpg', 1, 0);

minimap.addTile('images/tile_03.jpg', 1, 2);

```

Finally, initialize and display the map on screen with: ```minimap.initialize();```

# Examples

To see minitium in action, check out the examples folder included.