I am following a google map tutorial on youtube. All is well until I try to display the stored data on the infowindow. In the code below latitude and longitude are displayed in one line concatenated. I would like to have them in separate lines. I have tried a number of html tags as well as '/n'. No joy. Unfortunately, the tags are also displayed along with the data.
Any clues would be appreciated.
function showAllColleges(allData) {
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = data.lat + data.lng ;
content.appendChild(strong);
for anybody that is having the same problem I have cobbled the solution from a number of entries in stackoverflow.
Each data.element from the database can be displayed in the infowindow. Here I have shown how to display dacicost, lat and lng
function showAllColleges(allData) {
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent =data.dacicost
content.appendChild(strong);
content.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = data.lat
content.appendChild(text);
content.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = data.lng
content.appendChild(text);
There must be a more efficient way of doing this but, at last, this works.
Related
I have two tables that are related as follows:
PMLprojects ONE - MANY Inovice_stat
I have a script to create a record in the Invoice_stat table. It goes as follows:
var myProjectList = app.datasources.PMLprojects;
var myProjectListID = myProjectList.Id;
var myDatasource = app.datasources.Invoice_stat;
var myCreateDatasource = myDatasource.modes.create;
now = new Date();
var draft = myDatasource.modes.create.item;
draft.EmailStatus = "Yes";
draft.PaidStatus = "No";
draft.DateCreate = now;
myCreateDatasource.createItem(function(newRecord) {
var key = newRecord._key;
});
myDatasource.saveChanges();
All the fields are properly populates except the relation to PMLprojects. How can I related the record from Invoice_stat to PMLprojects? I'm getting the following message:
Error log :
com.google.apps.appmaker.client.datasource.AbstractModelDataSource
WARNING: Could not select element with key RecordKey{key=private$6,
model
key=1Y8Ijd68IZyWFllY3d_C9fhAOFtVgKCtH|Gu5LnmmFmZHfEbrL5Ug1fybNaVLSEPn6}.
No records bound.
Here is some proposed edited code for you to try. However, do remember that if your PMLprojects datasource is not loaded on the client, then this will still fail. I also highly recommend that you check out the official documentation here https://developers.google.com/appmaker/models/relations#modify_associations.
var myProjectList = app.datasources.PMLprojects.item; //change this line to point to an item in the datasource
//var myProjectListID = myProjectList.Id; This line is not necessary
var myDatasource = app.datasources.Invoice_stat;
var myCreateDatasource = myDatasource.modes.create;
now = new Date();
var draft = myCreateDatasource.item; //you already declared the create mode
draft.EmailStatus = "Yes";
draft.PaidStatus = "No";
draft.DateCreate = now;
draft.YourRelationToPMLprojects = myProjectList; //here is where you create your relation, replace YourRelationToPMLprojects with your actual relation name should show up in code autocomplete
myCreateDatasource.createItem(function(newRecord) {
var key = newRecord._key;
});
myDatasource.saveChanges();
Since you are probably using both tables with the Manual Save mode... then #MarkusMalessa's approach might return you an error. If that is so, you have to make sure that you create the relation after you create the item but before you save changes. For that, take into consideration the following example:
var project = app.datasources.PMLprojects.item; //project item
var ds = app.datasources.Invoice_stat;
var createDs = ds.modes.create;
var draft = createDs.item;
draft.EmailStatus = "Yes";
draft.PaidStatus = "No";
draft.DateCreate = new Date();
createDs.createItem(function(){
ds.item.PMLproject = project; //here is where you create your relation
ds.saveChanges();
});
Just remember, this will only work as long as the PMLprojects datasource has already been loaded, otherwise you will probably get an error.
how to get latlngbound in places get by autocomplete?
for getting latitude i use the following code
var place = places.getPlace();
var latitude = place.geometry.location.lat();
However it is not working when i try following code to get latlngbounds
// northeast is undefined
var latlngbounds = place.geometry.bounds.northeast.lat();
// undefined
var latlngbounds = place.geometry.bounds;
The PlaceGeometry also includes a suggested viewport, which is a google.maps.LatLngBounds object. (Its name is viewport, not bounds, however)
Properties Type Description
location LatLng The Place's position.
viewport LatLngBounds The preferred viewport when displaying this Place on a map. This property will be null if the preferred viewport for the Place is not known.
var place = places.getPlace();
var latitude = place.geometry.location.lat();
var bounds = place.geometry.viewport;
I am using Subgurim asp.net control for Google Maps in ASP.net.
The Problem is that I need to show an ARROWED POLYLINE betwwen my two points on map.
Following is my code , but unfortunately I am not able to apply anything for that:
GLatLng from = new GLatLng(FromLan, FromLon);
GLatLng To = new GLatLng(ToLan, ToLon);
GLatLngBounds llbound = new GLatLngBounds(from, To);
GMap2.GZoom = GMap2.getBoundsZoomLevel(llbound);
GMap2.setCenter(llbound.getCenter());
GLatLng inside = llbound.getCenter();
bool isInside = llbound.contains(inside);
GPolyline objpolyline = new GPolyline();
objpolyline.points.Add(from);
objpolyline.points.Add(To);
objpolyline.color = "red";
objpolyline.colorNet = System.Drawing.Color.Red;
objpolyline.clickable = false;
objpolyline.PolylineID = "Route";
objpolyline.geodesic = true;
//Javascript Code
//pts1.push (new GLatLng(lat111, lng222));
//var poly1 = new BDCCArrowedPolyline(pts1,"#FF0000",4,0.3,
// null,30,7,"#0000FF",2,0.5);
//map.addOverlay(poly1);
GMap2.addPolyline(objpolyline);
//GMap2.addPolyline(objpolyline);
Regards ,
Vishal
It looks to me like you are using the Google Maps API v2.
Two issues with that:
it is deprecated and could stop working in less than a year.
the Google Maps API v3 now supports "arrowed polylines" natively.
I am trying to save a component as a JPG file and I can't seem to get the BitmapData.draw() to give me the pixels I'm expecting and instead I am seeing a plain white rectangle when I open the resulting JPG file. I am first creating an object which contains an image and a caption (the MultigraphCanvas below) and when I display the object as a pop up it looks perfect -- however when I try to draw it as a bitmap and then encode and save it as a JPG I don't end up with the same image I can display on the screen. Here's the code:
private function saveAsFile(title:String):void
{
// make a canvas containing the multigraph and title
var multigraphCanvas:MultigraphCanvas = new MultigraphCanvas();
multigraphCanvas.initialize();
multigraphCanvas.multigraphGroup = multigraphGroup;
multigraphCanvas.titleText.text = title;
this.addElement(multigraphCanvas);
var matrix:Matrix = new Matrix()
matrix.tx = 0;
matrix.ty = 0;
var multigraphCanvasBitmapData:BitmapData = new BitmapData(multigraphCanvas.width, multigraphCanvas.height, true, 0xffffffff);
multigraphCanvasBitmapData.draw(multigraphCanvas, matrix);
var multigraphCanvasImage:Image = new Image();
multigraphCanvasImage.load(new Bitmap(multigraphCanvasBitmapData));
multigraphCanvasImage.content.width = multigraphCanvas.width;
multigraphCanvasImage.content.height = multigraphCanvas.height;
var multigraphCanvasImageBitmapData:BitmapData = new BitmapData(multigraphCanvas.width, multigraphCanvas.height, true, 0xffffffff);
multigraphCanvasImageBitmapData.draw(multigraphCanvasImage);
// DEBUGGING
PopUpManager.addPopUp(multigraphCanvas, this);
// DEBUGGING
var debugImage:Image = new Image();
debugImage.source = multigraphCanvasImageBitmapData;
var debugTitleWindow:TitleWindow = new TitleWindow();
debugTitleWindow.addElement(debugImage);
PopUpManager.addPopUp(debugTitleWindow, this);
// encode the canvas bitmap into a JPG byte array
var jpgEncoder:JPEGEncoder = new JPEGEncoder(85);
var jpgByteArray:ByteArray = jpgEncoder.encode(multigraphCanvasImageBitmapData);
// save the JPG byte array as a file
var fileReference:FileReference = new FileReference();
fileReference.save(jpgByteArray, title + ".jpg");
}
Can I expect for the BitmapData.draw() method to draw each component of the display object it's passed, or does it just render the topmost element and none of the children (this is what it looks like to me)?
I believe that components need to be in the display tree for BitmapData.draw() to be able to render them.
I have been up for the last 24 hours so if the function is broke don't blame me :)
This is a stripped down version of a function I have that takes a snapshot of the container(c1) and sends it off to the server. I was base64 encoding as that was what the Java guy wanted for the back-end. You will have to massage the setting for your needs. I cut out a lot of the stuff I had in this function
private function getSnapShot( e:MouseEvent ):String{
var matrix:Matrix = new Matrix()
matrix.tx = 0;
matrix.ty = 0;
var finished1:BitmapData = new BitmapData(this.c1.width,this.c1.height,true,0xffffffff);
finished1.draw( this.c1, matrix );
var myImage:Image = new Image();
myImage.load( new Bitmap(finished1) );
myImage.content.width = this.c1.width;
myImage.content.height = this.c1.height;
var finished:BitmapData = new BitmapData(this.c1.width,this.c1.height,true,0xffffffff);
finished.draw(myImage);
myImage = null;
var encoder:JPEGEncoder = new JPEGEncoder();
var data:ByteArray = encoder.encode(finished);
var b64:Base64Encoder = new Base64Encoder()
b64.encodeBytes( data )
return b64.toString();
}
you probably only need to return "data" which is the JPG
Check the registration point of the source display object container.
Let's imagine the following scenario:
The display object container contains a visual like a rectangle and this DisplayObjectContainer has the registration at the bottom left so no content is available at x,y = 1,1.
BitmapData.draw would copy the content starting from 0,0(if you don't specify otherwise via a matrix translation) so you will get an empty white area(or the default fill color of the BitmapData)
I am trying to take images I am placing in a flex canvas component to a bitmap. I was able to get to the point where I'm not getting an error but then no image shows up and the image I save out as a jpg is blank. I imagine I'm not setting the bitmap data correctly but can't figure out what I am doing wrong.
Here is the code where I am converting it to a bitmap:
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(_renderPop);
var imageByteArray:ByteArray = imageSnap.data as ByteArray;
var bLoader:Loader = new Loader();
bLoader.loadBytes(imageByteArray);
var bmd:BitmapData = new BitmapData(500,500);
bmd.draw(bLoader);
var imgTest:Image = new Image();
imgTest.source = bmd;
_renderPop.renderCanvas.addChild(imgTest);
var fileRef:FileReference = new FileReference();
fileRef.save(bLoader, 'testImage.jpg');
_renderPop.renderCanvas is where I am placing the images. Anybody see anything wrong?
Your "loader" code is wrong. Just after capturing image you may at once save data with FileReference:
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(_renderPop);
var fileRef:FileReference = new FileReference();
fileRef.save(imageSnap.data, 'testImage.png');
That imageSnap contains not BitmapData but png image bytes. In order to show image you need to capture BitmapData but not image and create Bitmap from bitmap data:
var bmd:BitmapData = ImageSnapshot.captureBitmapData(_renderPop);
var imgTest:Image = new Image();
imgTest.source = new Bitmap(bmd);
_renderPop.renderCanvas.addChild(imgTest);
In result locally testImage.png is created on file system and it is shown in canvas. If you need jpg you should specify:
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(_renderPop, 0, new JPEGEncoder());
In your code:
var bLoader:Loader = new Loader();
bLoader.loadBytes(imageByteArray);
...you're assuming that the bytes are being loaded immediately; try putting an event listener on the loader as follows:
bLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
private function completeHandler(event:Event):void
{
// ... the rest of your code goes here
}
The loadBytes functions works like the load function in that they are both asynchronous processes so you'll need the event listener. It is a little counter-intuitive, and i've made the same mistake myself several times.
If that doesn't work, maybe leave out the contentLoaderInfo property, but the above should work...
Let me know if you come right :)