Real-time Visitor Globe with Node.js and WebGL
In this post we would like to share with you a cool project we created by using Node.js and WebGL. It’s a mapped globe of the Earth that you can use to keep track of the people who use your web apps in real-time. After a quick setup, you’ll be able to see the location of everyone who is at your website, pinpointed on the globe and grouped by country. The demo is also fully responsive and works on mobile devices (as long as they ).
Update: Shortly after we published the tutorial, the service that turns ip addresses to location went down. We replaced it
and everything has been working smoothly so far.
How we did it
For the server side of the app we’ve used a few Node.js modules:
is the web framework.
for doing ajax requests in Node.
for catching search engine crawlers.
The globe:
The globe itself was made possible thanks to .
for the map tiles.
The design:
The side menu is animated entirely with CSS.
Some jQuery for the front-end.
Finding the coordinates of IP addresses was done with the help of
Real-time Visitor Globe
How to run it
If you want to run this app locally, the first thing to do is to make sure you have
on your machine. After that, download and unzip the archive with the code (you can download it from a button above) to a folder named nodejs-visior-globe. When that’s done, open up a terminal and navigate to the newly created folder. Once there, run the command below to install the needed npm packages:
npm install
When this process is complete run the following code and go to
in your browser.
node app.js
There you will see the globe. However, you might notice that there isn’t anyone on the map. That’s because the whole thing is working offline and since we need an active server this won’t be enough.
Integrating it with your site
There are two things you need to do before you see your website visitors on the globe:
Upload the app to a hosting service like . We’ve covered how to deploy your code to heroku . The instructions are exactly the same. The only difference is that you will end up with the URL of your new globe rather than the private chat app.
Include a special tracking image on your site. You can do this by adding this html to the footer of every page of your site &img src="http://yourglobe/ping" width="1" height="1" style="display:none" /&. Replace yourglobe with the heroku url of your app. If you load the src url of the image in a browser, you should see the text “Done”.
A tracking image is an invisible image that is embedded on every page of your website, and which points to /ping. When people load your site, their browser loads all images automatically, which causes the tracking URL to also be loaded. Our app listens for that specific URL, and gets the ip address of the visitor, finds their location and saves it. Users are considered to be online up to 5 minutes after visiting your site (this can be configured in app.js).
All done! You can now enjoy your real time visitor globe!
The design
The PSD for the design is available for free to all of our newsletter subscribers! Join or login from
to download it.
And this sums up our visitor globe. We hope you like it! If you have any suggestions or questions feel free to leave a comment below.
Presenting Bootstrap Studio
a revolutionary tool that developers and designers use to createbeautiful interfaces using the Bootstrap Framework.
Is the demo up?
Nothing is rendering for me.
Either way I look forward to digging through the code.桌面版 Google Maps 开始测试用 WebGL 替换 flash 技术
如果你喜欢Google Maps for Android那远比桌面版流畅的界面，那么现在是时候尝试新事务了。如果你使用Chrome 14+或Firefox
8+浏览器，且显卡支持WebGL标准，那么现在打开Google Maps即可在左侧看到一个提示：“Want to try something
new?”，点击之后Google
Maps就不会再使用flash技术来显示街景了，而换用WebGL（Google称其为MapGL），且可显示出跟Android手机上一样的3D地图界面。
使用WebGL之后，地图的性能会大大提升，进入街景模式更容易，增加了3D地图的显示，地图图片之间的切换更顺滑，甚至还有45度的视角旋转功能。
现在桌面版的Google Maps更像是一个原生应用了，继续观看视频体验：
[责任编辑：ugmbbc]
-5-4-3-2-1012345
当前平均分: 打分后显示
-5-4-3-2-1012345
当前平均分: 打分后显示推荐：　　
您现在的位置：>>
>为电影「霍比特人2」宣传Google打造中土世界谷歌地图
为电影「霍比特人2」宣传Google打造中土世界谷歌地图
来源：178动漫频道
作者：门牌君
　　电影「魔戒」以及「霍比特人」的世界“中土世界”也有谷歌地图了？没有在为了配合将在12月13日上映的电影「霍比特人2：史矛革荒漠」（The Hobbit: The Desolation of Smaug）的宣传，官方与Google共同推出了一项合作企划「中土大陆的旅程」（A Journey Through Middle-earth），透过Google 的最新技术Chrome Experiment，可于中土大陆上进行游戏。
　　中土大陆的旅程：（请使用Chrome浏览器）
　　中土大陆的旅程的样子个一般我们看到的谷歌卫星地图差不多，在首页上大家还可以看见“有某位叫谷歌的朋友制作”的字样。目前地图上开放的区域不多，不过大家同样可以点击进入一窥魔戒中土世界的风情！【google你的技能点也开始要电点歪的节奏了吗？
　　「中土之旅」网页游戏内容主要透过CSS3与WebGL技术打造，使用者将可透过桌机版Chrome、Android版Chrome开启充满3D显示特效的游戏内容，而音效部分将透过Web Audio API输出。虽然iOS版Chrome暂时未加入WebGL技术，iPhone或iPad使用者仍可透过Chrome浏览器开启体验「中土之旅」。
　　透过Chrome Experiment，这次的企划完整呈现了「霍比特人：史矛革荒漠」系列中的舞台地图，不但可以体验成为拯救作中主角比尔博巴金斯的大老鹰、逃脱食人妖的追击、更可以在广大的中土世界中进行探索。
　　在地图上的各个据点也有详细的地点及世界观解说，官方更准备了全球 40 种语言以提供更多人这项冒险体验。目前地图上仅开放了多尔歌多、瑞文戴尔、食人妖森林等三处，预定12月4日起将开放瑟兰都伊厅堂、长湖镇，12月13日则将开放孤山地区。下次自动登录
现在的位置:
& 综合 & 正文
WebGL Earth 三维地球
&!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&WebGL Earth&/title&
&!-- &script src="js/api.js"&&/script&--&
&script src="/api.js"&&/script&
////加载默认地图
//function initialize() {
var options = { zoom: 3.0, position: [47.1404] };
var earth = new WebGLEarth('earth_div', options);
////加载自定义地图 其实是一张图片 无法缩放
//function initialize() {
var earth = new WebGLEarth('earth_div', { zoom: 2, proxyHost: '/cgi-bin/corsproxy.fcgi?url=' });
var customTMS = earth.initMap(WebGLEarth.Maps.CUSTOM, ['TMS', '/natural-earth-color/{z}/{x}/{y}.jpg', 1, 5, 256, true]);
name, url, minZoom, maxZoom, tileSize, flip-y-axis
earth.setBaseMap(customTMS);
var markerflag =
function initialize() {
var earth = new WebGLEarth('earth_div', { zoom: 2, proxyHost: '/cgi-bin/corsproxy.fcgi?url=' });
var customTMS = earth.initMap(WebGLEarth.Maps.CUSTOM, ['TMS', '/natural-earth-color/{z}/{x}/{y}.jpg', 1, 5, 256, true]);
// name, url, minZoom, maxZoom, tileSize, flip-y-axis&img src="images/earth_surface_2048.jpg" /&
earth.setBaseMap(customTMS);
var marker = earth.initMarker(35, 114, 'images/pin_up.png', 30, 30);
marker.on('click', showInfo);
markerinfo = earth.initMarker(36, 114, 'images/pin_up.png', 30, 30);
markerinfo.bindPopup('hello world==========================HHHHH').openPopup();
markerinfo.on('click', showInfowindow);
var showInfo = function (e) {
alert('You clicked at ' + e.latitude + ',' + e.longitude);
alert('Relative coords: ' + e.offsetX + ',' + e.offsetY);
var showInfowindow = function (e) {
if (markerflag == true) {
markerinfo.openPopup();
markerflag =
markerinfo.closePopup();
markerflag =
html, body, #earth_div
padding: 0;
margin: 0;
height: 100%;
&body onload="initialize()"&
&div id="earth_div" style="width: 100%; border: 1 padding: 2"&&/div&
&&&&推荐文章:
【上篇】【下篇】