Cartoj

ClojureScript library providing Reagant components for interactive maps, built on react-map-gl and MapLibre.

Status

Alpha — API is not yet stable

Documentation

• https://perrygeo.github.io/cartoj/

Installation

See https://clojars.org/io.github.perrygeo/cartoj for current version.

Add to deps.edn:

{:deps {io.github.perrygeo/cartoj {:mvn/version "..."}}}

Or to shadow-cljs.edn:

:dependencies [[io.github.perrygeo/cartoj "..."]]

Usage

(ns example
  (:require [cartoj.controls :as ctrl]
            [cartoj.core :as cartoj]
            [cartoj.interop :as interop]
            [reagent.core :as r]))

(defn on-click-example
  "A Form-2 style component, tracks map click coordinates in a reagant atom."
  []
  (let [last-point    (r/atom nil)
        click-handler (fn [^js e]
                        (reset! last-point (interop/coords-from-evt e)))]
    (fn []
      [:section
       [:h2 "On click event"]
       [cartoj/interactive-map {:initial-view-state {:latitude 16 :zoom 1}
                                :map-style          "https://tiles.openfreemap.org/styles/positron"
                                :on-click           click-handler}
        [ctrl/navigation-control {:position "top-right"}]]
       [:table {:style {:width "250px"}}
        [:tbody
         [:tr
          [:th "Longitude"]
          [:td (if-let [lng (:longitude @last-point)]
                 (.toFixed lng 4) "-")]]
         [:tr
          [:th "Latitude"]
          [:td (if-let [lat (:latitude @last-point)]
                 (.toFixed lat 4) "-")]]]]])))

See the live demo for more examples.