MoroMapv0.1.0

A MoroMap library built to be customized.

Choropleth layers, markers, clustering, search, export, and themes are all driven by options. 12 regions and 75 provinces are ready to style.

Installation

bash
npm install @unischedule/morocco-map

Embed clean, interactive maps of Morocco in your applications with React wrappers and simple D3-powered components.

Quick Start

tsx
import { MoroccoMapView } from '@unischedule/morocco-map/react';
import '@unischedule/morocco-map/style.css';
 
export function App() {
  return (
    <div style={{ width: '100%', height: 500 }}>
      <MoroccoMapView level="regions" zoomable />
    </div>
  );
}

Everything you need

A complete library for visualizing Moroccan geographic data without a third-party mapping dependency.

01

Regions & provinces

12 regions and 75 provinces with accurate, ready-to-use geometries.

02

Choropleth & legend

Color zones from your own data with an automatically generated legend.

03

Markers & clustering

Plot data points with proportional sizing and optional clustering.

04

Custom themes

Use built-in presets or generate a full theme from your brand accent.

05

Search & zoom

Built-in zone search, smooth zoom and pan, and click-to-isolate interactions.

06

Lightweight & dependency-free

Pure SVG rendering with no third-party mapping library required.

Playground

Customize the map live. The matching code updates automatically.

Level

Canvas (viewBox)

Render style

Theme

Labels & values

Zone colors

Click a zone on the map, then pick its color (zoneColors prop).

No zone selected.

Click a zone on the map to select it.

Choropleth

Markers

5–16
0
24

Interaction

8×
0.15
8

Matching code

tsx
import { MoroccoMapView } from '@unischedule/morocco-map/react';
import { colorScaleFromData, THEME_PRESETS } from '@unischedule/morocco-map';
import '@unischedule/morocco-map/style.css';
 
const data = { /* e.g. { "Casablanca-Settat": 42, ... } */ };
// Theme-adaptive scale (goes from theme fill to theme accent)
const scale = colorScaleFromData(data, { stops: [[0, theme.fill], [1, theme.fillSelected]] });
 
<MoroccoMapView
  ref={mapRef} // mapRef.current.exportPng() / exportSvg() / print() / resetView() / isolate(name)...
  level="regions"
  theme={THEME_PRESETS.light}
  labelMode="auto"
  labelPlacement="inline"
  zoneValues={data}
  colorScale={scale.colorScale}
  legend={{ scale, title: "Locations", position: "bottom-right" }}
  markers={markers} // e.g. [{ id, lat, lng, label, value, offsetX, offsetY }]
  markerSizeRange={[5, 16]}
  hideRegionLabelNearMarkers
  zoomable
  searchable
  isolateOnClick
  onIsolate={(name) => console.log('isolated:', name)}
  onFeatureClick={(name) => console.log('clicked:', name)}
  onFeatureHover={(name) => console.log('hovered:', name)}
  onMarkerClick={(marker) => console.log('marker:', marker.id)}
  onSearchSelect={(r) => console.log('search:', r.name)}
/>