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.
Related
When I put my object (points) in the same script as the google maps API it works fine. But when I move the object to its own script on top it says "points is not defined".
I need to have the object in the top script (its actually coming from a database).
See working demo: https://price-points.web.app/
This is a Svelte project.
<script>
export const prerender = true;
let showMap = false;
//How can I make this work without the setTimeout?
setTimeout(function(){showMap = !showMap}, 1);
</script>
<!-- Google Maps API -->
<div>
<div id="map"></div>
<script>
//If points object is here it works fine.
//If points is defined in top script it says "points is not defined"
//My ACTUAL points object comes from a database and needs to be in top script.
let points = {
sanFrancisco: {
lat: 37.7749,
lng: -122.4194,
price: 123.45
},
losAngeles: {
lat: 34.0522,
lng: -118.2437,
price: 567.89
}
}
function initMap() {
const california = {lat: 36.7783,lng: -119.4179};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: california,
});
Object.values(points).forEach(({ lat, lng, price }) => {
const marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
label: `$${price}`,
icon: { url: 'https://i.imgur.com/ECXgKpB.png', scaledSize: new google.maps.Size(60,35), labelOrigin: new google.maps.Point(30, 15)}
});
});
}
window.initMap = initMap;
</script>
{#if showMap}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" defer async></script>
{/if}
</div>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
The script in Svelte components is scoped (it is implicitly a module which requires import/export), you have to set window.points to make variables available globally.
Note that in SvelteKit you cannot access window during server-side rendering, so you probably should move the assignment into onMount. In general you should not have multiple script tags in the first place, maybe you are fighting the wrong problem.
This example shows a drawing feature upon a button press. It allows you to select different shapes such as points, lines, polygons, etc. I want to incorporate similar functions into my project. But I don't want to select shapes, instead, I want to press the button to turn on the functions of drawing points, lines, polygons, etc.
I assume that button elements should be inserted in the HTML section.
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">None</option>
</select>
I tried as below.
</div>
<div id="type">
<button value="Point">button1</button>
<button value="Polygon">button2</button>
<button value="LineString">button3</button>
</div>
It seems to me that something needs to change in the script as well.
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new Draw({
source: source,
type: typeSelect.value,
});
map.addInteraction(draw);
}
}
Can somebody please help me?
Change the select to buttons.
<div id="type">
<button id="Point" value="Point">Point</button>
<button id="Polygon" value="Polygon">Polygon</button>
<button id="LineString" value="LineString">LineString</button>
<button id="None" value="None">None</button>
</div>
Add a click listener to each button to set the interaction appropriately
/**
* Handle button clicks.
*/
function handleBtnClick() {
var element=this;
map.removeInteraction(draw);
addInteraction(element);
};
document.getElementById("Point").addEventListener('click', handleBtnClick);
document.getElementById("Polygon").addEventListener('click', handleBtnClick);
document.getElementById("LineString").addEventListener('click', handleBtnClick);
document.getElementById("None").addEventListener('click', handleBtnClick);
working example
code snippet:
var raster = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM(),
});
var source = new ol.source.Vector({ // VectorSource({
wrapX: false
});
var vector = new ol.layer.Vector({ // VectorLayer({
source: source,
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4,
}),
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction(element) {
var value = element.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: value,
});
map.addInteraction(draw);
}
}
/**
* Handle button clicks.
*/
function handleBtnClick() {
var element = this;
map.removeInteraction(draw);
addInteraction(element);
// return false;
};
document.getElementById("Point").addEventListener('click', handleBtnClick);
document.getElementById("Polygon").addEventListener('click', handleBtnClick);
document.getElementById("LineString").addEventListener('click', handleBtnClick);
document.getElementById("None").addEventListener('click', handleBtnClick);
addInteraction(document.getElementById('None'));
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 90%;
width: 100%;
}
<title>Draw Features</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>
<label>Geometry type </label>
<div id="type">
<button id="Point" value="Point">Point</button>
<button id="Polygon" value="Polygon">Polygon</button>
<button id="LineString" value="LineString">LineString</button>
<button id="None" value="None">None</button>
</div>
Let's assume i have a previous loaded bootstrap versione , and that i have an angular directive that load some bunch of css (including another version of bootstrap) that i want to use only in a div, or in other tag at my choiche (mostly the ones in which i use the directive).
.directive('directivename' , ['$ocLazyLoad',function($ocLazyLoad){
return {
restrict : 'A',
controller : function($ocLazyLoad,$scope,$q) {
$ocLazyLoad.load('http://somepath/bootstrap/css/bootstrap.css',{cache: false}).then(function(response) {
$ocLazyLoad.load('http://somepath/bootstrap/js/bootstrap.min.js',{cache: false}).then(function(response) { });
});
}
}
}])
and apply it like this, in the way that those css and js only works for that div :
<div class="row" directivename></div>
How can i handle this in angularJS?
Proof of concept, using the JavaScript library thomaspark/scoper
var app = angular.module('MyApp', [], function() {});
app.controller('MyCtrl', function($scope) {});
app.directive('scopedcss', function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
// Fetch bootstrap css (you should cache it instead of requesting it everytime)
$http({
method: 'GET',
url: 'https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'
}).then(function successCallback(response) {
// Create a <style scoped> tag with the CSS content
var cssTag = angular.element('<style scoped>' + response.data + '</style>');
// Insert the tag inside the element
element.prepend(cssTag);
// Call the process() method defined by scoper lib
// It will parse the CSS and prefix it with a unique ID
// It will also add the same ID to the element
window.process();
});
}
}
});
h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/thomaspark/scoper/29c01744/scoper.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<div scopedcss>
<h1>Hello bootstrap!</h1>
<button type="button" class="btn btn-default">Button</button>
</div>
<h1>Regular title</h1>
<button type="button" class="btn btn-default">Button</button>
</div>
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');
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}}