Using SebM google maps module in child component shows blank map - google-maps

EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.
What i've tried:
I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.
I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.
Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.
Kind regards Chris

Did you tried putting this code in your component that is responsible for viewing the map?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
#ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?
Normally when there are no errors, a triggerResize() will fix your issue.

Related

How to place components over components in Reactjs

I have a component called </App>, and another component called </Interface>, both are already imported, how can I put Interface on top of App in the centre and export (export default function foo() ) it?
I am new to both React and HTML, so any helps are appreciated!
let me provide some guidance for you here:
1.) It is great that you are learning React, however since you are brand new to web development I strongly urge you to first learn to make a website with vanilla html, vanilla javascript, and css. It will provide you the fundamentals you need to jump into React.
2.) When you are asking about putting Interface on top of App, are you asking about how to make it so that Interface is displayed above App on the page that is rendered, or are you asking how to move it's position in the code? Also, I'm not sure why you have your app component as the source for the image. You should import images from your folder which contains your assets and use that instead.
You can simply import the interface component and use it in the app component. Please follow the provided example.
export default App= (props) => {
return
(
<Interface/>
)
}
Above mentioned would add Interface component to the App Component, similarly you can follow the same pattern to open any other component in the Interface component respectively.

React-Three-Fiber (R3F): GLTF loader loading issue. Why can't I see my model?

I'm trying to load a gltf model in react-three-fiber (R3F) and I am having a nightmare. I have tried looking for the answer and there have been people with a similar problem but I was not able to solve my issue.
I keep getting this in the console:
at JSON.parse (<anonymous>)
at GLTFLoader.parse (GLTFLoader.js:213)
at Object.onLoad (GLTFLoader.js:145)
at XMLHttpRequest.<anonymous> (three.module.js:35829)
As far as I am aware, there is nothing wrong with my code. I've tried writing it loading in the model in in many different ways. The creator of react-three-fiber loaded in a model to his codesandbox a few days ago like this: https://codesandbox.io/s/r3f-gltf-useloader-8nb5i - so I feel it can't be an issue with R3F. I noticed that he was using a glb rather than a gltf file so I went and found a glb model to check if that would make a difference. I realised I also have to have my model in the public folder, which I have also done. Unfortunately, this did not make a difference and I still continue to get the issue.
I have tried like this:
import React, { Suspense } from "react";
import { Canvas, useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as THREE from "three";
import Box from "./Components/Sphere.Component";
import Plane from "./Components/Plane.Component";
import Controls from "./Components/Controls.Component";
import "./App.css";
const Chair = () => {
const { nodes } = useLoader(GLTFLoader, "../public/mindbreaker.glb");
return (
<mesh geometry={nodes.Cube.geometry}>
<meshStandardMaterial attach="material" color="lightblue" />
</mesh>
);
};
function App() {
return (
<Canvas
camera={{ position: [0, 0, 5] }}
onCreated={({ gl }) => {
gl.shadowMap.enabled = true;
gl.shadowMap.type = THREE.PCFSoftShadowMap;
}}
>
<fog attach="fog" args={["pink", 5, 15]} />
<Plane />
<Controls />
<Box />
<Suspense fallback={null}>
<Chair />
</Suspense>
</Canvas>
);
}
export default App;
Here is a person that had a similar issue: https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10 but I still don't really understand how to solve this problem.
Any help would be greatly appreciated, I was so looking forward to having a play with R3F but I seem to have fallen at the first hurdle. Someone please save me from this headache! haha.
Thank you!
Lots of ifs here but If you have saved the 'mindbreaker.glb' in your 'public' directory and you are using create-react-app then the path to the file should be 'useLoader(GLTFLoader, "mindbreaker.glb")
if it's codesandbox disable loop protection in the settings. csb cant load bigger gltf's and the error is impossible to track down.
otherwise it can be everything, if the gltf is draco compressed you need draco loader, it could be a wrong path, missing lights, model too big so it's not in the cams frustrum, etc. all this stuff is really awful in the beginning, but you'll get used to it. when i started threejs it nearly drove me nuts.
ps.
../public/ looks suspicious. it's either /... or /public/...
I had the same problem so I moved to a simple HTTP server so I could progress. In my case the models will ultimately be served so this isn't too much of an inconvenience.
http-server . -p 8000 --cors
and within react provide the url to useLoader.
You can find more info at
https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally
In case anyone else finds this thread when looking for the answer to this issue, i solved some loading problems by importing my glb file first. I'm not too well versed in react yet, but I think it is because react changes the relative path to the file, and so importing it as shown below (for example) might work.
import modelPath from "../public/mindbreaker.glb";
//----------//
// Use your loader with the imported model variable, instead of a hardcoded path
useLoader(GLTFLoader, modelPath)

Embedding Angular 1.x app inside an angular 2.0 app

The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine

What I'm having wrong with ES6 modules and SystemJS?

I was playing with Angular2 beta tutorials, and discovered how magnificient are ES6 new way of importing modules & systemjs.
However, there's a thing I can't make it to work.
Everything works fine, UNTIL you have second level page, system.js is configured only for 1st level page
here is plnkr with the issue http://plnkr.co/edit/afsJY6tzrSeYMOtzUnXQ?p=preview
once run, as you can see, homepage works but the second level page is not working.
Must be something with systemjs configuration, I have my explanations and I fully understand why it does not work, and I have found a workaround, but I don't like it, can you please point me to the correct way?
this part:
System.import('app/boot').then(null, console.error.bind(console));
could be easily fixed by using
System.import('/app/boot.js').then(null, console.error.bind(console));
but then there in the boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
I don't know how to fix the './app.component' because if I do '../app/app.component.js' then the typescript compiler blames, so, how's the correct strategy?
I'm not sure what the recommended way would be, as I'm still a beginner as well, but one way is to add maps to the config:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
app: '../app' // <--
}
});
You could of course replace the relative ../app with something absolute like /app when you are running it locally.

Showing Google Maps in OpenERP

I wanted to include Google maps in a module of OpenERP. As far as I know until I use iframe tag of HTML I wont be able to show Google maps in OpenERP but in OpenERP I have only two kinds of file one is .xml and other is .py. Now how am I supposed to add iframe with only these two file in hand. Any ideas ?
Thank you
There is module called google_map in openerp addons. Install that module to get the google map inside openerp and if needed make the necessary changes by creating your own custom module
In the 2012 OpenERP Days one of the presentations demonstrated how to craete a custom Webclient widget. The example used was a geo widget that could display and address as a Google Map indide a froam view. The code is available here.
You can try out Camptocamp's geoengine addon. This addon is meant to display data from the OpenERP database in a custom view using a map. It does not use an iframe to embed a googlemap, afaik.
https://launchpad.net/geospatial-addons
This is an example for openning the map in a new link where the html file which contains the html and java script code for the google map located in
static/src/googlemaps/get_place_from_coords.html
and the following method will be called when clicking the open google map button in the openerp interface:
def button_open_google(self, cr, uid, ids, context=None):
for place in self.browse(cr, uid, ids):
url="/tms/static/src/googlemaps/get_place_from_coords.html?" + str(place.latitude) + ','+ str(place.longitude)
return { 'type': 'ir.actions.act_url', 'url': url, 'nodestroy': True, 'target': 'new' }