I'm just starting to learn the v3 API and am trying to understand how to style the default map at construction. The documentation is somewhat vague (or I'm too much of a noob to understand it) and I can't seem to find any example code on how to add map styles to the MapOptions object.
Could someone show how to add styles directly in mapOptions?
Have you tried the styles property of the MapOptions object?
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center: new google.maps.LatLng(0,0),
styles: [{featureType:"administrative", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:22},{lightness:-5}]}]
});
Documentation is at http://code.google.com/apis/maps/documentation/javascript/reference.html.
(Edited to fix small syntax error)
Related
I am trying to load the basic rotating cube example from the three.js getting started guide in to a basic meteor app:
http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
I have added this code into a template js manager file of a new meteor app and then call the render function on the render of my template:
Template.hello.rendered = function() {
if (!this._rendered) {
this._rendered = true;
render();
}
}
My template
<template name="hello">
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
</body>
</template>
I have added three.js from atomosphere via:
mrt add three
and it loaded the package successfully into my app
However, when I start meteor I am getting an error that THREE is undefined.
I have tried moving three.js into the lib folder and that didn't work because I get an error that 'self' is undefined. I think this should only load as a client library. I have tried putting it with the client folder and below my manager file, but that didn't seem to work either and it seemed hacky. It seems like meteorite installed packages should be loaded first, right? WHy isn't this available from my template manager?
Any help would be greatly appreciated. I am new to both meteor and three.js so I think getting this basic demo working would really open my eyes.
Thanks!
Use the bower package and add three js through that.
https://atmospherejs.com/package/bower
I find that a lot of the wrapper packages on atmosphere fall out of date, so the bower package is a nice solution for this sort of thing.
The THREE.js library should go into client/compatibility folder. The package you were trying to use is probably deprecated.
EDIT
You can also try wrapping your THREEJS code with Meteor.startup to ensure the work is only performed after all js files are loaded. The Meteor's file loading order has always been a headake.
I really appreciate the feedback!
I also tried Bower and got a reference error on a new project after installing threejs package via Bower after starting Meteor. I am not sure what the issue is there.
However, I think I identified the problem with using three.js in the client folder. THREE is defined with VAR so only has local file scope and was not available from my manager file. There is a newer atmosphere package that has modified this to use a global scope:
https://atmospherejs.com/package/three.js
This package works. I found that you can also use the newest min.three.js file directly in the client folder without installing a package if you add window.THREE = THREE; to the end of the file--giving the local THREE variable access to global scope.
Finally, it's worth mentioning that I had defined my 'var scene' and other three.js code as shown in my question outside of the if Meteor.isClient function. Since my three.js code was within the client folder and inaccessible to the server, the server was throwing this error.
I hope someone finds my pitfalls helpful. Meteor definitely requires a slightly new way of looking at a JS appilcation, but I think it will be really great. I am excited to move past this seemingly simple issue that has been driving me crazy.
I'm working with Meteor at the moment, and I'm trying to make it look more 'real timey' by adding transitions to numbers as they change. The best third party package I can see for that is http://github.hubspot.com/odometer/.
I'm having trouble getting the package to work in Meteor to update comment numbers on an item.
I've tried putting the javascript into client/compatibility as per the meteor docs: http://docs.meteor.com/#structuringyourapp, but no joy.
The other issue might be that the package uses CSS transitions, which would mean that a re-rendering of the template around the number that is updating would prevent the transition from occurring. To try and fix this problem, I used {{#isolate}} around the number, but that didn't work either.
Has anyone got any other ideas on what else in meteor might be getting in the way?
I think you should try {{#constant}} instead of {{#isolate}}. Also note, that the "constant" part of your template will no longer be reactive, so you'll have to update it manually. Supposing that you have a template
<template name="myTemplate">
{{#constant}}
<span class="odometer"></span>
{{/constant}}
</template>
you will need to do something like this:
Template.myTemplate.rendered = function () {
var node = this.find('.odometer');
Deps.autorun(function () {
node.innerHtml = MyCollection.find({}).count();
});
}
Hi I am facing problem with Google map in sencha touch 2. Following is the code ..
new Ext.application({
name:'Touch Start',
launch:function(){
var map = new Ext.Panel({
fulscreen:true,
items:[
{
xtype:'map',
useCurrentLocation:true,
}
]
});
this.viewport = map;
}
});
Please Help is anyone know about this
First of all, and before your question gets closed, you're not exactly telling us what the problem is with your code. So, I guess you can be facing two different problems
Google Maps API is required
Be sure to add the script tag that load the Google Maps API. You can find infos here
No Layout
Your main panel doesn't contain any layout, so it doesn't know how to display its items
Try to add this to the config :
layout: 'fit'
Here's a working example where the Google Maps API is loaded asynchronously :
http://www.senchafiddle.com/#MhAME
Hope this helped
I am looking to add a small splash screen at the launch of an app I am working on to show licence and version info along with details of some client specific info. Having set my default window dimensions etc in tiapp.xml I am now looking at how to override these on a specific user window (namely index.html).
I've had a dig through the API and thought I had found what I was looking for, but on testing it doesn't do anything to the window dimensions. I know it will be my doing (I'm a php man trying desperately to learn javascript!) but can someone have a look at my code and point out the error of my ways...
In the of my index.html I have the following code:
<script>
var Ti = Titanium;
var window = Ti.UI.currentWindow;
window.setHeight(250);
window.setWidth(500);
</script>
I'm guessing I've either messed up my javascript or TideSDK syntax??
you have used the reserved variable "window", which belongs to JavaScript and can't be overwritten.
The following code works for me:
var Ti = Titanium;
var this_window = Ti.UI.getCurrentWindow();
setTimeout(function(){
this_window.setHeight(250);
this_window.setWidth(500);
}, 3000);
If you want to learn to write good JavaScript, I can give you a couple of book recommendations.
I've run into a small problem with the semi-new KML Overlay functionality with Google Maps API v3, wherein while I am able to use "suppressInfoWindows: true;", the cursor still appears as though the overlay(s) are clickable.
Is there a way at this time to change the css on the overlay(s) so that the cursor is the default cursor, so that they are purely visual, and don't confuse the user?
You can do this through javascript (not sure about a purely CSS solution) using something along the lines of...
var ctaLayer = new google.maps.KmlLayer({
url: 'myKmlFile.kml',
suppressInfoWindows: true
});
if (ctaLayer.suppressInfoWindows) ctaLayer.setOptions({clickable:false});
ctaLayer.setMap(map);
This sounds like a bug. You should file it at the Google Maps API's issue tracker.