Giter Club home page Giter Club logo

mapped's Introduction

mapped

This project is the implementation of the following technical specification.

Technical Specification

Implement a light version of Mapcreator tool (https://online.mapcreator.io/): a Vue.js application that allows users to create, edit, and download a map. The app should contain a map, a UI to make edits to the map, and an ability to save a PNG image of the result.

The following features should be implemented:

  • Adding icons to the map
  • Adding texts to the map
  • Deleting manually placed elements on the map
  • Hiding and showing map layers
  • Adjusting the map height/width in a given unit

Minimal tech stack:

Implementation details

An attempt was made to style the implementation to match the current application. Therefore, the interface should be familiar to users of the original application.

What was done:

  • Interactive toolbar, with a minimum set of map states.
  • Menu layout as in the original application, with a stub component in unimplemented parts of the application.
  • Completely replicated tab with icon addition.
  • Partially replicated tab with text addition.
  • Geo-search is not implemented, which is why all parts of the original application that use geo-search are not implemented too.
  • Editing of icons and text is implemented in a minimal form (label deletion and text edit only). But the application is designed in such a way as to support all the necessary functionality (editing styles, size, rotation, etc.).
  • Hiding and displaying map layers is implemented but without grouping objects between layers and within them.
  • Picture export is fully implemented.
  • No additional libraries were used (only Vue.js and Mapbox GL JS).
  • Visual styles are tested only in Chrome.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

mapped's People

Contributors

stellarator avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.