I'm running an instance of tileserver GL to serve up custom map styles, and I want to use those styles in mapbox-gl-js.
Unfortunately, none of the labels on the map is rendering, and there aren't any errors in the console. I see the requests to the server's glyph endpoint in the server logs are successful, and the requests in the network tab of the developer console are all 200s.
It really seems like all of the pieces are in working order, as when going through the tileserver's demo site, the labels are rendered just fine.
Are there additional steps that are needed to get mapbox-gl-js to work with a glyphs endpoint that isn't from mapbox?
Related
So I'm attempting to get Mapbox working with my Leaflet implementation (using React Leaflet), and my spidey sense is telling me something is off.
The URL:
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/11/568/825#2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ
Note: I created the access_token used above for this SO question, and will be deleted soon. So the link may not work when you see this, which is why I used SO's handy dandy image upload!
I assume this has something to do with how the tile coordinates and/or zoom is being calculated, but really, I don't have a damn clue in the world.
Using mapbox.mapbox-streets-v4 as the tileset_id produces results that are better, but still bad. I haven't yet been able to load a stylesheet either...
What gives?
As it turns out I was correct in my hunch that it had something to do with how the tiles were being generated by Leaflet. And while I'll probably never know the specific reasons behind it, I was able to solve it. The secret sauce ended up being mapbox-gl-leaflet.
I threw together a super simple example on Code Sandbox showing the successful implementation of Mapbox tiles as a React component within React Leaflet. It's pretty snazzy, IMO, even if you have to import a few hundred different packages (doubly if using TS) to make it all work 😕
https://codesandbox.io/s/sharp-payne-m3hll
NOTE: To see the codesandbox link working, you'll need to supply your own Mapbox API key. The API key from above won't work (even if it was still valid, which it may or may not be depending on how much I care to do anything about it...)
The mapbox.mapbox-streets-v11 tileset from Mapbox is originally intended to be used as vector data, e.g. with Mapbox Vector Tiles API : https://docs.mapbox.com/help/glossary/vector-tiles-api/
The only difference with your URL is the requested format mvt (instead of jpg). And no #2x resolution modifier.
What may be confusing is that the vector tilesets can also be requested as raster, by specifying a raster format like jpg or png through Mapbox Raster Tiles API https://docs.mapbox.com/help/glossary/raster-tiles-api/.
Mapbox server then generates an image from the vector data. But in the case of the streets tileset, it has a lot of data in hand, and it renders all of it, making it appear messed up.
Mapbox provides 5 default tilesets (https://docs.mapbox.com/studio-manual/reference/tilesets/), some of them are raster only (typically Satellite mapbox.satellite) while others are originally vector, but can also be generated as raster (Streets, Terrain, Terrain-RGB/elevation, Traffic).
Unfortunately Leaflet does not handle vector data built-in. If you really need to use vector data, you have to use plugins like Leaflet.VectorGrid or Mapbox GL Leaflet, or another switch to another mapping library.
I'm trying to take a screenshot of a main part of an application in Chrome Dev Tools, which is wrapped in a UI with top navigation and a sidebar. Slack, Gmail and many others work like that.
When I open Dev Tools, find the div that holds the main content area and invoke Capture node screenshot, I only get the visible part of it: for example, what I currently see in Slack, not the entire loaded history of a channel.
It's probably connected to overflow:auto as I can't even take a screenshot of a very small paragraph here:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Examples
Is that a limitation of Dev Tools? Is there a trick of how to take the screenshot of such nodes? I'm especially interested in Slack or Gmail scenarios where the nodes typically have thousands of pixels vertically.
Chrome implemented it in v89: https://developers.google.com/web/updates/2021/01/devtools#node-screenshot
I am trying to show routes using BING maps REST service , but the map image with routes does not show up sometimes (shows blank map) , but after refreshing the html page it shows up.
I have contructed below URL
http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/Routes?wp.0=300%20Albemarle%20Road,,,Charleston,29407-7593&wp.1=1000%20Fort%20Johnson%20Road,,,Charleston,29412-8898&wp.2=1525%20Avenue%20B%20South,,,North%20Charleston,29405-2328&mapVersion=v1&mapSize=800,600&zoomLevel=10&key="my bing map key"
I've taken a look at this. I was able to reproduce the error with your URL. I tried modifying it by removing the extra comma's and the removing the last part of the zip codes (zip+4) since those are not supported. After doing that I was still able to reproduce this issue, but much less frequently. I suspect that there may be a couple servers that are out of sync on Bing Maps side, thus the inconsistency. I'll notify the engineering team so they can look into this.
for my next project I'm looking for maps, that contains only frontiers of countrys, lakes, hills ans rivers.
Can I get such kind of maps with the OpenStreet-API?
best regards
The "OpenStreetMap API" provides map data, not map images. So, for the imagery you want, you either need to find a source that renders the style you want, or render your own.
I don't know of any services that provide exactly the render that you're looking for. However, it should be very easy to render your own tiles that do this - if you install TileMill and follow through the tutorial, you will find it very easy to delete layers from the default style until no names are included in the style.
Note that if you're planning on running a web service, you'll also need to serve your special new map tiles to your users.
I have a set of System.Web.UI.DataVisualization charts (ASP.NET 4.0) working great and saving the files to disk. No problems and works great.
The challenge is that I am serving all of my static image and assets from a cookieless domain -- and eventually maybe from a CDN -- and unfortunately, the chart's IMG SRC is always relative. I can't seem to find a way to override that so that I can specify the root domain of the static asset server.
Some possible workarounds I haven't tried yet are:
Progamatically generate the charts and manually add an image control to the page
URL rewrite any requests for images (extra server hit, may not work)
Search and replace the SRC manually before markup is sent to browser (ugh)
Are there any other possibilities I'm not aware/thinking of? Thanks!
To answer my own question, the first bullet of programatically generating the charts (vs having the control markup in the HTML) and adding a control to the page manually seems to work just fine.
It removes the ability to style things in the markup though, so any other ideas are welcome.
Edit: I decided to leave the styling markup and programatically hide the chart control and add in the image control separately. Works great!
Edit: There is one caveat to my solution of adding the image control separately -- if you used the tooltips for each datapoint, they will no longer work once you implement this change since they are generated by the control itself.