Say I'm linking to a map made by someone else kitsunde.foo-bar-foo, is it possible for me to discover what CartoCSS was involved in rendering it?
Nope! CartoCSS is a pre-processor for Mapnik XML styling. When you upload a style to Mapbox from Mapbox Studio Classic, the CartoCSS is converted to Mapnik XML, and by the time it's actually in the browser, it's been combined with the vector sources and rendered into a static image. The CartoCSS is never stored on Mapbox's end.
Related
I'm in the process of rewriting route-planning web app from Mapbox.js to Mapbox GL JS library.
With all the features almost implemented, it's borderline unusable due to lags, non-smooth animations and general sluggishness of the map layer.
Now, it's entirely possible I'm using the API wrong. I made a quick comparison and published it here:
https://petrnagy.github.io/index.html#automove=no
Notice the old Mapbox.js (left) is much smoother than the new Mapbox GL JS (right).
You can see the difference more clearly here where both maps are moving and zooming:
https://petrnagy.github.io/index.html#automove=yes
This is just a basic example. The app itself also features:
Dynamically styled routes (traffic, air quality, elevation)
Rich UI which overlays the map
Additional layers (eg. bicycle lanes, POIs, air quality)
With all there features, Mapbox GL JS is pretty much unusable. Unlike the old Mapbox.js, which is smooth.
Any advice for optimizing the performance appreciated!
it's important to note that the older Mapbox.js library was serving raster tiles, which get rendered server side, where the more modern Mapbox GL JS is vector based and rendered client side. Due to the nature of raster vs. vector is why you might see this "dip" in performance, if you are looking strictly at FPS, because your machine may be struggling.
Mapbox.js, like other traditional JavaScript map libraries, used the basemap-overlay mapping convention. The basemap (or baselayer) is a raster tile layer that is served already rendered from the server and overlays are often vector data that sits on top of the basemap.
Mapbox GL JS has no distinction between baselayers and overlay layers, and uses mostly vector tiles. This means that map details like labels and icons and elements like streets and buildings can be modified with JavaScript, like overlays in earlier mapping libraries. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen.
You can read more about the difference here: https://docs.mapbox.com/help/how-mapbox-works/web-apps/
There are also some great guides on improving performance of Mapbox GL JS maps and working with large GeoJSON sources in Mapbox GL JS
I was trying to get an map style from the old Mapbox Studio Classic (https://www.mapbox.com/help/studio-classic-styles/) running in the new Mapbox Studio, i.e., converting it to Mapbox GL Style. I am wondering if there's a way to to convert at least the most part automatically?
Here's an example:
https://github.com/mapbox/mapbox-studio-winter-wonderland.tm2
In mapbox studio I have a lot of layers for customizations. Is there a way to access those layers programmatically with js. For example hide all WATER or ROAD layer on the map with js?
Thanks.
You can try using https://github.com/mapbox/vt2geojson to get geojson data for whichever layers you are interested in and then use this data and add styling using mapbox gl js maps.
Hope that answers your question.
I want to add a geotif image layer on map, I can do this in mapbox studio easily, Is there any way to do this using mapbox gl js library.
I added the geojson file using below code with mapbox gl js library:
map.addSource("quakes", {
"type": "geojson",
"data": "http://localhost:3000/Srikakulam.geojson"
});
For tiff images I don't find any solution like this.
I have hundreds of tiff images to load dynamically based on weather and date.
It's very uncommon to add georeferenced images like GeoTIFFs directly to a map. GeoTIFF is a relatively inefficient format, so the images will be very large, so requiring longer times to download and slower performance.
It's more common to process GeoTIFF into tiles: you can do so by uploading them to Mapbox, or by using a tool like TileMill, gdal2tiles, or MapTiler to generate tiles locally and then uploading those tiles to a server. Once you've generated tiles, you can include them in Mapbox GL JS, Mapbox.js, or any other client as a tile layer.
You can add gif, png, and jpg images to GL JS using the image source type. Here is an example.
If you don't want to convert your tiff to gif/png/jpg and load as an image source type (as #lucas-wojciechowski suggested), couldn't you create a vector tile source in MapBox Studio Classic and load it into your MB-gl-js map as a vector-source.
Note that vector tilesets, like most vector data formats, can also embed raster data, but that you lose vector functionality like over zooming, client-side rendering, and client-side data queries.
I've been using MapBox studio for a few weeks now but I'm curious, using the API is it possible to change the look of a map using html UI elements? For example, if I want to have a slider on the page which is displaying my map which adjusts the size of the POI labels, is it possible to do that, or am I beholden to the current saved .mss file for those attributes?
Mapbox Studio is designed for the rendering of raster tiles and not for live-changing styles. Check out Mapbox GL for preview of how live styling will work.