{"id":16847755,"url":"https://github.com/lordsimal/bolt-geolocation-field","last_synced_at":"2025-08-08T02:07:26.911Z","repository":{"id":41953304,"uuid":"300638913","full_name":"LordSimal/bolt-geolocation-field","owner":"LordSimal","description":"📝 Bolt Extension to add the Geolocation FieldType","archived":false,"fork":false,"pushed_at":"2024-08-15T08:26:27.000Z","size":12170,"stargazers_count":9,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-04T03:37:21.879Z","etag":null,"topics":["boltcms","extension"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LordSimal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-02T14:22:43.000Z","updated_at":"2025-06-21T10:06:35.000Z","dependencies_parsed_at":"2024-08-15T10:11:44.300Z","dependency_job_id":null,"html_url":"https://github.com/LordSimal/bolt-geolocation-field","commit_stats":{"total_commits":30,"total_committers":7,"mean_commits":4.285714285714286,"dds":0.5,"last_synced_commit":"01f291022969ff8d75c14642b03b1c69fbfe6206"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/LordSimal/bolt-geolocation-field","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LordSimal%2Fbolt-geolocation-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LordSimal%2Fbolt-geolocation-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LordSimal%2Fbolt-geolocation-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LordSimal%2Fbolt-geolocation-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LordSimal","download_url":"https://codeload.github.com/LordSimal/bolt-geolocation-field/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LordSimal%2Fbolt-geolocation-field/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269351910,"owners_count":24402678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boltcms","extension"],"created_at":"2024-10-13T13:08:59.278Z","updated_at":"2025-08-08T02:07:26.858Z","avatar_url":"https://github.com/LordSimal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📝 Bolt Geolocation Field Extension\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://packagist.org/packages/LordSimal/bolt-geolocation-field\" target=\"_blank\"\u003e\n        \u003cimg alt=\"Total Downloads\" src=\"https://img.shields.io/packagist/dt/LordSimal/bolt-geolocation-field.svg?style=flat-square\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/LordSimal/bolt-geolocation-field\" target=\"_blank\"\u003e\n        \u003cimg alt=\"Latest Stable Version\" src=\"https://img.shields.io/packagist/v/LordSimal/bolt-geolocation-field.svg?style=flat-square\u0026label=stable\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n**This Extension was written for BoltCMS 4**\n\nThis extension allows you to use fields of `type: geolocation` in your \nContentTypes, as defined in `contenttypes.yaml`\n\n```bash\ncomposer require lordsimal/bolt-geolocation-field \n```\n\nAfter that you will see a new `config/extensions/bolt-geolocation.yaml` file.\n\n**In here you have to insert your Google Maps JS API Key, otherwise the field won't work correctly!** \n\n```\n# Settings for Bolt Geolocation Field\n\ndefault:\n  apikey: \"\u003cmy-api-key\u003e\"\n```\n\nSee more about the Google Maps JS API Key bellow.\n\nAfter that you can create a new field with the fieldtype `geolocation`\n\n```\ntest:\n    name: Test\n    singular_name: Test\n    fields:\n        location:\n            type: geolocation\n    viewless: false\n    taxonomy: [ ]\n    locales: ['en', 'nl', 'pt_BR', 'es']\n    singleton: true\n    icon_many: \"fa:home\"\n    icon_one: \"fa:home\"\n```\n\nField can have autocompleteOptions key in order to set componentRestrictions for exemple\n\n```\nlocation:\n    type: geolocation\n    autocompleteOptions:\n        componentRestrictions:\n            country: 'us'\n```\nTo see all options avalible, please refer you to [google documentation](https://developers.google.com/maps/documentation/javascript/geocoding#ComponentFiltering) \n\nWith that you can see the field in the backend:\n\n![Backend Field](screenshots/backend-field-empty.png)\n\nYou can search for places by selecting `Search` and then typing your desired place\n\n![Place Search](screenshots/backend-search.gif)\n\nOr if you have Latitude and Longitude of your location you can input that via the \n`Latitude \u0026 Longitude` area.\n\n![Place Search](screenshots/backend-latlong.gif)\n\nAs you can see in the GIF you need to click the `Update Google Map` button when \ninputting manual Latitude and Longitude.\n\nYou can also set the zoom level as you desire\n\n![Place Search](screenshots/backend-zoom.gif)\n\n\n## Google Map API Key\n\nIf you don't already have an API key go to https://console.developers.google.com/ \nand create a new project.\n\nAfter that you have to enable the following API's for this project:\n\n- **Maps JavaScript API**\n    - This is needed to create Google Maps via JS\n- **Places API**\n    - This is needed to have a nice search behaviour when your searching for places\n\nAfter that you need to create an API Key via the **Credentials** Menu.\n\nI would recommend you to restrict this key at least by **HTTP referrers** so only \nyour website can use the API key.\n\nThis now generated API key needs to be inserted into your \n`config/extensions/bolt-geolocation.yaml` file.\n\nFinally you will need to create a **Billing Account** under \nhttps://console.cloud.google.com/billing **AND** link it to your previously \ncreated API Console project  \nhttps://cloud.google.com/billing/docs/how-to/modify-project#confirm_billing_is_enabled_on_a_project\n\nGoogle requires you to insert one, otherwise it won't work as desired.\n\nSee https://developers.google.com/maps/documentation/javascript/usage-and-billing \nfor more information.\n\n\n## Why did I choose Google Map JS API instead of an embeded version?\n\nTrust me, I tried to implement this without the need of an API key.\n\nBut unfortunately Google only allows 1 iFrame per page to be loaded.\nhttps://stackoverflow.com/questions/15388897/google-maps-inside-iframe-not-loading\n\nTherefore you can't have multiple fields defined as `type: geolocation` because\nonly the first one works and all the others won't.\n\nAnd since there is (as far as I know) no Map Provider out there, which allows\nmultiple embeded Maps without an API key I have chosen the most popular one.\n\n\n## Accessing the values in the frontend\n\nBasically everything in the filed is saved inside a JSON.\n\nBoltCMS returns that JSON as a string, therefore we have to decode it first.\n\n```\n{% set field_value = record.location %}\n\n{% if field_value is not json %}\n  The given field value for \u003ccode\u003e{{ record.location.name }}\u003c/code\u003e is not a valid json\n{% else %}\n  {% set location_json = record.location|json_decode() %}\n\n  \u003cdiv\u003eSelected: {{ location_json.selected }}\u003c/div\u003e\n  \u003cdiv\u003eZoom: {{ location_json.zoom }}\u003c/div\u003e\n  \u003cdiv\u003eSearch: {{ location_json.search }}\u003c/div\u003e\n  \u003cdiv\u003eLatitude: {{ location_json.lat }}\u003c/div\u003e\n  \u003cdiv\u003eLongitude: {{ location_json.long }}\u003c/div\u003e\n{% endif %}\n```\n\n* **Record** here is the current entry for the content type.\n* **location** is the name you have given the filed in the contenttypes.yaml\n\n\n* **location_json.selected** is either **search** or **latlong**\n* **location_json.zoom** is a value between 0 and 19\n* **location_json.search** is the searchterm aka the searched location\n* **location_json.lat** is the latitude value\n* **location_json.long** is the longitude value\n\n\n### Outputting a simple embedded map with an iframe\n\nIf you don't want to output the map yourself with the Google Map JS API \nyou can use the data from above to output an embedded map via an `iframe`\n\n```\n{% set field_value = record.location %}\n\n{% if field_value is not json %}\n  The given field value for \u003ccode\u003e{{ record.location.name }}\u003c/code\u003e is not a valid json\n{% else %}\n  {% set location_json = record.location|json_decode() %}\n\n  {% if location_json.selected == \"search\" %}\n    {% set gmap_query = location_json.search|url_encode %}\n  {% elseif location_json.selected == \"latlong\" %}\n    {% set gmap_query = location_json.lat ~ ',' ~ location_json.long %}\n  {% endif %}\n  \n  \u003cdiv class=\"geolocation-field-iframe-wrapper\"\u003e\n    \u003ciframe class=\"geolocation-field-iframe\"\n            src=\"https://maps.google.com/maps?q={{ gmap_query }}\u0026t=\u0026z={{ location_json.zoom }}\u0026ie=UTF8\u0026iwloc=\u0026output=embed\"\n            frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"\u003e\n    \u003c/iframe\u003e\n  \u003c/div\u003e\n{% endif %}\n```\n\nI would recommend to you to set the following CSS in your application as well:\n\n```css\n.geolocation-field-iframe {\n    height: 500px; /* or what height you need */\n    width: 100%;\n}\n.geolocation-field-iframe {\n    height: 100%;\n    width: 100%;\n}\n```\n\n\u003e **WARNING**: Google only allows 1 iFrame per URL. See https://stackoverflow.com/questions/15388897/google-maps-inside-iframe-not-loading\n\nTherefore if you need to output multiple maps on one page you will need \nto implement the Google Maps JS API for yourself in your frontend.\n\n\n## Running PHPStan and Easy Codings Standard\n\nFirst, make sure dependencies are installed:\n\n```\nCOMPOSER_MEMORY_LIMIT=-1 composer update\n```\n\nAnd then run ECS:\n\n```\nvendor/bin/ecs check src\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flordsimal%2Fbolt-geolocation-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flordsimal%2Fbolt-geolocation-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flordsimal%2Fbolt-geolocation-field/lists"}