Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Last update: Jun 5, 2022

Kirby Mapnotator

Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes.

screenshot

Overview

This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice through GitHub Sponsors or Paypal or purchasing your license(s) through my affiliate link.


1. Installation

Download and copy this repository to /site/plugins/mapnotator

Alternatively, you can install it with composer: composer require sylvainjule/mapnotator


2. Setup

Out of the box, the field is set to use open-source services both for geocoding (Nominatim) and tiles-rendering (Positron), without any API-key requirements.

Keep in mind that these services are bound by strict usage policies, always double-check if your usage is compatible. Otherwise, please set-up the field to use Mapbox, see details below.

mymap:
  label: My map
  type: mapnotator

3. Tile-servers

3.1. Open-source / free tiles

tiles-opensource-2

You can pick one of the 4 free tile servers included:

  1. wikimedia (Terms of Use) → Public usage is now forbidden
  2. openstreetmap (Terms of Use)
  3. positron (default, Terms of Use [Under Free Basemaps Terms of Service])
  4. voyager (Terms of Use [Under Free Basemaps Terms of Service])
mymap:
  type: mapnotator
  tiles: positron

You can also set this globally in your installation's main config.php, then you won't have to configure it in every blueprint:

return array(
    'sylvainjule.mapnotator.tiles' => 'positron',
);

3.2. Mapbox tiles

tiles-mapbox-2

  1. mapbox.outdoorsmapbox/outdoors-v11 (default mapbox theme)
  2. mapbox.streetsmapbox/streets-v11
  3. mapbox.lightmapbox/light-v10
  4. mapbox.darkmapbox/dark-v10

In case your usage doesn't fall into the above policies (or if you don't want to rely on those services), you can set-up the field to use Mapbox' tiles.

You will have to set both the id of the tiles you want to use and your mapbox public key in your installation's main config.php:

return array(
    'sylvainjule.mapnotator.mapbox.id'    => 'mapbox/outdoors-v11',
    'sylvainjule.mapnotator.mapbox.token' => 'pk.vdf561vf8...',
);

You can now explicitely state in your blueprint that you want to use Mapbox tiles:

mymap:
  type: mapnotator
  tiles: mapbox

You can also set this globally in your installation's main config.php, then you won't have to configure it in every blueprint:

return array(
    'sylvainjule.mapnotator.tiles' => 'mapbox',
);

4. Geocoding services

4.1. Open-source API (Nominatim)

This is the default geocoding service. It doesn't require any additional configuration, but please double-check if your needs fit the Nominatim Usage Policy.

mymap:
  type: mapnotator
  geocoding: nominatim

4.2. Mapbox API

In case your usage doesn't fall into the above policy (or if you don't want to use Nominatim), you can set-up the field to use Mapbox API.

If you haven't already, you will have to set your mapbox public key in your installation's main config.php:

return array(
    'sylvainjule.mapnotator.mapbox.token' => 'pk.vdf561vf8...',
);

You can now explicitely state in your blueprint that you want to use Mapbox as a geocoding service:

mymap:
  type: mapnotator
  geocoding: mapbox

With Mapbox API comes the ability to autocomplete your search. It is activated by default, you can deactivate it by setting the autocomplete option to false.

mymap:
  type: mapnotator
  geocoding: mapbox
  autocomplete: false

You can also set this globally in your installation's main config.php, then you won't have to configure it in every blueprint:

return array(
    'sylvainjule.mapnotator.geocoding' => 'mapbox',
);

5. Per-field options

5.1. center

The coordinates of the center of the map, if the field has no stored value. Default is {lat: 48.864716, lon: 2.349014} (Paris, FR).

Once the field has at least one shape drawn, it will automatically find its initial center in order to display all the shapes.

mymap:
  type: mapnotator
  center:
    lat: 48.864716
    lon: 2.349014

5.2. zoom

The min, default and max zoom values, where default will be the one used on every first-load of the map. Default is: {min: 2, default: 12, max: 18}.

Once the field has at least one shape drawn, it will automatically find its initial zoom level in order to display all the shapes.

mymap:
  type: mapnotator
  zoom:
    min: 2
    default: 12
    max: 18

5.3. shapes

The shapes your editors are allowed to draw on the map. They are all activated by default:

mymap:
  type: mapnotator
  shapes:
    - marker
    - polyline
    - rectangle
    - polygon
    - circle
    - circleMarker

5.4. tools

The tools / shape modifiers your editors are allowed ot use. They are all activated by default:

mymap:
  type: mapnotator
  tools:
    - edit
    - drag
    - cut
    - remove
    - rotate

5.5. size

The height of the field. Default is full, which will make the field fill the entire height of the viewport. Options are:

  • full (entire viewport height)
  • large (fits all buttons in the toolbar)
  • medium (fits 8 buttons in the toolbar)
  • small (fits 6 buttons in the toolbar)

5.6. color

