5 ms·

Introducing Mapbox GL

230 points by incanus77 12y ago

bluthru 12y ago
>Maps render at a super high framerate You might want to use a nice HTML5 video instead of a .gif, then. It didn't make for a good first impression.
- estebank 12y ago
  Or an actual map, scripted to move.
  - mourner 12y ago
    Sure. Oh but wait, there is an actual map there!
- pornel 12y ago
  I can halve the size of the GIF with a bit of lossy compression (https://pornel.net/lossygif https://pornel.net/lossygif http://compressor.io/compress http://compressor.io/compress), but a proper video codec or actual WebGL would be much better indeed.
- erichurkman 12y ago
  Running the 5.2 MB .gif through Gfycat reduces the size to a 566kb .webm file, for example [1]. [1] http://www.gfycat.com/PartialBlissfulEarthworm# http://www.gfycat.com/PartialBlissfulEarthworm#
green7ea 12y ago
This is really cool. It seems that instead of using mipmaps to generate a map, they are using a combination of curves and 2D shapes. This is very smart since the data is not only more compact but can also be visualised in a very fluid manner. The bottleneck is now the GPU instead of the data connection. Give me the ability to download a city's map on Android and I'm dropping google maps like a brick.
- greggman 12y ago
  There's plenty of apps on Android that use downloaded maps. http://wiki.openstreetmap.org/wiki/Android http://wiki.openstreetmap.org/wiki/Android Unfortunately AFAIK most of them are missing many of the things that makes Google maps useful. Real time traffic data, real time road closure data, updated public transportation schedules and closures, search by something other than address, ... Also I believe online vector based maps teams found that vector map data was actually larger than tiled map data. I thought as you did lines = smaller but lines + colors + line weights + building outlines + elevation contours + street names + road direction info etc adds up were as jpeg tiles can be pretty lossy.
- danespringmeyer 12y ago
  Yes, the data is fairly compact. Data for the entire world enough for rendering to zoom level 18 generally comes in under 35GB (give or take 10 GB depending on what features you need). If you need to got to zoom levels approaching ~18 then there is no way to do this with image tiles. Vector tiles are the more efficient way. More details on the encoding at https://github.com/mapbox/vector-tile-spec https://github.com/mapbox/vector-tile-spec and the encoder at https://github.com/mapbox/mapnik-vector-tile https://github.com/mapbox/mapnik-vector-tile
- jonas21 12y ago
  Google Maps also uses GPU-rendered vector geometry for their maps on Android (since 2010) and iPhone: http://www.engadget.com/2010/12/16/google-maps-5-0-hits-android-includes-new-3d-map-view-and-offli/ http://www.engadget.com/2010/12/16/google-maps-5-0-hits-andr...
  - incanus77 12y ago
    Yes. Mapbox is 1) completely open source and 2) completely flexible design-wise.
ajtaylor 12y ago
I played around with the demo map and the scrolling was indeed super quick, along with zoom level changes. If they could do the same thing with WebGL so that we'd have vector maps in the browser (like Google maps) that would be awesome. The competition would be good for everyone.
- tmcw 12y ago
  If you're talking about the demo map in the blog post, you just played with the WebGL version :)
  - ljoshua 12y ago
    More details here would be great! Seems like a souped-up version of Leaflet. Man I love the stuff that MapBox puts out. High quality.
  - SupremumLimit 12y ago
    I'm confused, is there a WebGL version of the framework as well? It would be really great to have that!
  - TeeWEE 12y ago
    Why dont publish the webgl version as an openstreetmap client? would be awesome
  - ajtaylor 12y ago
    That's the one I was referring to. It was really, really good! :)
hornetblack 12y ago
Hard coded compiler version? Could not find compiler set in environment variable CC: gcc-4.8. I'm running gcc-4.9. I got it working by doing: ln -s /usr/bin/gcc ~/bin/gcc-4.8 ln -s /usr/bin/g++ ~/bin/g++-4.8 I'm not saying this is good practice, but it works. Also need to make sure python means python2.
- danespringmeyer 12y ago
  Thanks for noting these issues. I've made a note about Python 2.x in the readme (https://github.com/mapbox/mapbox-gl-native/commit/ae7e3de61c209d32ec52372a21726941e7fe652a https://github.com/mapbox/mapbox-gl-native/commit/ae7e3de61c...). As far as the compiler, g++-4.9 is fine to use. If you hit an error with it could you share the details in an issue? https://github.com/mapbox/mapbox-gl-native/issues https://github.com/mapbox/mapbox-gl-native/issues
  - green7ea 12y ago
    I had to change: #!/usr/bin/env python to: #!/usr/bin/env python2 in the python scripts to get it working under archlinux. If this works on the other platforms, that might be a good change.
