Hi I'm making a simple app to show leaflet map with meteor.
This simple example is not working
testApp.html :
<head>
<title>testApp</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="map"></div>
</body>
testApp.js
if (Meteor.isClient) {
var map = L.map('map').setView([51.505, -0.09], 13);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});
map.setView(new L.LatLng(51.3, 0.7),9);
map.addLayer(osm);
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
It's giving me Uncaught TypeError: Cannot read property '_leaflet' of null
if i write the same code in the console , the map shows.
Thank you for your help
you need to put your map rendering code in a callback that will run when template is rendered
Template.nameofyourtemplate.rendered = function() { //map code }
Wrap your map div like below
<template name='nameofyourtemplate'>
{{#constant}}
<div id='map'></>
{{/constant}}
<template>
separate map template from HTML body
<body>
<{{> nameofyourtemplate>}}
</body>
You need to wrap your map div as below
{{#constant}}
<div id="map"></div>
{{/constant}}
Related
I have a dashboard in Google Analytics.
I want to only capture a certain part of the dashboard using CasperJS.
No matter what I've tried it captures the entire page.
What I'm I doing wrong here?
This is the HTML hierarchy that I find when I inspect the Google Analytics dashboard:
<div id="ID-view">
<div class="_GAeH" id="ID-dashboard">
<div id="ID-layout">
<div class="_GARW ">
<div class="_GAoA">
<!-- more <div>s with the content -->
</div>
</div>
</div>
</div>
</div>
CasperJS code snippet:
var casper = require('casper').create();
casper.start('https://www.google.com/analytics/web/the/rest/of/the/url/', function() {
this.fill('form#gaia_loginform', { 'Email': 'user', 'Passwd':'pass' }, true);
});
casper.waitForSelector('.ID-row-4-0-0', function() {
casper.page.paperSize = {
height: '11in',
width: '8.5in',
orientation:'portrait',
border: '0.4in'
};
// NONE of these work the way I think they should
// this.captureSelector('ga.pdf','#ID-view');
// this.captureSelector('ga.pdf','#ID-dashboard');
// this.captureSelector('ga.pdf','#ID-layout');
this.captureSelector('ga.pdf','._GAoA');
// this.captureSelector('ga.pdf','._GARW'); // <-- this one fails, capture height is messed up
},
function() {
this.echo("Timeout reached");
});
casper.run();
Try this:
this.captureSelector('ga.pdf','div._GAoA', {quality: 100});
If you cant take the screenshot of the element _GAoA please share the output of your casperjs scrpit.
Good luck.
Hy guys, i'm studing the meteorjs and i got some problems to see the things on firefox. On google chrome, everythings gonna well and i can see everything without errors.
My code is:
/-->server/server.js
Meteor.publish('places', function () {
return Places.find();
});
/-->model.js
Places = new Meteor.Collection('placesNew');
Places.allow({
insert: function(){
return false;
},
update: function(){
return false;
},
remove: function(){
return false;
}
});
Meteor.methods({
createPlace: function(options){
check(options, {name: NonEmptyString, latitude: NonEmptyString , longitude:NonEmptyString , color: NonEmptyString});
return Places.insert({name:options.name, latitude: options.latitude, longitude: options.longitude, color: options.color});
},
removePlace: function(options){
return Places.remove(options.id);
}
});
var NonEmptyString = Match.Where(function (x) {
check(x, String);
return x.length !== 0;
});
/-->services.js
var map;
renderize_map = function (places){
var mapOptions = {
center: new google.maps.LatLng(47.36865 , 8.539183),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map= new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
places.forEach(function (place) {
var pinColor = place.color.replace("#","");
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.latitude, place.longitude),
title: place.name,
icon: pinImage,
map: map
});
});
}
/-->client/places_list.js
Meteor.subscribe('places');
Template.places_list.places = function () {
return Places.find({},{sort:{name: -1}});
}
Template.places_list.events({
'click #add':function() {
options ={};
options.name = document.getElementById('name').value;
options.latitude = document.getElementById('latitude').value;
options.longitude = document.getElementById('longitude').value;
options.color = document.getElementById('color').value;
Meteor.call('createPlace',options, function(error,place){
if(error){
console.log("Não Foi possível inserir");
}
});
renderize_map(Places.find({},{sort:{name: 1}}));
},
'click .plc_remove': function(obj){
options={};
options.id=obj.toElement.attributes['data-ref'].value;
Meteor.call('removePlace',options, function(error,place){
if(error){
console.log("Não Foi possível inserir");
}
});
renderize_map(Places.find({},{sort:{name: 1}}));
}
});
Template.maps.rendered = function() {
renderize_map(Places.find({},{sort:{name: 1}}));
}
/-->client/places_list.css
/* CSS declarations go here */
#map-canvas{
width: 500px;
height: 500px;
}
/-->client/places_list.html
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
<body>
<header>
<h1>TableList</h1>
{{> places_list}}
{{> maps}}
</header>
</body>
<template name="places_list">
<div class"place-list-form">
<input type="text" placeholder="Insert a place here" value="{{name}}" id="name"/><br>
<input type="text" placeholder="Insert a Latitude here" value="{{latitude}}" id="latitude"/><br>
<input type="text" placeholder="Insert a Longitude here " value="{{longitude}}" id="longitude"/><br>
<input type="text" placeholder="Insert a Color here " value="{{longitude}}" id="color"/>
<button id="add">Add point</button>
</div>
<div class"place-list-container">
<ul>
{{#each places}}
<li> {{ name}} | <a class="plc_remove" data-ref="{{_id}}" href="#">x</a> | </li>
{{/each}}
</ul>
</div>
</template>
<template name="maps">
<div id="map-canvas"></div>
</template>
The errors are:
SyntaxError: missing } after function body
http://localhost:3000/packages/livedata.js?a3d111217f95d5af907302198a85413d1acbaf05
Line 1766
TypeError: Package.livedata is undefined
http://localhost:3000/packages/mongo-livedata.js?a3509c5f9f4ed6ded19eaac97c69c2a91d81df81
Line 28
TypeError: Package.livedata is undefined
http://localhost:3000/packages/global-imports.js?fbb54e05f02190869755c48bbc5e3bd9f17811b4
Line 7
ReferenceError: Template is not defined
http://localhost:3000/client/template.places_list.js?ee7af8e7be9b55207b7bef609fa51cb0e5f513a9
Line 1
TypeError: Meteor.subscribe is not a function
http://localhost:3000/client/places_list.js?6a2a131bfee6da3c6e08cee25711a90317cb4a4e
Line 1
TypeError: Meteor.Collection is not a constructor
http://localhost:3000/model.js?9eed9b90a309156348195efef61705bab5494768
Line 1
ReferenceError: Spark is not defined
http://localhost:3000/client/template.places_list.js?ee7af8e7be9b55207b7bef609fa51cb0e5f513a9
Line 1
Can anyone helpme?
Thanks!
I just copy and pasted all your code into a project and it works for me on both Firefox (version 19.0.2 on OSX) and Chrome. Or at the very least it loads everything and I could add a location that would be visible as a name in the other browser, it didn't add a pin to the map.
The errors you are getting are pretty fundamental errors suggesting that some of the essential built-in packages aren't loading correctly. I don't see why this would only be an issue in one browser though. If you view source in your browser is the list of packages the same in both Chrome and Firefox?
As a suggestion I would try editing the packages file (.meteor/packages from your project root directory). Try removing all the packages which will obviously cause the app to stop working and adding the default ones again which are:
standard-app-packages
autopublish
insecure
preserve-inputs
Beyond that, do other meteor apps run ok in Firefox? If not look at what add-ons and settings you have. If it's just this app and other people can get it working in Firefox then all I can think of is remaking the project copying and pasting your files in.
I have a problem where my Google Maps is only showing top tiles (much like this issue PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?) but in iOS and with jQuery UI Map.
However this only occurs after I play around with the app for some time switching tabs (it works fine on a Desktop Browser, only fails on the Device App)
I've tried several solutions from other posts (as you can see from the code) but my problem is a bit different, as it doesn't happen at first
Here is my HTML
<div data-role="page" id="page3" data-url="page3" tabindex="0" style="padding-bottom:19px">
....
<div data-role="content" id="ct">
<div id="map_canvas" style="height:100%"></div>
</div>
....
</div>
And JS
$(document).bind('pagechange', function () {
if ($.mobile.activePage.attr('id') === 'page3') {
if (!mapInited) {
mapInited = true;
$('#map_canvas').gmap().bind('init', function () {
var bounds = new google.maps.LatLngBounds();
navigator.geolocation.getCurrentPosition(locSuccess, locError);
$.each(markers, function (i, marker) {
var latlong = new google.maps.LatLng(marker.latitude, marker.longitude);
bounds.extend(latlong);
$('#map_canvas').gmap('addMarker', {
'position': latlong,
'bounds': true,
'primaryColor': "#0000FF",
'icon': './img/train.png'
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': marker.content
}, this);
});
});
$('#map_canvas').css('height', getRealContentHeight());
$('#map_canvas').css('width', '100%');
google.maps.event.trigger($('#map_canvas'), "resize");
setTimeout(function () {
google.maps.event.trigger($('#map_canvas'), 'resize');
}, 500);
});
}
}
});
}
Thanks in advance for any thoughts
"Fixed" the issue with a very ugly work around
Basically I recreate the Map everytime the page is loaded, like this
if (!mapInited) mapInited = true;
else { $('#map_canvas').remove(); $('#ct').append('<div id="map_canvas" style="height:100%"></div>'); }
You trigger the resize-event for a jQuery-object, what will not have any effect, because you must trigger the event for the google.maps.Map-instance:
google.maps.event.trigger($('#map_canvas').gmap('get','map'),'resize');
You may also use the plugin-method triggerEvent to trigger the event:
$('#map_canvas').gmap().triggerEvent('resize');
If you are using jquery-ui-map, why are you using the native google maps api instead of the gmap functions?
Why not call the $('#map_canvas').gmap('refresh');
EDIT: Solved:
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
I'm a cut-and-paste coder and while I intend on learning the syntax better, I'm on a deadline for now so I'm asking for help. I have googled extensively and while there are solutions to my problem, I haven't found one that works for me. My KML file is hosted on Google Drive so instead of a file url there is a driveFileId.
If you want to preserveViewport, you normally just add it to the layer object and set it to 'true'. However my KML file won't let me override its default zoom level where the bounds fit the screen no matter how I write it. Can someone help? This is the working object:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
EDIT: Here's the whole thing. Perhaps you can see if there are redundancies or contradictions that are causing this.
<!DOCTYPE html>
<html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Aexamplekey0&sensor=true"></script>
<style>
#map {
width: 310px;
height: 410px;
}
</style>
<script>
window.onload = function () {
var latlng = new google.maps.LatLng(53.385873, -1.471471);
var styles = [
{
//whatever
}
]
var myOptions = {
zoom: 15,
disableDefaultUI: false,
styles: styles
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Based on the current release API documentation, you should be able to set the preserveViewport option in the object you instantiate:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg",
preserveViewport: true});
layer.setMap(map);
Without further information, such as a URL to your KML data, information about your map center and zoom, there's not much further that can be said.
GOT IT!
Here it is:
var opt = { minZoom: 11, maxZoom: 15 };
map.setOptions(opt);
And then in your the myOptions object you set your default zoom. Solution found here: Google Maps v3 - limit viewable area and zoom level
thanks to #ChrisV. I don't know why but the KML Layer won't allow any permutation of the original preserveViewport code.
I'd like to display a Google Map overlaid with two Fusion Tables layers. The code below works perfectly if I just copy it into a text editor, save the file as map.html, and open it in my browser. But when I put it in a post on my WordPress-themed site, the underlying map is hidden by the Fusion Tables layers. Those layers aren't totally opaque: I can see both of them at the same time. I just cannot see the underlying map.
Whenever I zoom or pan the map, the underlying map appears briefly before the Fusion Tables layers are drawn over it. I suspect that there is a style setting at fault. Do you know how to get the map to display properly?
I'm using WordPress version 3.0.4 with the Gazette theme by woothemes; the site is http://www.wisconsinwatch.org.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
<script type="text/javascript">
var fracmap = new google.maps.Map(document.getElementById('gmap'), {
center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
zoom: 7,
mapTypeId: 'hybrid'
});
var layer0 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695847
},
});
layer0.setMap(fracmap);
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695779
},
});
layer1.setMap(fracmap);
</script>
</div>
Thanks!
Wordpress wraps the content of your post in a <div class="entry"> block, which your theme uses to provide the proper styling. Since the javascript that prepares the Google map for display returns an image, the relevant part of the Gazette style sheet is:
.entry img {
padding: 4px;
border: 1px solid #dddddd;
background-color: #FFFFFF;
}
Specifically, the background-color setting causes the overlaid Fusion Tables layers to be drawn with an opaque background, which then hides the underlying map. You need to define a new class in your style sheet (let's call it "map") that draws images with a transparent background:
.map img {
background-color: transparent;
}
And then wrap your javascript in a <div class="map"> block, like so:
<div class="map">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
<script type="text/javascript">
var fracmap = new google.maps.Map(document.getElementById('gmap'),
center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
zoom: 7,
mapTypeId: 'hybrid'
});
var layer0 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695847
},
});
layer0.setMap(fracmap);
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695779
},
});
layer1.setMap(fracmap);
</script>
</div>
</div>