You can change the shapes / markers color by setting this option to any valid color value. Default it blue (#2281f7).

mymap:
  type: mapnotator
  color: '#2281f7'

6. Global options

The same options are available globally, which means you can set them all in your installation's config.php file and don't worry about setting it up individually afterwards:

return array(
    'sylvainjule.mapnotator.token'        => '',
    'sylvainjule.mapnotator.id'           => 'mapbox.outdoors',
    'sylvainjule.mapnotator.tiles'        => 'positron',
    'sylvainjule.mapnotator.zoom.min'     => 2,
    'sylvainjule.mapnotator.zoom.default' => 12,
    'sylvainjule.mapnotator.zoom.max'     => 18,
    'sylvainjule.mapnotator.center.lat'   => 48.864716,
    'sylvainjule.mapnotator.center.lon'   => 2.349014,
    'sylvainjule.mapnotator.shapes'       => ['marker', 'polyline', 'rectangle', 'polygon', 'circle', 'circleMarker'],
    'sylvainjule.mapnotator.tools'        => ['edit', 'drag', 'cut', 'remove', 'rotate'],
    'sylvainjule.mapnotator.size'         => 'full',
    'sylvainjule.mapnotator.geocoding'    => 'nominatim',
    'sylvainjule.mapnotator.autocomplete' => true,
    'sylvainjule.mapnotator.color'        => '#2281f7',
);

7. Front-end usage

The GeoJSON is stored as YAML and therefore needs to be decoded with the yaml method.

$location = $page->mymap()->yaml();

You can then encode it to JSON using Kirby's toolkit:

$json = Json::encode($location);

7.1. circle and circleMarker

The GeoJSON syntax doesn't support circles or circleMarkers. They are stored as a point by default (see this Medium post for more details).

Therefore, the field stores additionnal properties alongside their coordinates, to allow you to recreate them in your projects:

{
    "type": "Feature",
    "properties": {
        "shape": "CircleMarker"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [6.862806, 47.967742]
    }
},
{
    "type": "Feature",
    "properties": {
        "shape": "Circle",
        "radius": 241.85391410521
    },
    "geometry": {
        "type": "Point",
        "coordinates": [6.84809, 47.969121]
    }
}

When importing the GeoJSON into your project, you will need to check for those properties in order to transform them into the appropriate shapes. With Leaflet, for example, it would look like:

L.geoJSON(myGeoJSON, {
    pointToLayer: (feature, latlng) => {
        if (feature.properties.shape == 'Circle') {
            return new L.Circle(latlng, feature.properties.radius);
        }
        else if (feature.properties.shape == 'CircleMarker') {
            return new L.CircleMarker(latlng);
        }
        else {
            return new L.Marker(latlng);
        }
    }
}).addTo(myMap)

8. Credits

Services:


9. License

MIT

GitHub

https://github.com/sylvainjule/kirby-mapnotator
You might also like...

Integrate Azure Maps in your Vue application

Vue Azure Maps Vue Azure Maps is a library for Vue.js that integrates Azure Maps. It offers several Vue components out of the box and supports custom

May 19, 2022

Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022

📍 Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete 📍 Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Jun 28, 2022

a simple component to generate an static google map

a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022

VuePeople lists and connects Vue.JS developers around the world.

VuePeople lists and connects Vue.JS developers around the world.

May 26, 2022

🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022

Vue-drawing-canvas - VueJS Component for drawing on canvas.

vue-drawing-canvas VueJS Component for drawing on canvas. Support for both Vue 3 and Vue 2 + Composition API Demo Vue 3 Vue 2 Deployed on a nuxt conta

Jun 22, 2022

Vue devtool for identifying Vue components and their SFC paths in the DOM

Vue devtool for identifying Vue components and their SFC paths in the DOM

💡 vue-dom-hints A Vue devtool that adds dev hints in the DOM via __vue__ attribute Instantly identify all Vue components in the DOM and where they're

Nov 12, 2021

Cografya-3d - 3D models of some geographic shapes and their use with Three.js

🏕️ Coğrafya 3D Bazı coğrafi şekillerin 3D modelleri ve Three.js ile kullanılmas

Apr 27, 2022

A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022

Quickly manage lists with multiple fields in Kirby 3

Quickly manage lists with multiple fields in Kirby 3

Kirby Multilist This plugin helps dealing with long lists with multiple fields. Overview This plugin is completely free and published under the MIT li

May 17, 2022

Kirby block preview plugin to directly render block fields

Kirby block preview plugin to directly render block fields

Kirby Fields Block Kirby block preview plugin to directly render block fields, allowing for inline editing. Usage Block definition When creating a cus

Jun 28, 2022

Download file Block for Kirby block editor

Download file Block for Kirby block editor

Download file Block for Kirby block editor How to dev Install parcel globaly npm install -g parcel-bundler Start watch process npm run dev Start buil

May 19, 2021

A new type of WYSIWYG editor for Kirby

A new type of WYSIWYG editor for Kirby

May 10, 2022

A Kirby 3 panel plugin to visualise the `site/logs` folder in the panel.

A Kirby 3 panel plugin to visualise the `site/logs` folder in the panel.

Kirby LogBook A Kirby 3 panel plugin to visualise the site/logs folder in the panel. Opinionated defaults to work best with the kirby-log plugin out-o

Jan 22, 2022

Localizer for Kirby helps to change every localized string within the panel – other plugins included!

Localizer for Kirby helps to change every localized string within the panel – other plugins included!

Localizer for Kirby – A plugin to override Panel and Plugin translations. Attention This plugin is still in Beta and is likely to change. If you find

May 26, 2022

Pressure-sensitive signature drawing for Vue 2 and 3

Pressure-sensitive signature drawing for Vue 2 and 3

Jun 22, 2022

Lightweight Vue component for drawing pure CSS donut charts

Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Jun 23, 2022

Vue.js component drawing SVG Funnel Graphs

VueFunnelGraph.js Funnel graph drawing library for Vue.js. SVG charts Values, Labels, Percentages display Two-dimensional graph support Legend display

Jun 17, 2022
Related tags
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Jul 3, 2022
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Jun 22, 2022
Yandex Maps Component for VueJS
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

Jun 24, 2022
Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Jun 27, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 25, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Jun 24, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Jun 30, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Jul 3, 2022