map-to-poster README

The project's README from github.com/dimartarmizi/map-to-poster. As one markdown file: README.md.

MapToPoster JS Logo

MapToPoster JS

HTML5 CSS3 JavaScript Tailwind CSS Leaflet MapLibre Vite

MapToPoster JS is a professional-grade, client-side web application designed to help you generate a custom Map To Poster with ease. Whether you're looking to create minimalist city art or a vibrant geographic keepsake, this tool allows you to search for any location in the world and transform it into a stunning Map To Poster piece with fully customizable themes, layouts, and high-fidelity export options. As a versatile Map To Poster generator, the application focuses on high-resolution output suitable for large-format printing, making it the perfect tool for creating unique wall art or personalized gifts.

MapToPoster JS Preview

🚀 Key Features

🎨 Themes

MapToPoster JS offers two distinct ways to style your maps:

Standard Themes (Leaflet)

Based on high-quality raster tiles from established providers:

Artistic Themes (MapLibre GL)

Hand-crafted vector styles with procedural colors:

Customizing Themes

You can easily add your own artistic themes by editing src/core/artistic-themes.js:

  1. Open artistic-themes.js.
  2. Add a new object to the artisticThemes export:
your_theme_key: {
    name: "Your Theme Name",
    description: "Brief description of the style",
    bg: "#HEXCODE",
    text: "#HEXCODE",
    water: "#HEXCODE",
    parks: "#HEXCODE",
    road_motorway: "#HEXCODE",
    road_primary: "#HEXCODE",
    road_secondary: "#HEXCODE",
    road_default: "#HEXCODE"
}

The application will automatically pick up the new theme and display it in the selection menu.

🛠️ Tech Stack

📦 Getting Started

Follow these steps to get a local copy up and running.

Prerequisites

Installation & Setup

  1. Clone the repository

    git clone https://github.com/dimartarmizi/map-to-poster.git
cd map-to-poster

  2. Install dependencies

    npm install

  3. Start development server

    npm run dev

    The app will be available at http://localhost:5173.

  4. Build for production

    npm run build

    Optimized files will be generated in the dist/ folder.

🐳 Deploy with Docker

This project is ready to run as a lightweight Docker container using a multi-stage build:

Build the image

docker build -t map-to-poster .

Run the container

docker run -d -p 8080:80 --name map-to-poster map-to-poster

Then open http://localhost:8080.

Update deployment

After pulling new changes, rebuild and recreate the container:

docker build -t map-to-poster .
docker rm -f map-to-poster
docker run -d -p 8080:80 --name map-to-poster map-to-poster

Included Docker files

📜 Technical Overview

  1. Reactive State Management: Uses an observer-pattern based store (src/core/state.js) to synchronize changes across the UI, Leaflet, and MapLibre engines. All user preferences are persisted via localStorage.
  2. Hybrid Mapping Engine: Implements bidirectional viewport synchronization between Leaflet (raster tiles) and MapLibre GL (vector themes), ensuring seamless layout consistency regardless of the active rendering mode.
  3. Draggable Overlay System: Leverages real-time bounding box calculations to clamp label positions, ensuring a symmetric 8px minimum safety gap from the poster edges.
  4. Dynamic Asset Integration: Manages custom GeoJSON routing and multi-marker instances with interactive drag-and-drop support across both map engines.
  5. Mat Framing Layer: Implements a virtual "Mat/Passepartout" interface with customizable inset spacing and inner borders for a gallery-style finish.
  6. High-Fidelity Rendering Pipeline: Captured exports utilize a multi-stage process in src/core/export.js to generate high-resolution map snapshots using html2canvas and the onclone callback.

🤝 Credits

📧 Contact

If you have any questions, suggestions, or just want to reach out, feel free to contact me at [email protected].

⚖️ License

This project is open-source and available under the MIT License.

map-to-poster (dimartarmizi/map-to-poster)

Searching Database…

1.1K ·GitHub
Map-to-poster
Что это?MapToPoster JS — клиентское веб-приложение, превращающее любую локацию в настраиваемый постер с картой высокого разрешения, который можно экспортировать в PNG для печати.
Это хостинг-сервис или оно работает целиком в моём браузере?Это веб-приложение на чистом JavaScript и Vite, работающее полностью на клиенте; весь рендеринг происходит в браузере, и ничего не отправляется на сервер.
Как запустить его локально?Склонируйте репозиторий, установите зависимости через npm и запустите dev-сервер Vite; для продакшена его можно собрать в статические файлы или запустить через входящий в комплект многостадийный Docker-сетап с Nginx.
Что нужно установить, чтобы его запустить?Нужны Node.js 18.0.0 или выше и npm (идёт в комплекте с Node), чтобы установить зависимости и выполнить Vite-сборку.
Полагается ли он на внешние сервисы для поиска или прокладки маршрутов?Да, поиск локаций использует API Nominatim, а прокладку маршрутов — OSRM, так что этим функциям нужен интернет, хотя сам рендеринг локальный.
Покидают ли мои картографические данные мой компьютер?Нет, приложение хранит настройки в LocalStorage и рендерит полностью на клиенте, так что данные вашего постера остаются в браузере.
В чём разница между стандартными и художественными темами?Стандартные темы (Minimal White, Midnight Dark, Classic Street, Modern Voyager, Satellite View) используют растровые тайлы карты через Leaflet, а художественные темы вроде Arctic Frost или Cyber Glitch — сделанные вручную процедурные векторные стили, отрисовываемые MapLibre GL.
Насколько высокого разрешения может быть экспортированный постер?Можно экспортировать PNG с произвольным разрешением до 50 000 px для широкоформатной печати.
Можно добавить свою собственную тему?Да, новые художественные темы добавляются правкой одного объекта в src/core/artistic-themes.js, и тема автоматически появится в меню выбора тем.
Это оригинальный проект или он основан на чём-то другом?Он вдохновлён originalankur/maptoposter, но является независимой реализацией с другим стеком и архитектурой (Vanilla JS, Vite, Tailwind CSS).
What are similar projects?terraink, Leaflet, mapcn, bible-strong-avatar-lab, maplibre-gl-js, wavedigger, kepler.gl, GeoLibre
Which topics is it in?maplibre, poster, gis, maps, nginx, tailwindcss, vite, design, customization, local-first, web-app, privacy
Creator
dimartarmizi
Size
0.6 MB
Stars
1.1K
Updated
CommitJun 06
Age
8mo
Commits · 90 Days