Geolocation field & map block: All you need for a map on your website

Last update: May 2, 2022

Kirby Map

Overview

2-in-1-Plugin: All you need to set up a map on your website. This plugin includes two rich feature sets:

  • 🔎 Geolocation field:

    • Search for your location and get results (name, lat, long) into fields
  • 🗺 Map block:

    • Built-in Mapbox instance
    • Set the following values for…
      • design
      • (center) location
      • zoom
    • Insert unlimited numbers of 📍 markers
      • location
      • icon
      • anchor of the icon (top left, center center, bottom right, etc.)
      • size of the Icon (100% = original size)
      • popup: text and horizontal offset to the location

This plugin is free to use and published under the MIT license. If you use this plugin for commercial purposes and you want to show your appreciation, don't hesitate to support me with a donation.

Installation

Download and copy this repository to you plugin folder: /site/plugins/kirby-map

Configuration

Kirby Map uses Mapbox for geolocation and map view. For internal purposes, a default token is already set. You probably want to replace that for your specific use-case.

To use Mapbox on your website, create your very own access token and set it in your config file: /site/config/config.php

return [
  'microman.map.token' => 'YOUR-TOKEN'
];

Geolocation field

Geolocation field

Here's an example how to use the geolocationg field in your blueprint:

myGeoLocation:
  label: My Geolocation
  type: geolocation
  default:
    name: "Berlin"
    Lat: 13.38333
    Lng: 52.51667

How to use the geolocation field in your template

 $mylocation = $page->myGeoLocation()->toLocation() ?>

Name:  $mylocation->name() ?>
Latitude:  $mylocation->lat() ?>
Longitude:  $mylocation->lng() ?>

Map block

Map block

With the Map block, you can set up your map with a live preview. To add this block to your blueprint, simply add a blocks field:

myContent:
  type: blocks
  fieldsets:
    - maps

To customize the default block blueprints, copy the two files located in /site/plugins/kirby-map/blueprints/blocks/ to your blocks blueprint folder: /site/blueprints/blocks

Markers

You can add as many markers as you want right from within your map block. Try to place your marker in the visible preview.

Map block marker

How to use the map block in your template

The map will be rendered inside your block field.

By default, the Block outputs an open source Mapbox instance.

If you want to use the Google Maps JavaScript API copy and rename /site/plugins/kirby-map/lib/examples/google-maps.php to site/snippets/blocks/maps.php

Don't forget to replace [YOUR-API] with your Google-API in the last line.

Credits

Powered by Mapbox. Inspired by Sylvain's Kirby-Locator

Licence

MIT

Buy me a ☕️

GitHub

https://github.com/youngcut/kirby-map
Comments
  • 1. Refactorizations & replace Parcel with kirbyup

    Hey there!

    First, let me tell you how great of a plugin it is. Thanks for sharing! I've learned a lot on how to use Mapbox, but also integrating it into the Kirby Panel as well.

    I have refactored some parts of your plugin, especially the Vue components. Without changing any of their functionality. There were some bad practices (modifying properties from within a computed instance for examples), which ESLint caught. I have also modernized the code base to use ES2020+ features, which helped us to drop some lines. Of course, in the bundling process, those features will be transpiled to support older ES versions.

    A somewhat important feature: The Mapbox scripts and styles will now only be loaded once. Before, they were fetched every time the block field was opened.

    Parcel 1 is no longer supported — kirbyup replaces it. (Already part of the new Kirby Panel pluginkit.)

    Last but not least, I fixed some grammar and capitalization issues in your readme. Some conventions from German slipped in there.

    I tried to create as snackable commits as possible. I hope you like the changes! 🙂

    Reviewed by johannschopplich at 2021-09-29 20:07
  • 2. Can't save

    It looks like if you using the plugin in combination with a checkbox field (see categories), sometime you can't save the map anymore.

    Map: 1.0.3 Kirby: 3.5.0

    Bildschirmfoto 2021-10-19 um 14 57 52
      name: Modul - Karte
      icon: 🗺
      fields:
        headline:
          label: Überschrift
          type: text
        txt:
          label: Text
          type: textarea
          buttons: false     
        categories:
          label: Legende
          type: checkboxes
          options:
            - value: 1
              text: Institution
            - value: 2
              text: Wohnen
            - value: 3
              text: Arbeiten
            - value: 4
              text: Tagesstruktur    
        mapdata:
          label: Karte
          type: blocks
          fieldsets:
              - maps
           ```
    The solution is, to remove the categories e.g checkboxes from the blueprint.  Not sure checkboxes is the only filed or maybe other fields as well causing the issue.
    
    
    Reviewed by findthebug at 2021-10-19 13:01
  • 3. Use writer field for marker content

    ⚠️ Breaking change.

    This pull requests will replace the markdown field with the writer field. It fits my use-case much more than using Markdown.

    What's your thought on this?


    Edit: I also fixed a leftover from refactoring. Markers weren't working, since they included references to content.coordinates, which should be content.coors.

    If you reject this PR, then I will create a separate one with this fix included.

    Reviewed by johannschopplich at 2021-10-01 21:43
  • 4. Minor refactor & Fix Composer install

    As always, some improvement ideas and a fix. Hope you like them. 😊

    • Use ->or() method to simplify your calls.
    • Fix Composer install (require instead of required in the readme).
    • Add Git submodule installation method to make it a whole.
    Reviewed by johannschopplich at 2021-10-05 15:21
  • 5. Title for markers to find it easier in the list

    Hi, An idea for better usability. I have a lot of markers in my map. But in the list I see only the adresses. This is a little bit annoying for finding the right marker. It would be nice to have a title for markers who are also displayed in the list.

    Cheers

    Reviewed by janstieler at 2022-05-27 09:23
  • 6. t is not defined

    When using the block of kirby-map, every action results in an error t is not defined in marker.js.

    I was able to solve this by removing $t("empty") with "empty" in Marker.vue line 8, seems like that function is not available (anymore?). Didn't want to do this as a pull request, because you might want to have a translation there, I guess.

    Reviewed by mauricerenck at 2022-05-03 15:13
Related tags
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

Mar 3, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Jul 1, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Jun 21, 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
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

May 31, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Jun 24, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Jun 19, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 28, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Jun 13, 2022
🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022
A Website lets people can search testkits in Taiwan

A Website lets people can search testkits in Taiwan

May 25, 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 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
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