Magrit

screenshot of Magrit
solid
vite
bulma

Thematic cartography entirely in the browser

Overview:

Magrit is an online thematic mapping application developed by UAR RIATE. It is designed for teaching and learning cartography, allowing users to import their own geometry datasets and customize the appearance of their maps. Magrit supports popular modern desktop browsers and is written in modern JS using libraries like solid.js and d3.js.

Features:

  • Thematic Mapping: Allows users to create various types of maps like choropleth, proportional symbols, cartogram, etc.
  • Browser-based: All operations happen in the browser, ensuring data privacy as it never leaves the user's computer.
  • Dataset Import: Supports importing geometry datasets (Shapefile, GeoJSON, GML, etc.) and tabular files (CSV, XLS, XLSX, etc.).
  • Sample Datasets: Provides sample datasets for users to try out different map representations.
  • Customization: Users can customize the appearance of their maps in various ways.
  • Modern Technologies: Written in modern JS, using solid.js, d3.js libraries, and WebAssembly modules.

Requirements:

  • Node.js (>= 20)
  • NPM (>= 10)

Running for development:

  1. Clone the repository.
  2. Run npm install to install dependencies.
  3. Run npm start for the development server at http://localhost:3000.
solid
Solid

SolidJS is a declarative JavaScript library for building user interfaces, offering a reactive programming model for efficient updates. It stands out for its reactivity system that minimizes unnecessary re-renders and its small bundle size, making it a performant choice for developing lightweight and reactive web applications.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

bulma
Bulma

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.