Last active
January 31, 2018 02:11
-
-
Save ramiroaznar/f044979a201ce58e772239418c9b7b4c to your computer and use it in GitHub Desktop.
How to add a GMaps Basemap with CartoDB.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>How to add a GMaps Basemap with CartoDB.js</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| | |
| <!-- include google maps library + visualization--> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> | |
| | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script> | |
| | |
| <script> | |
| // declare map object | |
| var map; | |
| function main() { | |
| // map options | |
| var myOptions = { | |
| zoom: 3, | |
| center: new google.maps.LatLng(40, 0), | |
| disableDefaultUI: true, | |
| mapTypeId: google.maps.MapTypeId.SATELLITE | |
| } | |
| // render basemap | |
| map = new google.maps.Map(document.getElementById("map"), myOptions); | |
| // declare vizjson | |
| var urlLayer = "https://team.cartodb.com/u/ramirocartodb/api/v2/viz/d3b411a0-e521-11e5-bf3f-0e31c9be1b51/viz.json"; | |
| // add a layer to the map | |
| cartodb.createLayer(map, urlLayer) | |
| .addTo(map); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice example! I want to try it.