I have a layer on mapbox as follows;
map.addLayer({
"id": "places-drink",
"type": "symbol",
"source": "places",
"filter": ["all", ["==","Venues","TRUE"],['==','Type','drink']],
"layout": {
"icon-image": "bar-15",
"icon-allow-overlap": true,
"icon-size": 1.3
},
});
and i want to instead of using the mapbox icons, use a local image. How do I go about doing that?
The icon-image property of symbol layers uses the style's sprite sheet to store icons.
There are a few you can modify the sprite sheet for your map style to include custom images. If you want to use local files, you'll need to use a tool like spritezero to assemble a sprite sheet from your images and then set the sprite url of your style to the location of the sprite sheet directory you created.
You can also upload your custom images to a style using mapbox.com/studio/ Style Editor. Here is a guide on how to do that: https://www.mapbox.com/help/custom-images/
Disclaimer - I work at Mapbox
Related
Currently I am doing graphical information system(GIS) web application that allow user to upload their tileset eg mbtiles format to the system and view tileset using mapbox on browser. Now, I'am just use mapbox studio to upload tileset and take the sytle then copy to the code. My question is, how I want to upload mbtiles files to database and view in mapbox on browser without use mapbox studio
mapboxgl.accessToken = 'accesstoken';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox style', // stylesheet mapbox style
center: [100.2192660726069, 6.523753293936409], // starting position [lng, lat]
// pitch: 60, // pitch in degrees
// bearing: -60,
zoom: 16 // starting zoom]
});
If your question is how to view your map in the browser outside of Mapbox Studio, you can use the code snippet you have included above and create a container div <div id="map"></div> within the HTML of your page to display the map.
If you are asking how to programmatically upload your MBTiles file and add the tileset to an existing style without the use of Mapbox Studio, you will want to look into the Uploads or Tilesets API and Styles API.
For uploading the MBTiles file, you can work with the Create an upload endpoint or the Tilesets API.
To then add the uploaded tileset to a style, you can use the Update a style endpoint or add it at runtime to the map using the addLayer GL JS method.
I want to update a custom map on Mapbox with my uploaded tilesets by the Mapbox API. The MBtiles were uploaded by using the mapbox-Python-SDK and stored as tilesets.
I need to get these Tilesets to a custom map by a script (The Files are Georeferenced pictures from a Drone, which I want to get displayed automatically on my map). Some kind of Livemapping. It works easy in the Mapbox Studio with the "Add tileset to style" - button, but I need to do it by the API.
I have no clue what's the best way to do it. Any Suggestions ?
You can add the source at runtime with map.addLayer, or map.addSource and then map.addLayer as in this example https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/ (although in your case it sounds like your source would be of type: 'raster').
map.addSource("drone", {
"type": "raster",
"url": "mapbox://username.sourceid"
});
map.addLayer({
"id": "drone-layer",
"type": "raster",
"source": "drone"
});
I want to create a map starting from the basic template but when I open the template in the editor I do not see the map.Even in preview mode the map does not appear
In red is where it should appear the map or am I doing something wrong?
I downloaded json file from mapbox has more than 800 lines of code, it seems that is not empty.
I created a new map from street template and still not showing nothing in edit mode
I would recommend deleting that style and creating a new one based on the style Basic. I just attempted what you described and it works fine.
To create a new Style in Mapbox Studio. You can also follow the Get started with Mapbox Studio docs.
Login into Studio
Home > New Style
Pick a template, I would recommend starting with Streets
To verify, you created a new style based on Basic and not on the Style Empty, correct? The screen capture you have above looks like Empty. You can download your Style to compare.
This is what an Empty style looks like. Empty will have no map, giving you the power to build your own map literally from the ground up.
{
"version": 8,
"name": "Empty",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
"sources": {
},
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"interactive": true,
"paint": {
"background-color": "rgba(0,0,0,0)"
}
}
]
}
I was able to resolve this issue by changing out my video card. (I worked with Mapbox support for a while but they were unable to help.) On a whim I swapped out my BFGE Tech GeForce GTS 250 for a NVIDIA GeForce GTX 670 and it started working.
I suspected a hardware issue as the problem persisted after upgrading to Windows 10.
Does anyone know how to get the URL for a Mapbox vector tile map (aka a "style")? I can only get a style address that looks like this: mapbox://styles/myusername/r3411y10ngh4sh3tc3tc, but I am using a plugin that requires a URL to integrate Mapbox's Vector Tiles with Leaflet: https://github.com/SpatialServer/Leaflet.MapboxVectorTile/blob/master/docs/configuration.md
I tried substituting the style address provided by Mapbox for the URL
var config = {
url: "mapbox://styles/myusername/fwaoij32wlfij23slkfj3",
...etc
};
var mvtSource = new L.TileLayer.MVTSource(config);
map.addLayer(mvtSource);
but I get an error where it can't read the style address as a URL. Any suggestions? Should I be using a different plugin?
Update
In short, the URL for a Mapbox style is not yet available. Here is a response I received from Mapbox:
Leaflet is not yet compatible with styles made in Mapbox Studio since these styles require a GL-based renderer. We're currently working on a new API to allow you to use your Studio style with Leaflet, we expect it to launch in a few weeks.
At this time, you can use Mapbox GL JS to load your Mapbox Studio style. You can still access raster map IDs (maps made with Mapbox Editor, Mapbox Studio Classic) to load with Leaflet - these are found under the "Classic" tab in the Studio dashboard.
The Leaflet.MapboxVectorTile plugin uses a different approach to styles than, for example, the Mapbox GL JS library does.
Styles you create in Mapbox Studio can be downloaded as JSON, but for Leaflet.MapboxVectorTile you have to create them programmatically as you can see in the documentation. You can still use their vector tile URL https://b.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=<public api token>, but styles would probably have to be rewritten/done from scratch again.
You can use the Mapbox Gl Javascript to create a map with the style you created, but I don't know how extensive your current project is and if it would conflict with other (Leaflet) plugins:
mapboxgl.accessToken = '<public API token>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/<your name>/<style id>',
center: [-74.50, 40],
zoom: 9
});
I'm using Google Custom Search API for searching images to display in my website. But the thumbnail images are too small and I could not find a way to control the thumbnail size. Here is a response for my query:
{
"kind": "customsearch#result",
"title": "Big Ben Street London United Kingdom Photo Shared By Halsy16 ...",
"htmlTitle": "Big Ben Street \u003cb\u003eLondon United Kingdom\u003c/b\u003e Photo Shared By Halsy16 \u003cb\u003e...\u003c/b\u003e",
"link": "http://www.fansshare.com/photos/london/big-ben-street-london-united-kingdom-784722294.jpg",
"displayLink": "www.fansshare_com",
"snippet": "Robert Pattinson's new London",
"htmlSnippet": "Robert Pattinson's new \u003cb\u003eLondon\u003c/b\u003e",
"mime": "image/jpeg",
"image": {
"contextLink": "http://www.fansshare_com/gallery/photos/10677077/big-ben-street-london-united-kingdom/",
"height": 640,
"width": 1024,
"byteSize": 80611,
"thumbnailLink": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSZJRKQ-yIiSt1FCeYdBKLUEft54xHJo095_r9-rN8OrILnOZPnJZvcwNsG",
"thumbnailHeight": 94,
"thumbnailWidth": 150
}
Can someone please tell me if there's a way to get a bigger thumbnail? Or are there any alternative ways to display the search results like in Google Image Search?
Thank you very much!
I'm assuming you're using the Google Custom Search API since the Image API is deprecated.
There is no way to tell Google to serve a bigger thumbnail size AFAICS, but you have two possible workarounds:
use the image url as a CSS background-image property to an element of your chosing (for example, a div with class "portrait"), and use background-position:cover to make sure the image is scaled up or down to cover the whole element screen estate (Here is an example : Andy Warhol 's portrait is fetched via Google)
link to the full image instead of the thumbnail (the linkquery parameter you have in your example) (but that can be hazardous since you'll have to avoid huge and too small images)
Make sure to experiment with the api Explorer and its parameters.