- bri3d 12y ago
  From looking at the build code, you should be able to just set CC=gcc-4.9 and CXX=g++-4.9 in your environment. This is a pretty standard practice and the reason that it's set to "gcc-4.8" rather than "gcc" by default is because it requires real C++11 support in order to compile.
cheeaun 12y ago
So this is only for iOS? Is there one for the web?
- diroussel 12y ago
  The demo is a version for the web.
i_am_ralpht 12y ago
I've wanted to write a GLES 2 map renderer for ages -- ever since I saw that the Apple Maps app on iOS uses MSAA for antialiasing (yuck!). It's funny to see all the usual 2D suspects in the source (clipper, GLU tessellator). They used a distance-based edge shader for antialiasing, so it should look much better than MSAA. I'm not sure why there's a bias factor of 2 in the "raster" fragment shader -- looks like it might have been added by accident. It's interesting that they use both the stencil and depth buffers for clipping -- I hope they do a write up on some of the techniques they developed!
- kkaefer 12y ago
  > I'm not sure why there's a bias factor of 2 in the "raster" fragment shader -- looks like it might have been added by accident. Yes, that was an accident. Thanks for noticing! We definitely have a lot of information to share about the process. Regarding clipping, we're not sure yet whether what we have right now is the best thing; there will certainly be improvements in that area.
gelatocar 12y ago
Is anyone else seeing duplicated and mirrored labels in the demo? http://i.imgur.com/998pDUR.png http://i.imgur.com/998pDUR.png
- kkaefer 12y ago
  This looks indeed odd. Can you please share more information about your computer, OS and browser?
  - TeeWEE 12y ago
    I have the same issue, but it looks even worse: http://i.imgur.com/WJQcZp8.png http://i.imgur.com/WJQcZp8.png My user agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 I'm running on 15'' macbook pro, OS X 10.8.5 on a 2.2GHZ i7, with 8GB of memory.
bgun 12y ago
Didn't believe the WebGL demo until I rotated (ctrl-drag). Hope it feels as good on a mobile browser.
faximan 12y ago
Well, damn. I just spent five months writing a GLES iOS renderer for mapnik-vector-tiles as a master thesis project. I said, "as far as we know, nothing like this has ever been done before". Good thing the presentation was last week I guess...
- Doctor_Fegg 12y ago
  Open-source it anyway! The more the merrier...
- joedoe101 12y ago
  Will you open source it?
  - faximan 12y ago
    Unfortunately, not at this moment. It might be used in a commercial product.
    - rmc 12y ago
      You can still use open source commercially. Make it GPLv3 or something, if you wanna tie the hands of anyone who uses it
- NelsonMinar 12y ago
  MapBox is hiring. https://www.mapbox.com/jobs/ https://www.mapbox.com/jobs/
pmoods 12y ago
It was only a matter of time before the mapping feature evolved yet again, glad to get a quick glimpse of this awesome technology.
NathanKP 12y ago
The vector map demo on the page has a serious issue with street names not showing up until you zoom way in, so far in that you can't see the context of the street anymore. I assume this is for performance purposes, but it makes the map feel much less usable than Apple Maps in my opinion. For comparison: Apple Maps: http://i.imgur.com/jqPHej2.png http://i.imgur.com/jqPHej2.png vs Mapbox Maps: http://i.imgur.com/rVH775b.png http://i.imgur.com/rVH775b.png
- softwarehippie 12y ago
  You do realize that this 100% configurable by stylesheets? The entire point is, that their maps are stylable by the user (i.e. the app developer).
  - NathanKP 12y ago
    Of course. I've used Mapbox before and messed around with customizing the stylesheets. But the reality is that creating your own stylesheets is a level of effort and attention to detail that most projects/startups can't afford to take on, at least not at first. The default stylesheets should look good and work well out of the box. Then if you have the time and manpower to customize them further great.
    - incanus77 12y ago
      One of the design goals with GL was to support cascading styles, so you can start with the predefined world map and just provide deltas of the things you want to change. For example: "Hide the buildings, set the text font to X, swap the stacking order of layers A and B, and override the default park color to blue".
  - agildehaus 12y ago
    The problem being that I might not know this particular thing is configurable. They need better defaults.
zackmorris 12y ago
Does anyone know if they are planning perspective (affine) transformation? Specifically, relief maps drawn at the correct (or exaggerated) elevation, with the labels still drawn upright?
- incanus77 12y ago
  Yes, eventually.
olegbl 12y ago
Sooooo... where do I get the WebGL (demo on the page) version? I want that.

230 points by incanus77 12y ago

>Maps render at a super high framerate You might want to use a nice HTML5 video instead of a .gif, then. It didn't make for a good first impression.

estebank 12y ago
Or an actual map, scripted to move.
- mourner 12y ago
  Sure. Oh but wait, there is an actual map there!
pornel 12y ago
I can halve the size of the GIF with a bit of lossy compression (https://pornel.net/lossygif https://pornel.net/lossygif http://compressor.io/compress http://compressor.io/compress), but a proper video codec or actual WebGL would be much better indeed.
erichurkman 12y ago
Running the 5.2 MB .gif through Gfycat reduces the size to a 566kb .webm file, for example [1]. [1] http://www.gfycat.com/PartialBlissfulEarthworm# http://www.gfycat.com/PartialBlissfulEarthworm#

green7ea 12y ago

This is really cool. It seems that instead of using mipmaps to generate a map, they are using a combination of curves and 2D shapes. This is very smart since the data is not only more compact but can also be visualised in a very fluid manner. The bottleneck is now the GPU instead of the data connection. Give me the ability to download a city's map on Android and I'm dropping google maps like a brick.

greggman 12y ago
There's plenty of apps on Android that use downloaded maps. http://wiki.openstreetmap.org/wiki/Android http://wiki.openstreetmap.org/wiki/Android Unfortunately AFAIK most of them are missing many of the things that makes Google maps useful. Real time traffic data, real time road closure data, updated public transportation schedules and closures, search by something other than address, ... Also I believe online vector based maps teams found that vector map data was actually larger than tiled map data. I thought as you did lines = smaller but lines + colors + line weights + building outlines + elevation contours + street names + road direction info etc adds up were as jpeg tiles can be pretty lossy.
danespringmeyer 12y ago
Yes, the data is fairly compact. Data for the entire world enough for rendering to zoom level 18 generally comes in under 35GB (give or take 10 GB depending on what features you need). If you need to got to zoom levels approaching ~18 then there is no way to do this with image tiles. Vector tiles are the more efficient way. More details on the encoding at https://github.com/mapbox/vector-tile-spec https://github.com/mapbox/vector-tile-spec and the encoder at https://github.com/mapbox/mapnik-vector-tile https://github.com/mapbox/mapnik-vector-tile
jonas21 12y ago
Google Maps also uses GPU-rendered vector geometry for their maps on Android (since 2010) and iPhone: http://www.engadget.com/2010/12/16/google-maps-5-0-hits-android-includes-new-3d-map-view-and-offli/ http://www.engadget.com/2010/12/16/google-maps-5-0-hits-andr...
- incanus77 12y ago
  Yes. Mapbox is 1) completely open source and 2) completely flexible design-wise.

ajtaylor 12y ago

I played around with the demo map and the scrolling was indeed super quick, along with zoom level changes. If they could do the same thing with WebGL so that we'd have vector maps in the browser (like Google maps) that would be awesome. The competition would be good for everyone.

tmcw 12y ago
If you're talking about the demo map in the blog post, you just played with the WebGL version :)
- ljoshua 12y ago
  More details here would be great! Seems like a souped-up version of Leaflet. Man I love the stuff that MapBox puts out. High quality.
- SupremumLimit 12y ago
  I'm confused, is there a WebGL version of the framework as well? It would be really great to have that!
- TeeWEE 12y ago
  Why dont publish the webgl version as an openstreetmap client? would be awesome
- ajtaylor 12y ago
  That's the one I was referring to. It was really, really good! :)

hornetblack 12y ago

Hard coded compiler version? Could not find compiler set in environment variable CC: gcc-4.8. I'm running gcc-4.9. I got it working by doing: ln -s /usr/bin/gcc ~/bin/gcc-4.8 ln -s /usr/bin/g++ ~/bin/g++-4.8 I'm not saying this is good practice, but it works. Also need to make sure python means python2.

danespringmeyer 12y ago
Thanks for noting these issues. I've made a note about Python 2.x in the readme (https://github.com/mapbox/mapbox-gl-native/commit/ae7e3de61c209d32ec52372a21726941e7fe652a https://github.com/mapbox/mapbox-gl-native/commit/ae7e3de61c...). As far as the compiler, g++-4.9 is fine to use. If you hit an error with it could you share the details in an issue? https://github.com/mapbox/mapbox-gl-native/issues https://github.com/mapbox/mapbox-gl-native/issues
- green7ea 12y ago
  I had to change: #!/usr/bin/env python to: #!/usr/bin/env python2 in the python scripts to get it working under archlinux. If this works on the other platforms, that might be a good change.
