Skip to content
map-breaker
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc
.eslintrc
.gitignore
LICENSE.md
README.md
countries.geo.json
index.html
index.js
map-breaker-screenshot.png
package.json
webpack.config.js

README.md

map-breaker

mini game made with js and SVG

Preview of the Game displaying world countries in EPSG:4326

demo: http://www.stefanobovio.com/map-breaker/

demo with geoBonne projection: http://www.stefanobovio.com/map-breaker/?geoBonne

inputs

  • A key move left
  • D key move left

default values work for an image with width 1024px and height 512px that covers the global extension.

this GUI uses projections from following library:

country.geo.json data from https://github.com/johan/world.geo.json

MapBraker Options:

  • propertyKey property to display after it a feature
  • leftKeyCode change key code to move left
  • rightKeyCode change key code to move right

Example

var projection = 'geoBonne'; // or undefined for EPSG:4326
fetch('countries.geo.json')
    .then(function (res) {
        res.json()
            .then(function (featureCollection) {
                const mapBreaker = new MapBreaker(
                    '#map', // selector for div element
                    {
                        propertyKey: 'name',
                        leftKeyCode: 65,
                        rightKeyCode: 68
                    });
                mapBreaker.wall(featureCollection, projection);
                mapBreaker.loop();
            });
    });

Note

Work only with Polygon and MultiPolygon feature

Development

npm install

npm start -> http://localhost:8085

You can’t perform that action at this time.