Skip to content

Commit 3bba0b1

Browse files
usefulthinkusefulthink
committed
fix: add version to generated example-urls
1 parent 5f8f691 commit 3bba0b1

File tree

3 files changed

+8
-5
lines changed

3 files changed

+8
-5
lines changed

‎examples/examples.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"00.default.ts":{"title":"00.default.ts","filename":"00.default.ts","source":"// Marker-API Example Playground\n//\n// Edit the code and hit CMD + Enter to execute it.\n//\n// Key bindings:\n//\n// <Cmd> + <Return> compile typescript and execute\n// <Cmd> + <S> save the code to the URL\n//\n\nimport {Marker} from './lib/marker';\nimport {MaterialIcons} from './lib/icons';\n\nexport default (map: google.maps.Map) => {\n Marker.registerIconProvider(MaterialIcons());\n\n const m1 = new Marker();\n m1.position = {lat: 53.555, lng: 10.001};\n m1.scale = ({map}) => Math.max(1, Math.pow(1.45, map.zoom) / 64);\n m1.map = map;\n m1.icon = 'restaurant';\n m1.color = '#DB4437';\n\n type M2Data = {color: string};\n const m2 = new Marker<M2Data>({\n map,\n position: {lat: 53.55, lng: 10},\n scale: 2\n });\n\n m2.color = s => (s.data ? s.data.color : '#0F9D58');\n\n const colors = ['#4285F4', '#DB4437', '#F4B400', '#0F9D58'];\n let colorIdx = 0;\n\n const intervalId = setInterval(() => {\n m2.setData({color: colors[colorIdx]});\n colorIdx = (colorIdx + 1) % colors.length;\n }, 1000);\n\n // the returned function will run before the running code is updated.\n // This gives you an opportunity to clean up everything that has been added\n // (don't worry aboutthe markers, they will be automatically removed from\n // the map)\n return () => {\n clearInterval(intervalId);\n };\n};\n","base64":"Ly8gTWFya2VyLUFQSSBFeGFtcGxlIFBsYXlncm91bmQKLy8KLy8gRWRpdCB0aGUgY29kZSBhbmQgaGl0IENNRCArIEVudGVyIHRvIGV4ZWN1dGUgaXQuCi8vCi8vIEtleSBiaW5kaW5nczoKLy8KLy8gPENtZD4gKyA8UmV0dXJuPiAgIGNvbXBpbGUgdHlwZXNjcmlwdCBhbmQgZXhlY3V0ZQovLyA8Q21kPiArIDxTPiAgICAgICAgc2F2ZSB0aGUgY29kZSB0byB0aGUgVVJMCi8vCgppbXBvcnQge01hcmtlcn0gZnJvbSAnLi9saWIvbWFya2VyJzsKaW1wb3J0IHtNYXRlcmlhbEljb25zfSBmcm9tICcuL2xpYi9pY29ucyc7CgpleHBvcnQgZGVmYXVsdCAobWFwOiBnb29nbGUubWFwcy5NYXApID0+IHsKICBNYXJrZXIucmVnaXN0ZXJJY29uUHJvdmlkZXIoTWF0ZXJpYWxJY29ucygpKTsKCiAgY29uc3QgbTEgPSBuZXcgTWFya2VyKCk7CiAgbTEucG9zaXRpb24gPSB7bGF0OiA1My41NTUsIGxuZzogMTAuMDAxfTsKICBtMS5zY2FsZSA9ICh7bWFwfSkgPT4gTWF0aC5tYXgoMSwgTWF0aC5wb3coMS40NSwgbWFwLnpvb20pIC8gNjQpOwogIG0xLm1hcCA9IG1hcDsKICBtMS5pY29uID0gJ3Jlc3RhdXJhbnQnOwogIG0xLmNvbG9yID0gJyNEQjQ0MzcnOwoKICB0eXBlIE0yRGF0YSA9IHtjb2xvcjogc3RyaW5nfTsKICBjb25zdCBtMiA9IG5ldyBNYXJrZXI8TTJEYXRhPih7CiAgICBtYXAsCiAgICBwb3NpdGlvbjoge2xhdDogNTMuNTUsIGxuZzogMTB9LAogICAgc2NhbGU6IDIKICB9KTsKCiAgbTIuY29sb3IgPSBzID0+IChzLmRhdGEgPyBzLmRhdGEuY29sb3IgOiAnIzBGOUQ1OCcpOwoKICBjb25zdCBjb2xvcnMgPSBbJyM0Mjg1RjQnLCAnI0RCNDQzNycsICcjRjRCNDAwJywgJyMwRjlENTgnXTsKICBsZXQgY29sb3JJZHggPSAwOwoKICBjb25zdCBpbnRlcnZhbElkID0gc2V0SW50ZXJ2YWwoKCkgPT4gewogICAgbTIuc2V0RGF0YSh7Y29sb3I6IGNvbG9yc1tjb2xvcklkeF19KTsKICAgIGNvbG9ySWR4ID0gKGNvbG9ySWR4ICsgMSkgJSBjb2xvcnMubGVuZ3RoOwogIH0sIDEwMDApOwoKICAvLyB0aGUgcmV0dXJuZWQgZnVuY3Rpb24gd2lsbCBydW4gYmVmb3JlIHRoZSBydW5uaW5nIGNvZGUgaXMgdXBkYXRlZC4KICAvLyBUaGlzIGdpdmVzIHlvdSBhbiBvcHBvcnR1bml0eSB0byBjbGVhbiB1cCBldmVyeXRoaW5nIHRoYXQgaGFzIGJlZW4gYWRkZWQKICAvLyAoZG9uJ3Qgd29ycnkgYWJvdXR0aGUgbWFya2VycywgdGhleSB3aWxsIGJlIGF1dG9tYXRpY2FsbHkgcmVtb3ZlZCBmcm9tCiAgLy8gdGhlIG1hcCkKICByZXR1cm4gKCkgPT4gewogICAgY2xlYXJJbnRlcnZhbChpbnRlcnZhbElkKTsKICB9Owp9Owo="},"01.simple-marker.ts":{"title":"create marker and add it to the map","filename":"01.simple-marker.ts","source":"// title: create marker and add it to the map\nimport {Marker} from './lib/marker';\n\nexport default (map: google.maps.Map) => {\n const m1 = new Marker();\n m1.position = {lat: 53.555, lng: 10.001};\n m1.map = map;\n\n const m2 = new Marker({\n map,\n position: {lat: 53.55, lng: 10}\n });\n};\n","base64":"Ly8gdGl0bGU6IGNyZWF0ZSBtYXJrZXIgYW5kIGFkZCBpdCB0byB0aGUgbWFwCmltcG9ydCB7TWFya2VyfSBmcm9tICcuL2xpYi9tYXJrZXInOwoKZXhwb3J0IGRlZmF1bHQgKG1hcDogZ29vZ2xlLm1hcHMuTWFwKSA9PiB7CiAgY29uc3QgbTEgPSBuZXcgTWFya2VyKCk7CiAgbTEucG9zaXRpb24gPSB7bGF0OiA1My41NTUsIGxuZzogMTAuMDAxfTsKICBtMS5tYXAgPSBtYXA7CgogIGNvbnN0IG0yID0gbmV3IE1hcmtlcih7CiAgICBtYXAsCiAgICBwb3NpdGlvbjoge2xhdDogNTMuNTUsIGxuZzogMTB9CiAgfSk7Cn07Cg=="},"02.update-position.ts":{"title":"specifying and updating position","filename":"02.update-position.ts","source":"// title: specifying and updating position\nimport {Marker} from './lib/marker';\n\nexport default (map: google.maps.Map) => {\n const m1 = new Marker({map});\n\n // at any point in time we can change the position\n m1.position = {lat: 53.555, lng: 10.001};\n\n map.setCenter(m1.position);\n};\n","base64":"Ly8gdGl0bGU6IHNwZWNpZnlpbmcgYW5kIHVwZGF0aW5nIHBvc2l0aW9uCmltcG9ydCB7TWFya2VyfSBmcm9tICcuL2xpYi9tYXJrZXInOwoKZXhwb3J0IGRlZmF1bHQgKG1hcDogZ29vZ2xlLm1hcHMuTWFwKSA9PiB7CiAgY29uc3QgbTEgPSBuZXcgTWFya2VyKHttYXB9KTsKCiAgLy8gYXQgYW55IHBvaW50IGluIHRpbWUgd2UgY2FuIGNoYW5nZSB0aGUgcG9zaXRpb24KICBtMS5wb3NpdGlvbiA9IHtsYXQ6IDUzLjU1NSwgbG5nOiAxMC4wMDF9OwoKICBtYXAuc2V0Q2VudGVyKG0xLnBvc2l0aW9uKTsKfTsK"},"03.pin-styling.ts":{"title":"simple marker customizations: color","filename":"03.pin-styling.ts","source":"// title: simple marker customizations: color\nimport {Marker} from './lib/marker';\n\nexport default (map: google.maps.Map) => {\n const m1 = new Marker({map, position: {lat: 50, lng: 10}});\n const m2 = new Marker({map, position: {lat: 50, lng: 11}});\n const m3 = new Marker({map, position: {lat: 51, lng: 10}});\n const m4 = new Marker({map, position: {lat: 51, lng: 11}});\n const m5 = new Marker({map, position: {lat: 50.5, lng: 10.5}});\n\n // the new color-attribute will update all color-properties of\n // the markers with matching colors (all of these attributes can also be\n // specified with the marker-options in the constructor)\n m1.color = '#4285F4';\n m2.color = '#DB4437';\n m3.color = '#F4B400';\n m4.color = '#0F9D58';\n\n // alternatively, you can specify your own values for each of the\n // properties, like so:\n m5.backgroundColor = 'white';\n m5.borderColor = 'black';\n m5.glyphColor = 'salmon';\n\n map.fitBounds(\n new google.maps.LatLngBounds({lat: 49.5, lng: 9.5}, {lat: 51.5, lng: 11.5})\n );\n};\n","base64":"Ly8gdGl0bGU6IHNpbXBsZSBtYXJrZXIgY3VzdG9taXphdGlvbnM6IGNvbG9yCmltcG9ydCB7TWFya2VyfSBmcm9tICcuL2xpYi9tYXJrZXInOwoKZXhwb3J0IGRlZmF1bHQgKG1hcDogZ29vZ2xlLm1hcHMuTWFwKSA9PiB7CiAgY29uc3QgbTEgPSBuZXcgTWFya2VyKHttYXAsIHBvc2l0aW9uOiB7bGF0OiA1MCwgbG5nOiAxMH19KTsKICBjb25zdCBtMiA9IG5ldyBNYXJrZXIoe21hcCwgcG9zaXRpb246IHtsYXQ6IDUwLCBsbmc6IDExfX0pOwogIGNvbnN0IG0zID0gbmV3IE1hcmtlcih7bWFwLCBwb3NpdGlvbjoge2xhdDogNTEsIGxuZzogMTB9fSk7CiAgY29uc3QgbTQgPSBuZXcgTWFya2VyKHttYXAsIHBvc2l0aW9uOiB7bGF0OiA1MSwgbG5nOiAxMX19KTsKICBjb25zdCBtNSA9IG5ldyBNYXJrZXIoe21hcCwgcG9zaXRpb246IHtsYXQ6IDUwLjUsIGxuZzogMTAuNX19KTsKCiAgLy8gdGhlIG5ldyBjb2xvci1hdHRyaWJ1dGUgd2lsbCB1cGRhdGUgYWxsIGNvbG9yLXByb3BlcnRpZXMgb2YKICAvLyB0aGUgbWFya2VycyB3aXRoIG1hdGNoaW5nIGNvbG9ycyAoYWxsIG9mIHRoZXNlIGF0dHJpYnV0ZXMgY2FuIGFsc28gYmUKICAvLyBzcGVjaWZpZWQgd2l0aCB0aGUgbWFya2VyLW9wdGlvbnMgaW4gdGhlIGNvbnN0cnVjdG9yKQogIG0xLmNvbG9yID0gJyM0Mjg1RjQnOwogIG0yLmNvbG9yID0gJyNEQjQ0MzcnOwogIG0zLmNvbG9yID0gJyNGNEI0MDAnOwogIG00LmNvbG9yID0gJyMwRjlENTgnOwoKICAvLyBhbHRlcm5hdGl2ZWx5LCB5b3UgY2FuIHNwZWNpZnkgeW91ciBvd24gdmFsdWVzIGZvciBlYWNoIG9mIHRoZQogIC8vIHByb3BlcnRpZXMsIGxpa2Ugc286CiAgbTUuYmFja2dyb3VuZENvbG9yID0gJ3doaXRlJzsKICBtNS5ib3JkZXJDb2xvciA9ICdibGFjayc7CiAgbTUuZ2x5cGhDb2xvciA9ICdzYWxtb24nOwoKICBtYXAuZml0Qm91bmRzKAogICAgbmV3IGdvb2dsZS5tYXBzLkxhdExuZ0JvdW5kcyh7bGF0OiA0OS41LCBsbmc6IDkuNX0sIHtsYXQ6IDUxLjUsIGxuZzogMTEuNX0pCiAgKTsKfTsK"},"04.pin-icons.ts":{"title":"simple marker customizations: icons","filename":"04.pin-icons.ts","source":"// title: simple marker customizations: icons\nimport {Marker} from './lib/marker';\nimport {MaterialIcons, MaterialIconsStyle} from './lib/icons';\n\nexport default (map: google.maps.Map) => {\n // first we need to register the icon-provider, which is a function that knows how to create the kind of dom-element needed for an icon-set\n Marker.registerIconProvider(\n MaterialIcons({style: MaterialIconsStyle.FILLED})\n );\n\n const m1 = new Marker({\n map,\n position: {lat: 50, lng: 10},\n scale: 1.5,\n color: '#4285F4'\n });\n const m2 = new Marker({\n map,\n position: {lat: 50, lng: 11},\n scale: 1.5,\n color: '#DB4437'\n });\n const m3 = new Marker({\n map,\n position: {lat: 51, lng: 10},\n scale: 1.5,\n color: '#F4B400'\n });\n const m4 = new Marker({\n map,\n position: {lat: 51, lng: 11},\n scale: 1.5,\n color: '#0F9D58'\n });\n\n m1.icon = 'restaurant';\n m2.icon = 'nightlife';\n m3.icon = 'church';\n m4.icon = 'home';\n\n map.fitBounds(\n new google.maps.LatLngBounds({lat: 49.5, lng: 9.5}, {lat: 51.5, lng: 11.5})\n );\n};\n","base64":"Ly8gdGl0bGU6IHNpbXBsZSBtYXJrZXIgY3VzdG9taXphdGlvbnM6IGljb25zCmltcG9ydCB7TWFya2VyfSBmcm9tICcuL2xpYi9tYXJrZXInOwppbXBvcnQge01hdGVyaWFsSWNvbnMsIE1hdGVyaWFsSWNvbnNTdHlsZX0gZnJvbSAnLi9saWIvaWNvbnMnOwoKZXhwb3J0IGRlZmF1bHQgKG1hcDogZ29vZ2xlLm1hcHMuTWFwKSA9PiB7CiAgLy8gZmlyc3Qgd2UgbmVlZCB0byByZWdpc3RlciB0aGUgaWNvbi1wcm92aWRlciwgd2hpY2ggaXMgYSBmdW5jdGlvbiB0aGF0IGtub3dzIGhvdyB0byBjcmVhdGUgdGhlIGtpbmQgb2YgZG9tLWVsZW1lbnQgbmVlZGVkIGZvciBhbiBpY29uLXNldAogIE1hcmtlci5yZWdpc3Rlckljb25Qcm92aWRlcigKICAgIE1hdGVyaWFsSWNvbnMoe3N0eWxlOiBNYXRlcmlhbEljb25zU3R5bGUuRklMTEVEfSkKICApOwoKICBjb25zdCBtMSA9IG5ldyBNYXJrZXIoewogICAgbWFwLAogICAgcG9zaXRpb246IHtsYXQ6IDUwLCBsbmc6IDEwfSwKICAgIHNjYWxlOiAxLjUsCiAgICBjb2xvcjogJyM0Mjg1RjQnCiAgfSk7CiAgY29uc3QgbTIgPSBuZXcgTWFya2VyKHsKICAgIG1hcCwKICAgIHBvc2l0aW9uOiB7bGF0OiA1MCwgbG5nOiAxMX0sCiAgICBzY2FsZTogMS41LAogICAgY29sb3I6ICcjREI0NDM3JwogIH0pOwogIGNvbnN0IG0zID0gbmV3IE1hcmtlcih7CiAgICBtYXAsCiAgICBwb3NpdGlvbjoge2xhdDogNTEsIGxuZzogMTB9LAogICAgc2NhbGU6IDEuNSwKICAgIGNvbG9yOiAnI0Y0QjQwMCcKICB9KTsKICBjb25zdCBtNCA9IG5ldyBNYXJrZXIoewogICAgbWFwLAogICAgcG9zaXRpb246IHtsYXQ6IDUxLCBsbmc6IDExfSwKICAgIHNjYWxlOiAxLjUsCiAgICBjb2xvcjogJyMwRjlENTgnCiAgfSk7CgogIG0xLmljb24gPSAncmVzdGF1cmFudCc7CiAgbTIuaWNvbiA9ICduaWdodGxpZmUnOwogIG0zLmljb24gPSAnY2h1cmNoJzsKICBtNC5pY29uID0gJ2hvbWUnOwoKICBtYXAuZml0Qm91bmRzKAogICAgbmV3IGdvb2dsZS5tYXBzLkxhdExuZ0JvdW5kcyh7bGF0OiA0OS41LCBsbmc6IDkuNX0sIHtsYXQ6IDUxLjUsIGxuZzogMTEuNX0pCiAgKTsKfTsK"}}
1+
{"00.default.ts":{"title":"00.default.ts","filename":"00.default.ts","source":"// Marker-API Example Playground\n//\n// Edit the code and hit CMD + Enter to execute it.\n//\n// Key bindings:\n//\n// <Cmd> + <Return> compile typescript and execute\n// <Cmd> + <S> save the code to the URL\n//\n\nimport {Marker} from './lib/marker';\nimport {MaterialIcons} from './lib/icons';\n\nexport default (map: google.maps.Map) => {\n Marker.registerIconProvider(MaterialIcons());\n\n const m1 = new Marker();\n m1.position = {lat: 53.555, lng: 10.001};\n m1.scale = ({map}) => Math.max(1, Math.pow(1.45, map.zoom) / 64);\n m1.map = map;\n m1.icon = 'restaurant';\n m1.color = '#DB4437';\n\n type M2Data = {color: string};\n const m2 = new Marker<M2Data>({\n map,\n position: {lat: 53.55, lng: 10},\n scale: 2\n });\n\n m2.color = s => (s.data ? s.data.color : '#0F9D58');\n\n const colors = ['#4285F4', '#DB4437', '#F4B400', '#0F9D58'];\n let colorIdx = 0;\n\n const intervalId = setInterval(() => {\n m2.setData({color: colors[colorIdx]});\n colorIdx = (colorIdx + 1) % colors.length;\n }, 1000);\n\n // the returned function will run before the running code is updated.\n // This gives you an opportunity to clean up everything that has been added\n // (don't worry aboutthe markers, they will be automatically removed from\n // the map)\n return () => {\n clearInterval(intervalId);\n };\n};\n"},"01.simple-marker.ts":{"title":"create marker and add it to the map","filename":"01.simple-marker.ts","source":"// title: create marker and add it to the map\nimport {Marker} from './lib/marker';\n\nexport default (map: google.maps.Map) => {\n const m1 = new Marker();\n m1.position = {lat: 53.555, lng: 10.001};\n m1.map = map;\n\n const m2 = new Marker({\n map,\n position: {lat: 53.55, lng: 10}\n });\n};\n"},"02.update-position.ts":{"title":"specifying and updating position","filename":"02.update-position.ts","source":"// title: specifying and updating position\nimport {Marker} from './lib/marker';\n\nexport default (map: google.maps.Map) => {\n const m1 = new Marker({map});\n\n // at any point in time we can change the position\n m1.position = {lat: 53.555, lng: 10.001};\n\n map.setCenter(m1.position);\n};\n"},"03.pin-styling.ts":{"title":"simple marker customizations: color","filename":"03.pin-styling.ts","source":"// title: simple marker customizations: color\nimport {Marker} from './lib/marker';\n\nexport default (map: google.maps.Map) => {\n const m1 = new Marker({map, position: {lat: 50, lng: 10}});\n const m2 = new Marker({map, position: {lat: 50, lng: 11}});\n const m3 = new Marker({map, position: {lat: 51, lng: 10}});\n const m4 = new Marker({map, position: {lat: 51, lng: 11}});\n const m5 = new Marker({map, position: {lat: 50.5, lng: 10.5}});\n\n // the new color-attribute will update all color-properties of\n // the markers with matching colors (all of these attributes can also be\n // specified with the marker-options in the constructor)\n m1.color = '#4285F4';\n m2.color = '#DB4437';\n m3.color = '#F4B400';\n m4.color = '#0F9D58';\n\n // alternatively, you can specify your own values for each of the\n // properties, like so:\n m5.backgroundColor = 'white';\n m5.borderColor = 'black';\n m5.glyphColor = 'salmon';\n\n map.fitBounds(\n new google.maps.LatLngBounds({lat: 49.5, lng: 9.5}, {lat: 51.5, lng: 11.5})\n );\n};\n"},"04.pin-icons.ts":{"title":"simple marker customizations: icons","filename":"04.pin-icons.ts","source":"// title: simple marker customizations: icons\nimport {Marker} from './lib/marker';\nimport {MaterialIcons, MaterialIconsStyle} from './lib/icons';\n\nexport default (map: google.maps.Map) => {\n // first we need to register the icon-provider, which is a function that knows how to create the kind of dom-element needed for an icon-set\n Marker.registerIconProvider(\n MaterialIcons({style: MaterialIconsStyle.FILLED})\n );\n\n const m1 = new Marker({\n map,\n position: {lat: 50, lng: 10},\n scale: 1.5,\n color: '#4285F4'\n });\n const m2 = new Marker({\n map,\n position: {lat: 50, lng: 11},\n scale: 1.5,\n color: '#DB4437'\n });\n const m3 = new Marker({\n map,\n position: {lat: 51, lng: 10},\n scale: 1.5,\n color: '#F4B400'\n });\n const m4 = new Marker({\n map,\n position: {lat: 51, lng: 11},\n scale: 1.5,\n color: '#0F9D58'\n });\n\n m1.icon = 'restaurant';\n m2.icon = 'nightlife';\n m3.icon = 'church';\n m4.icon = 'home';\n\n map.fitBounds(\n new google.maps.LatLngBounds({lat: 49.5, lng: 9.5}, {lat: 51.5, lng: 11.5})\n );\n};\n"}}

‎examples/index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,18 @@ <h1>List of examples</h1>
3636

3737
<script type="module">
3838
import data from './examples.json';
39+
import {encode} from '../src/editor/snippet-encoder';
3940

4041
const root = document.querySelector('ul.examples');
41-
for (let {title, base64} of Object.values(data)) {
42+
for (const {title, source} of Object.values(data)) {
4243
const el = document.createElement('li');
4344
const a = document.createElement('a');
4445

4546
a.textContent = title;
46-
a.href = import.meta.env.BASE_URL + '#c=' + base64;
47+
a.href =
48+
import.meta.env.BASE_URL +
49+
'#' +
50+
encode({version: API_VERSION, code: source});
4751

4852
el.appendChild(a);
4953
root.appendChild(el);

‎scripts/update-examples.mjs

+1-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ for (let f of examples) {
1717
data[basename] = {
1818
title,
1919
filename: basename,
20-
source,
21-
base64: btoa(source)
20+
source
2221
};
2322
}
2423

0 commit comments

Comments
 (0)