I have a dataset, created in mapbox from an original GEOJson file, and later associated to a tileset (aslo in MapBox Studio). It was parsed fine, and I could inspect it in Studio>Dataset, all properties were parsed.
This tileset is then used as a layer on a stylep; the points are displayed, but the point's descriptions are not displayed when using MapBox-gl-js.
What do I have to do to display those descriptions when clicking on a waypoint?
note: Adding them by hand when creating the map isn't my preferred solution. Can this be done transparently from the original dataset saved on mapbox servers?
You've tagged this post as mapbox-gl-js, but refer to MapBox-js - which library are you using?
Assuming you mean Mapbox GL JS (https://docs.mapbox.com/mapbox-gl-js), I modified this example of displaying data from a GeoJSON source to use a tileset from Studio instead - but it's the same underlying data. You can see it here.
Related
I'd like to use the here maps vector tiles in a mapbox gl app. However, in order to do so, I need to define a style.json, see here for the spec, and here for an example.
Does here have a base style.json that I can use?
On the examples page, where using Mapbox is discussed, the documentation simply says: style: "map_style.json", // you should use your own style. It's a bit of a PITA (pain in the a**) to build from scratch, though.
Thanks for any help.
map_style.json -
this could be different for different use case and plain "JSON" file. This needs to be according to the map properties that needs to be displayed to use the other container style.
Is it possible to change the base style of a custom style after the fact in Mapbox Studio? If yes, how? I looked around the UI and in the documentation but couldn't find how.
Say I created a private style from the Vintage designer style (for example's sake), then added and customized layers by importing tilesets, can I switch to the another base style (e.g. North Star), or do I need to start a new custom style from the start?
Yes. Mapbox Studio is just a GUI for generating Javascript; it outputs a giant JSON file.
(A Mapbox Style is just a JSON object.)
Each of your data layers is included in that JSON (and can be copied and pasted into another style JSON).
Use these instructions to learn the process:
https://mapbox.com/help/transfer-styles-between-accounts
Hope that helps!
I'd like to generate a link to a Mapbox map, centered on a particular latitude and longitude, that also contains a marker on that spot. This is trivial when generating a static map:
https://api.mapbox.com/v4/mapbox.streets/pin-m(<lat>,<lon>)/<lat>,<lon>,<zoom>/320x160.png?access_token=<access token>
with the pin-m() segment specifying the marker. When generating a link to a full, interactive (zoomable/pannable) map, however, specifying a marker doesn't seem to be an option. This URL goes to the map I want:
https://api.mapbox.com/v4/mapbox.streets/zoompan.html?access_token=<access token>#<zoom>/<lat>/<lon>
but there's no marker. I looked through all the documentation and couldn't find any reference to a way to do this. From the docs it looks like the only way to add a marker to the map is to host a page and generate the map via JS in a script. I can do this, but I'd much prefer to be able to just add a parameter to a URL instead of adding a whole new route/controller/view/associated specs for our Rails app for what seems to me to be a very minor addition.
Does anybody know of an undocumented way to do this? Or a documented way that I've just overlooked?
You aren't able to add a marker through a url parameter like the static API allows. You could add a marker by following this example for Mapbox JS or you could use the newer Mapbox GL JS to center the map around a marker like in this example.
I Hope this helps
I'm trying to show/hide some GeoJSON data on an overlay layer.
I've the data as an object, but not at some server.
If I use the overlay type 'geoJSON', I'm getting a Eror:
A base layer must have an url
How do I show/hide my data using the overlay show/hide?
The mixed-layers-overlays-geojson-example is not working for me because it uses remote (xyz-json) data.
Additional information: I've the data in some object that I'm intending to modify/update based on user interaction.
PS: it's probably very simple problem
Edit: I made a plunker of the situation. It shows the dynamic adding and removing of a path object and some empty functions for the geoJSON objects.
I (my collegue) found some ugly answer: accessing the leaflet layers directly.
I forked the plunker from the description and added some functions. See my functions transformGeoObjToPath and geoToLeafletLayer. In our application we use layers of type 'featureGroup' for additional stuff like selecting, but this is not in the 'solution' example
But the solution is not 'beautiful', because it accesses the leaflet directly.
I've got an example data set of lines and points, representing peoples' journey to work and where they feel at risk from road accidents.
Now, the data have attributes such as Place (Home, Work, Danger) and the severity of accidents they fear in different places. So the wider question is how to visualise this on a web map. For that I've looked into Google Maps, Leaflet and OpenLayers3. Each of these looks great and allow nice styling but none, to my eye, have the neatness of CartoCSS for fast, complex and intuitive styling, like the code below used to create the image below:
So I tried it out in tile mill and this is what I came up with, after converting the things to raster tiles via TileMill.
But this is a silly way to do things: it cannot overlay a base layer and would be much more efficient to just serve the vector data and style them in the client side, perhaps using something like mapbox.js. But I cannot work out how to use the lovely CartoCSS language in the client side to style GeoJSON files. (How) Is this possible?
p.s. here's how I styled the above map
#tlines {
line-width:1;
line-color: #0b0;
}
#tpoints.points{
marker-width: 6;
}
#tpoints.points[Place='Danger'] {
marker-fill:#db0d0d;
}
#tpoints.points[Place='Home'] {
marker-fill:#db0;
}
#tpoints.points[Severity='1']{
marker-width: 4;}
#tpoints.points[Severity='2']{
marker-width: 6;}
#tpoints.points[Severity='3']{
marker-width: 10;}
I cannot work out how to use the lovely CartoCSS language in the client side to style GeoJSON files. (How) Is this possible?
It is not possible to use CartoCSS for styling features browser side.
To learn how to style GeoJSON in Mapbox.js/Leaflet.js take a look at the docs here:
Styling GeoJSON in Mapbox.js https://www.mapbox.com/mapbox.js/api/v1.6.2/l-geojson/ (works exactly as in Leaflet.js as Mapbox.js is based on Leaflet.js)
You can embed style options directly into the GeoJSON object with L.mapbox.simplestyle.style https://www.mapbox.com/mapbox.js/api/v1.6.2/l-mapbox-simplestyle-style/
Alex rightly points out that vector styling in Leaflet/Mapbox.js is a different creature than CartoCSS styling a la Tilemill or Mapbox Studio. However, it is possible to style features in a browser using CartoCSS; it just requires one of two things:
A different platform: CartoDB has an excellent JS library for styling hosted data with CartoCSS, based on leaflet and fully compatible with Mapbox basemaps.
Hosting your own tile server, either the CartoDB server or a combination of Mapbox-built tools.
If you are using GeoJson as data source, you may try the Leaflet.geojsonCSS plug-in for Leaflet.js. The Geojson CSS provides the styling definition for each feature in the collection in a css-like format. Using this requires to add the styling definition in the geojson beforehand.