\n
<\/div>\n <\/body>\n<\/html>", js: "const DATA_URL = \'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json\';\n\nconst LOOP_LENGTH = 1800;\nconst THEME = {\n trailColor0: [255, 0, 0],\n trailColor1: [0, 0, 255]\n};\n\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\'map\'), {\n center: {lat: 40.72, lng: -74},\n bearing: 0,\n gestureHandling: \'greedy\',\n mapId: \'fae05836df2dc8bb\',\n tilt: 45,\n zoom: 15\n });\n\n let currentTime = 0;\n const props = {\n id: \'trips\',\n data: DATA_URL,\n getPath: d => d.path,\n getTimestamps: d => d.timestamps,\n getColor: d => (d.vendor === 0 ? THEME.trailColor0 : THEME.trailColor1),\n opacity: 0.6,\n widthMinPixels: 12,\n trailLength: 180,\n currentTime,\n shadowEnabled: false\n };\n\n const overlay = new deck.GoogleMapsOverlay({});\n const animate = () => {\n currentTime = (currentTime + 1) % LOOP_LENGTH;\n const tripsLayer = new deck.TripsLayer({\n ...props, currentTime\n });\n overlay.setProps({\n layers: [tripsLayer]\n });\n\n window.requestAnimationFrame(animate);\n };\n window.requestAnimationFrame(animate); \n\n overlay.setMap(map);\n}\n\ninitMap();", css: "/* Always set the map height explicitly to define the size of the div element that contains the map. */\n#map {\n height: 100%;\n}\n\n/* Optional: Makes the sample page fill the window. */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n" }, fiddle: { version: "6", slug: "ochkupxd", boilerplate: false }, panels: { html: "html", js: "javascript", css: "css" }, user: { id: "None", username: "" }, currentUser: false, isAuthor: false, features: { toggleSidebar: false } } // translations const I18n = { editor: { panels: { result: "Result", drag_to_reorder: "Drag tabs to reorder", tidy: "Tidy" }, sidebar: { toggle_sidebar: "Toggle sidebar" }, groups: { placeholder_value: "Assign to groups", search_placeholder_value: "Search for groups", no_choices_text: "No more groups", no_results_text: "No groups found", item_select_text: "Press to select", you_have_no_groups: "You have no groups" } } } const EditorUISettings = { // options that user can change layout: 1, darkTheme: true, tabSize: 2, matchBrackets: true, lineNumbers: true, lineWrapping: true, keyMap: "default", autoCloseTags: true, autoCloseBrackets: true, indentWithTabs: false, codeLinting: true, autoRun: EditorConfig.currentUser ? false : false, autoRunValid: EditorConfig.currentUser ? true : false, autoSave: EditorConfig.currentUser ? true : false, clearConsole: false, fontSize: 1, matchTags: false, foldGutter: true, codeHints: true, editorConsole: true } deck+Google TripsLayer - JSFiddle - Code Playground

JSFiddle

  • zapGo PRO
  • Settings
  • Sign in