Created
January 20, 2013 19:18
-
-
Save hrwgc/4580935 to your computer and use it in GitHub Desktop.
custom interactivity with data contained in mbtiles rather than pre-formatted tooltips
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
| mapbox.load('herwig.map-siz5m7we', function(o) { | |
| var map = mapbox.map('map'); | |
| map.addLayer(o.layer); | |
| map.zoom(4).center({ | |
| lat: -28.613, | |
| lon: 144.14 | |
| }).setPanLimits([{ | |
| lat: -85.0511, | |
| lon: -180 | |
| }, { | |
| lat: 85.05115, | |
| lon: 180 | |
| }]); | |
| map.setZoomRange(2, 8); | |
| map.interaction.auto(map); | |
| map.interaction.on({ | |
| on: function(o) { | |
| // This will only listen to mousemoves. You can also look | |
| // for clicks or any other event or combination of events. | |
| if (o.e.type === 'mousemove') { | |
| // insert custom interactivity functions here | |
| // map data is contained in o.data.[data_column_name] | |
| // an easy way to see contents of data in mbtile is to include the following here: | |
| // first, clear the element containing previous interactivity | |
| $('#custom-interactivity').empty(); | |
| $('#custom-interactivity').append("<pre class='prettyprint language-js'>" + JSONFormat(JSON.stringify(o.data)) + "</pre>"); | |
| prettyPrint(); | |
| // then append the data to the parent element using your custom html/styling | |
| $('#custom-interactivity') | |
| .append( | |
| "<img src='" | |
| + o.data.image | |
| + "' height='100px' /><h4><span>Name:</span><span class='data'>" | |
| + o.data.full_name | |
| + "</span></h4>"); | |
| } | |
| }, | |
| off: function() {} | |
| }); | |
| }); |
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 PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'> | |
| <meta name='apple-mobile-web-app-status-bar-style' content='black'> | |
| <meta name='apple-mobile-web-app-capable' content='yes'> | |
| <title> | |
| Demo custom interactivity | |
| </title> | |
| <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' type="text/css"> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"> | |
| </script> | |
| <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js' type="text/javascript"> | |
| </script> | |
| <link href='https://raw.github.com/twitter/bootstrap/gh-pages/1.4.0/bootstrap.min.css' rel='stylesheet' type="text/css"> | |
| <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" type="text/css" rel="stylesheet"> | |
| <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"> | |
| </script> | |
| <script type="text/javascript" src="https://raw.github.com/phoboslab/json-format/master/json-format.js"> | |
| </script> | |
| <style type="text/css"> | |
| #map { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| top: 0; | |
| width: 100%; | |
| z-index: 0; | |
| } | |
| .wax-tooltip { | |
| display: none; | |
| } | |
| #custom-interactivity { | |
| top: 0; | |
| height: 350px; | |
| max-width: 675px; | |
| position: absolute; | |
| vertical-align: top; | |
| background: rgba(120,120,120,0.2); | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 8pt; | |
| padding: 5px; | |
| padding-top: 0; | |
| z-index: 1; | |
| } | |
| #custom-interactivity h4 { | |
| background:rgba(240,240,240, 0.5); | |
| display: inline-block; | |
| width: 50%; | |
| vertical-align: top; | |
| padding: 20px; | |
| } | |
| #custom-interactivity h4 span { | |
| line-height: 12pt; | |
| padding-right: 10px; | |
| width: 50%; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| font-size: 6pt; | |
| color: #000; | |
| } | |
| #custom-interactivity img { | |
| margin-left: 10px; | |
| -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); | |
| -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); | |
| box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); | |
| -webkit-border-radius: 20px; | |
| -moz-border-radius: 20px; | |
| border-radius: 20px; | |
| } | |
| #custom-interactivity img:after { | |
| position: absolute; | |
| content: ' '; | |
| width: 100%; | |
| height: 50%; | |
| top: 0; | |
| left: 0; | |
| -webkit-border-radius: 20px; | |
| -moz-border-radius: 20px; | |
| border-radius: 20px; | |
| background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); | |
| background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); | |
| } | |
| #custom-interactivity h4 span.data { | |
| font-weight: 600; | |
| font-size: 10pt; | |
| } | |
| #custom-interactivity pre { | |
| margin-left: 5px; | |
| margin-right: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body onload="prettyPrint()"> | |
| <div id='map'></div> | |
| <div id='custom-interactivity'></div> | |
| <script type='text/javascript' src='custom_interactivity.js'></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment