Custom marker with Angular Google Maps - angularjs

I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible

The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer

Related

Angular gridster add custom content

I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!

Trying to serve responsive custom code through DFP

We're trying to serve simple markup - a thumbnail, image, and some text - through DFP. This markup needs to be fluid - it's one member of a responsive grid on our website.
Assuming we can't avoid the iframe, is there a way we can get the iframe to be set at 100% width? That would probably do it.
The issues we're having is that we're forced to define an ad unit size, and that seems to dictate the dimensions of the iframe.
You can't have the control over the iframe, the best solution would be to extract the content of the iframe and append it to the parent using javascript. This way you will be able to use your websites responsive grid and class.
Sorry Mathieu but you are wrong. DFP uses friendly iFrames and you can change the width or height if you use your own creative template. We have many custom templates defined in DFP for our masthead variations that can expand, collapse, destroy ad unit's iframe.

Qt5/QML Displaying a custom route on a map

What would be the best way to draw a custom route on a QML Map with a set of given coordinates?
Basically, all I need is that the map highlights the path along the road and does not go straight to each point.
No animations needed either.
Edit:
I need it to be in a desktop application.
One option is to display a HTML website using Leaflet or OpenLayers. Both support displaying a GPX track. The track can be obtained by using one of the various online routers for OSM.

Facebook Canvas App using Angular JS

I want to create an application on Facebook and I will host it on our server to be used from Facebook Canvas.
I was thinking of creating the web app with Angular.JS but one of my friends told me that my web app must be drawn inside a <canvas> html tag or I will not have the full functionality of Facebook integration.
So this is my question, do I have to draw my elements inside a <canvas>? or I can use other html tags with some basic animation?
No, you do NOT need to use HTML5 Canvas. There are "Canvas Apps", but there is no relation to HTML5 Canvas. Please check out the docs for more information: https://developers.facebook.com/docs
There are only a few things that are not possible without a Canvas App. For example, you can only use Notifications with a Canvas App, or you can only use invitable_friends in a gane with Canvas implementation. DonĀ“t worry about those before reading the docs.

google maps silverlight

I am working on silverlight 4 application and need to implement google maps in the same app.
Now to implement the google maps, i was planning to use WebBrowser control but when i used it i found out that it will run only in out of browser mode.
So, i decided to use another approach since i want to implement google maps inside of my application. I then used http://csharperimage.jeremylikness.com/2010/09/hosting-html-in-silverlight-not-out-of.html alternative which was having to use iframe to show web page there. It was seems to be good alternative in start. But Here comes another twist.
On top of my app, i have one top MENU for navigation, its a classic web menu, user hover over the menu item and its sub item will expand vertically.
Now just underneath the MENU i have above HTML control to display my map. Now since the HTML browser control has higher z-Index so my vertical sub menu is goes underneath the google map and hence it not visible.
And giving silverlight app higher z-Index the iframe for HTML does not show up as it goes behind the app.
So how can i get my HTML MAP and MENU both to work? If you guys have any other alternative to implement google maps then please let me know
Thanks
I would recommend using the Silverlight Bing Maps control, with the tile-source set to Google Maps. This will give you the maps you desire, via a proper Silverlight control. You can find out about how to provide a custom tile source from Google here:
http://www.scottlogic.co.uk/blog/colin/2011/02/google-sky-on-windows-phone-7/

Resources