bri3d 12y ago
From looking at the build code, you should be able to just set CC=gcc-4.9 and CXX=g++-4.9 in your environment. This is a pretty standard practice and the reason that it's set to "gcc-4.8" rather than "gcc" by default is because it requires real C++11 support in order to compile.

cheeaun 12y ago

So this is only for iOS? Is there one for the web?

diroussel 12y ago
The demo is a version for the web.

i_am_ralpht 12y ago

I've wanted to write a GLES 2 map renderer for ages -- ever since I saw that the Apple Maps app on iOS uses MSAA for antialiasing (yuck!). It's funny to see all the usual 2D suspects in the source (clipper, GLU tessellator). They used a distance-based edge shader for antialiasing, so it should look much better than MSAA. I'm not sure why there's a bias factor of 2 in the "raster" fragment shader -- looks like it might have been added by accident. It's interesting that they use both the stencil and depth buffers for clipping -- I hope they do a write up on some of the techniques they developed!

kkaefer 12y ago
> I'm not sure why there's a bias factor of 2 in the "raster" fragment shader -- looks like it might have been added by accident. Yes, that was an accident. Thanks for noticing! We definitely have a lot of information to share about the process. Regarding clipping, we're not sure yet whether what we have right now is the best thing; there will certainly be improvements in that area.

gelatocar 12y ago

Is anyone else seeing duplicated and mirrored labels in the demo? http://i.imgur.com/998pDUR.png http://i.imgur.com/998pDUR.png

kkaefer 12y ago
This looks indeed odd. Can you please share more information about your computer, OS and browser?
- TeeWEE 12y ago
  I have the same issue, but it looks even worse: http://i.imgur.com/WJQcZp8.png http://i.imgur.com/WJQcZp8.png My user agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36 I'm running on 15'' macbook pro, OS X 10.8.5 on a 2.2GHZ i7, with 8GB of memory.

bgun 12y ago

Didn't believe the WebGL demo until I rotated (ctrl-drag). Hope it feels as good on a mobile browser.

faximan 12y ago

Well, damn. I just spent five months writing a GLES iOS renderer for mapnik-vector-tiles as a master thesis project. I said, "as far as we know, nothing like this has ever been done before". Good thing the presentation was last week I guess...

Doctor_Fegg 12y ago
Open-source it anyway! The more the merrier...
joedoe101 12y ago
Will you open source it?
- faximan 12y ago
  Unfortunately, not at this moment. It might be used in a commercial product.
  - rmc 12y ago
    You can still use open source commercially. Make it GPLv3 or something, if you wanna tie the hands of anyone who uses it
NelsonMinar 12y ago
MapBox is hiring. https://www.mapbox.com/jobs/ https://www.mapbox.com/jobs/

pmoods 12y ago

It was only a matter of time before the mapping feature evolved yet again, glad to get a quick glimpse of this awesome technology.

NathanKP 12y ago

The vector map demo on the page has a serious issue with street names not showing up until you zoom way in, so far in that you can't see the context of the street anymore. I assume this is for performance purposes, but it makes the map feel much less usable than Apple Maps in my opinion. For comparison: Apple Maps: http://i.imgur.com/jqPHej2.png http://i.imgur.com/jqPHej2.png vs Mapbox Maps: http://i.imgur.com/rVH775b.png http://i.imgur.com/rVH775b.png

softwarehippie 12y ago
You do realize that this 100% configurable by stylesheets? The entire point is, that their maps are stylable by the user (i.e. the app developer).
- NathanKP 12y ago
  Of course. I've used Mapbox before and messed around with customizing the stylesheets. But the reality is that creating your own stylesheets is a level of effort and attention to detail that most projects/startups can't afford to take on, at least not at first. The default stylesheets should look good and work well out of the box. Then if you have the time and manpower to customize them further great.
  - incanus77 12y ago
    One of the design goals with GL was to support cascading styles, so you can start with the predefined world map and just provide deltas of the things you want to change. For example: "Hide the buildings, set the text font to X, swap the stacking order of layers A and B, and override the default park color to blue".
- agildehaus 12y ago
  The problem being that I might not know this particular thing is configurable. They need better defaults.

zackmorris 12y ago

Does anyone know if they are planning perspective (affine) transformation? Specifically, relief maps drawn at the correct (or exaggerated) elevation, with the labels still drawn upright?

incanus77 12y ago
Yes, eventually.

olegbl 12y ago

Sooooo... where do I get the WebGL (demo on the page) version? I want that.