search

tombatossals / angular-openlayers-directive

AngularJS directive to embed an interact with maps managed by the OpenLayers library
http://tombatossals.github.io/angular-openlayers-directive/
MIT License
283 stars 184 forks source link

Add SVG material design icons support #63

Open gsans opened 9 years ago

gsans commented 9 years ago

Nice work! Comming from reddit. I recently did a small experiment with AngularJS and OpenLayers 3. See here: https://medium.com/angularjs-meetup-south-london/angular-integration-with-openlayers-3-5a6e8d29e635. Includes github/slides/demo.

Few featues that you may enjoy:

Maybe the most beneficial is the SVG icons as you can style them (shape, color) and historically it was a pain as you had to create the markers as images.

tombatossals commented 9 years ago

That's a really nice piece of code! I'll take a look at it, there are very interesting ideas I could add to this project, if you don't mind.

gsans commented 9 years ago

Thanks! Feel free to browse and use what you like. I'm very happy to share it. There's also a post to explain what I'm doing if it's not clear from the code. =) On 2 Mar 2015 07:14, "David Rubert" notifications@github.com wrote:

That's a really nice piece of code! I'll take a look at it, there are very interesting ideas I could add to this project, if you don't mind.

— Reply to this email directly or view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/63#issuecomment-76667519 .

nbiton commented 9 years ago

Using SVG assets for achieving crispy looking markers on mobile, is probably not a great idea. I tried doing this, and if you have more than a few markers on your map frame at a given point, there's a very significant performance hit and panning movement renders at 3-5 fps. This is caused by mobile browsers inability to render SVG to canvas efficiently.

I had use raster based markers instead, and the frame rate for the same amount of markers was over 30 fps.

gsans commented 9 years ago

Good point. Nonetheless dropping a feature for everybody because there's a corner scenario that is not very performant (mobile and many markers) is a little extreme.

SVG icons are generally available on mobile and a great way to avoid having to manually create and style different image based markers, eg: for each possible color and size. Besides SVG also allow for extra CSS styling and animations.

In general for first page load performance, maybe adding Angular plus your library to the mix is not the way to go considering you can achieve all features with plain JavaScript and have Google Closure, with two way data binding already there. On 3 Mar 2015 06:05, "Naor Biton" notifications@github.com wrote:

Using SVG assets for achieving crispy looking assets on mobile, is not a great idea. I tried doing this, and if you have more than a few markers on your map frame at a given point, there's a very significant performance hit and panning movement renders at 3-5 fps. This is caused by mobile browsers inability to render SVG to canvas efficiently.

I had use raster based markers instead, and the frame rate for the same amount of markers was over 30 fps.

— Reply to this email directly or view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/63#issuecomment-76892316 .

nbiton commented 9 years ago

SVG assets used for markers are rendered to the canvas, therefore, they will be static and couldn't be manipulated with CSS or animations.

I think it might be possible to achieve the same crispy look of SVG on the markers, if the SVG asset is rendered once to a canvas, then .toDataUrl is used to extract the SVG as image and that is set as data URI to the src attribute of the ol.Style.Icon instance, but I haven't attempted that yet.

Initial page load didn't appear to be affected, btw. The performance hit was noticeable while panning and zooming the map.

gsans commented 9 years ago

That's not the implementation I'm using but its good to know about other approaches.

I was talking about time for first render as you have to download Angular + library + OpenLayers. That's a big chunk for mobile. On 3 Mar 2015 09:04, "Naor Biton" notifications@github.com wrote:

SVG assets used for markers are rendered to the canvas, therefore, they will be static and couldn't be manipulated with CSS or animations.

I think it might be possible to achieve the same crispy look of SVG on the markers, if the SVG asset is rendered once to a canvas, then .toDataUrl is used to extract the SVG as image and that is set as data URI to the src attribute of the ol.Style.Icon instance, but I haven't attempted that yet.

Initial page load didn't appear to be affected, btw. The performance hit was noticeable while panning and zooming the map.

— Reply to this email directly or view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/63#issuecomment-76909453 .

nbiton commented 9 years ago

Yeah, I see, but I suggested that it might be a way to achieve the a result which looks the same while working around the performance issue I had.

The file size didn't matter that much for my use case, as I'm using this component in a hybrid app.

gsans commented 9 years ago

I see. I thought this was a general discussion. Yeah that is something I've used before with good results. It also improves zoom in/out in my experience. On 3 Mar 2015 09:15, "Naor Biton" notifications@github.com wrote:

Yeah, I see, but I suggested that it might be a way to achieve the a result which looks the same while working around the performance issue I had.

The file size didn't matter that much for my use case, as I'm using this component in a hybrid app.

— Reply to this email directly or view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/63#issuecomment-76911116 .