Skip to content

Instantly share code, notes, and snippets.

@szogoon

szogoon/index.html

Created September 7, 2021 10:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save szogoon/1a3fea7b0eed4e71f31dcc37d1b55087 to your computer and use it in GitHub Desktop.
Save szogoon/1a3fea7b0eed4e71f31dcc37d1b55087 to your computer and use it in GitHub Desktop.
Download ZIP
SDK for Web example with overlay text
Raw
index.html
<!DOCTYPE html>
<html class='use-all-space'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='UTF-8'>
<title>TomTom Maps SDK for Web - text overlay</title>
<meta name='viewport'
content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps.css'>
<style>
#container {position: relative; height: 300px; width: 450px;}
#map, #overlay {position: absolute; height: 100%; width: 100%;}
#overlay {z-index: 1100;}
#overlay-content {margin: 100px; text-align: center; padding: 10px; background: white;}
</style>
</head>
<body>
<div id='container'>
<div id='map' class='map'></div>
<div id='overlay'>
<div id='overlay-content'>This is some text</div>
</div>
</div>
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps-web.min.js'></script>
<script>
var map = tt.map({
key: '<your-api-key>',
container: 'map'
});
map.addControl(new tt.FullscreenControl());
map.addControl(new tt.NavigationControl());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment