{"id":18882435,"url":"https://github.com/7studio/peat","last_synced_at":"2025-10-15T20:44:56.104Z","repository":{"id":30077187,"uuid":"33626730","full_name":"7studio/peat","owner":"7studio","description":"Transform your Google Maps images into beautiful interactive embeds.","archived":false,"fork":false,"pushed_at":"2015-06-19T11:58:39.000Z","size":132,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-31T03:42:55.285Z","etag":null,"topics":[],"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/7studio.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}},"created_at":"2015-04-08T19:09:03.000Z","updated_at":"2021-12-16T14:14:32.000Z","dependencies_parsed_at":"2022-08-28T18:13:15.155Z","dependency_job_id":null,"html_url":"https://github.com/7studio/peat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fpeat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fpeat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fpeat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7studio%2Fpeat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7studio","download_url":"https://codeload.github.com/7studio/peat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239850432,"owners_count":19707349,"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","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":[],"created_at":"2024-11-08T06:58:24.637Z","updated_at":"2025-10-15T20:44:51.055Z","avatar_url":"https://github.com/7studio.png","language":"JavaScript","readme":"# Peat\n\n\u003e Transform your Google Maps images into beautiful interactive embeds.\n\n# What's it?\n\n![Hire me!](https://maps.googleapis.com/maps/api/staticmap?center=Edinburgh,+United+Kingdom\u0026zoom=13\u0026size=364x182\u0026maptype=terrain\u0026markers=size:mid%7Ccolor:0x006341%7Clabel:S%7C55.9510567,-3.2036655%7C55.9498952,-3.1882087%7C55.9531544,-3.1997905\u0026markers=Edinburgh+Castle,+Castlehill,+Edinburg,+United+Kingdom\u0026path=color:0x0065BD%7Cenc:qgotIrqjRtGfo%40dFfn%40tC%60_%40nBlRv%40~X\u0026style=visibility:simplified)![Hire me!](https://maps.googleapis.com/maps/api/streetview?size=364x182\u0026location=55.948437,-3.194501\u0026heading=33\u0026fov=90\u0026pitch=3)\n\n`Peat` is a way of introducing a progressive enhancement in the use of Google Maps.\n\nThe objective is to offer a first experience as simple as possible with a static representation of a Google Maps or a Street View panorama (via [Image APIs](https://developers.google.com/maps/documentation/imageapis/)) and to transform it later on into a dynamic one.\nAll of this happens without any further external informations (in most cases) and especially when you choose to do it.\n\n`Peat` will help you decode the embed URL params, fetch the Google Maps JavaScript API on demand and it will let you improve the visualisation by handling preformatted data as you wish. \n\nWhy should you load unnecessary ressources if users don't want to interact with it?\n\n# Examples\n\n## Simple transformation\n\n```js\nvar g = new Peat(\"#DùnÈideannMap\")\n```\n\n**Notice**: not yet implemented\n\n## Use preformatted data to improve visualisation\n\n```js\nvar g = new Peat(\"#DùnÈideannMap\", function (g) {\n    var data = g.getMapData()\n\n    g.map.setOptions(data.mapOptions)\n\n    data.markerOptions.forEach(function (options) {\n        options[\"animation\"] = google.maps.Animation.DROP\n        options[\"icon\"] = \"http://example.scot/assets/img/ico-starbucks.png\"\n\n        var marker = new google.maps.Marker(options)\n        marker.setMap(g.map)\n    })\n\n    g.img.parentNode.replaceChild(g.div, g.img)\n})\n```\n\n## Require the Pegman's help when you really need\n\n```js\nvar img = document.getElementById(\"VictoriaStView\")\n\nimg.addEvenListener(\"click\", function (event) {\n    var p = new Peat(this, function (p) {\n        var opts = p.getStreetViewPanoramaOptions()\n\n        p.map.setOptions(opts)\n        p.img.parentNode.replaceChild(p.div, p.img)\n    })\n})\n```\n\n## Enjoy to the support of GeoJSON \n\n```js\nvar g = new Peat(\"#DùnÈideannMap\", function (g) {\n    var geoJSON = g.getMapGeoJson()\n\n    g.map.setOptions(geoJSON.metadata.options)\n    g.map.data.addGeoJson(geoJSON)\n\n    g.img.parentNode.replaceChild(g.div, g.img)\n})\n```\n\n# JavaScript API\n\n## `new Peat(img[, callback])`\n\n```js\nvar g = new Peat(\"#DùnÈideannMap\")\n\n// play and use any of the other documented API methods\n```\n\n## `getImageParams()`\n\nReturns a key/value object with all GET query arguments contained in the URL.\n\n```js\nvar g = new Peat(\"#DùnÈideannMap\")\n\ng.getImageParams()\n\n// -\u003e {\n// -\u003e   center: \"Edinburgh, United Kingdom\",\n// -\u003e   zoom: \"13\",\n// -\u003e   size: \"364x182\",\n// -\u003e   maptype: \"terrain\",\n// -\u003e   markers: [\n// -\u003e     \"size:mid|color:0x006341|label:S|55.9510567,-3.2036655|…\",\n// -\u003e     \"Edinburgh Castle, Castlehill, Edinburg, United Kingdom\"\n// -\u003e   ],\n// -\u003e   path: [\n// -\u003e     \"color:0x0065BD|enc:qgotIrqjRtGfo@dFfn@tC`_@nBlRv@~X\"\n// -\u003e   ],\n// -\u003e   style: [\n// -\u003e     \"visibility:simplified\"\n// -\u003e   ]\n// -\u003e }\n```\n\n## `getMapData()`\n\nReturns an expanded object of all collections needed to play with the Google Maps API.\n\n```js\nvar g = new Peat(\"#DùnÈideannMap\")\n\ng.getMapData()\n\n// -\u003e {\n// -\u003e   mapOptions: {center:{lat:55.953252, lng:-3.188267}, zoom:13, mapTypeId:\"terrain\"},\n// -\u003e   mapTypeStyle: [{stylers:[{visibility:\"simplified\"}]}],\n// -\u003e   markerOptions: [{position:{lat:55.9510567, lng:-3.2036655}}, …],\n// -\u003e   polylineOptions: [{path:[{lat:55.95273, lng:-3.17226}, …], strokeColor:\"#ffd700\", strokeOpacity:0.5}]\n// -\u003e }\n```\n\n## `getMapGeoJson()`\n\nReturns a GeoJSON object to display markers, polylines and polygons in an easy way with the help of `google.maps.Data` class.\n\n```js\nvar g = new Peat(\"#DùnÈideannMap\")\n\ng.getMapGeoJson()\n\n// -\u003e {\n// -\u003e   type: \"FeatureCollection\",\n// -\u003e   metadata: {\n// -\u003e       url: \"https://maps.googleapis.com/maps/api/staticmap?…\",\n// -\u003e       title: \"\",\n// -\u003e       options: {center:{lat:55.953252, lng:-3.188267}, zoom:13, maptype:\"terrain\"},\n// -\u003e       style: [{stylers:[{visibility:\"simplified\"}]}]\n// -\u003e   }\n// -\u003e   features: [\n// -\u003e     {\n// -\u003e       type: \"Feature\",\n// -\u003e       geometry: {\n// -\u003e         type: \"Point\",\n// -\u003e         coordinates: [-3.20366551, 55.9510567]\n// -\u003e       }\n// -\u003e     },\n// -\u003e     …\n// -\u003e     {\n// -\u003e       type: \"Feature\",\n// -\u003e       geometry: {\n// -\u003e         type: \"LineString\",\n// -\u003e         coordinates: [[-3.172261: 55.95273], …]\n// -\u003e       },\n// -\u003e       properties: {\n// -\u003e           strokeColor: \"#ffd700\",\n// -\u003e           strokeOpacity: 0.5\n// -\u003e       }\n// -\u003e     }\n// -\u003e   ]\n// -\u003e }\n```\n\n## `getStreetViewPanoramaOptions()`\n\nReturns an object defining the properties of a `StreetViewPanorama` object.\n\n```js\nvar g = new Peat(\"#VictoriaStView\")\n\ng.getStreetViewPanoramaOptions()\n\n// -\u003e {\n// -\u003e   mode: \"html5\",\n// -\u003e   position: {lat:55.948437, lng:-3.194501},\n// -\u003e   pov: {heading:33, pitch:3},\n// -\u003e   zoom: 1\n// -\u003e }\n```\n\n# Contribution\nThis project is still a work in progress, and needs \u003cdel\u003emore\u003c/del\u003e testing before it can be recommended to be used in production. There are some optimisations that need to be further expanded upon, and others yet to be written.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7studio%2Fpeat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7studio%2Fpeat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7studio%2Fpeat/lists"}