Hot answers tagged

52

As pointed out by @Greg, instead of TileStream (my first attempt) you should use Tilelive to host your own vector tiles. Tilelive isn't a server itself but a backend framework that deals with tiles in different formats from different sources. But it's based on Node.js so you can turn it into a server in a pretty straight-forward way. To read tiles from a ....


26

The hosting of the vector tiles on your own is relatively straightforward. The MBTiles contains .pbf files which must be exposed to the web. That's it. Probably easiest is to use a simple open-source server such as TileServer-PHP and put the MBTiles file to the same folder as the project files. The TileServer do all the hosting config for you (CORS, ...


19

TileMill is designed for producing raster tiles. It's powerful and easy to use with CartoCSS and I found it ran well with no bugs (PC version). It's also pretty well documented, with lots of examples and the tiles produced are easy to integrate with Leaflet.js web sites. Vector tiles potentially offer many advantages, in terms of styling flexibility and ...


17

Note that I am not a MapBox software user, but looking at the MapBox sample GeoJSON file you pointed out in Visual Studio, it appears the "crs" warning is related to the Coordinate Reference System element of the GeoJSON, at the very top of the file. It might be that MapBox changed the import format specification, but forgot to update the sample file. I ...


16

If you want to remove the grayscale map from the start just delete: "Grayscale": grayscale, From var baseMaps = { "Grayscale": grayscale, "Streets": streets }; If you want to remove the layer on a click you call it as a method on the map object. Like so: map.removeLayer(grayscale) To remove it from the control you first have to assign the ...


15

This tutorial serves as a good example: 1) As shown in the example, set up your base layers with a variable name that can be accessed in the function where you want to switch them programmatically. var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}), streets = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: ...


13

I am a long time user of TileMill which is a great tool. After spending two weeks testing MapBox Studio and I can say it was a huge disappointment. 1) It is so buggy that it is practically unusable, both on Windows and Mac versions (and especially on Windows), the program literally crashes every 2 min. 2) The interface is less intuitive and practical than ...


13

You can achieve this by combining a few map event listeners and a variable as follows. To prevent a tooltip when the user has moved or zoomed the map by mouse or keyboard you will need a variable that determines wheter your user clicked the "fly" button or not: map.on('flystart', function(){ flying = true; }); map.on('flyend', function(){ flying = ...


13

Leaflet is free ($) and open, with a minimal requirement of keeping the license should you redistribute it. Leaflet is a library that lets you display - and more - data. It is not a data provider. Mapbox, OSM and others are data providers/distributors and have their own restrictions / attribution requirements. So to answer your question, yes, Leaflet is ...


12

Leaflet is a Javascript Map Client API - it requests images from services like MapBox and provides the panning / zooming experience you'd see in Google Maps or similar. You'd use the two together - MapBox provides tiles of maps, and Leaflet makes them usable in web pages.


12

Not to toot my own horn, but https://github.com/spatialdev/PGRestAPI is a project I've been working on that hosts .mbtiles vector tile exports from Mapbox Studio. Still needs lots of documentation, but basically, drop your .mbtiles files into /data/pbf_mbtiles and restart the node app. It will read thru that folder and offer endpoints for your vector tiles....


11

You may be interested in Kosmtik, which is an alpha project with similar aims to TileMill and under active development.


10

Use an imageOverlay layer. You only need to specify the bounding box of the image. Check the example of the API documentation: var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; L.imageOverlay(imageUrl, imageBounds).addTo(map);


10

Thanks for the great question. I did not know that they had finally released a stable version of the vector tiles. Moreover, you may have to work with this answer as it is a source of ideas to your "any ideas?" question. I do not have a running studio yet. I think one of the problems that you are running into is that you are using a tilejson file. You ...


10

Turf.js is not dependent on Mapbox.js or access token. I was initially confused with the documentation, I think, but it works fine with plain leaflet.js.


10

I could not get it to work with @james-conkling 's example above. I did this instead: var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'top-left');


10

Take the L.marker([ln, lt], {icon: marker}).addTo(map); line and move it into the callback function for map.on('load') (one line directly above where you add the L.geoJson object). This will prevent the code trying to add the marker to the map before the style is initialized.


9

Download and unarchive to a destination to which you have read rights, then add the path to the individual SVG symbols... path-to-mapbox-maki-download\src\nounproject to the SVG paths dialog in QGIS Rendering preferences by clicking Add: After doing this, I had to restart QGIS (1.8.0 on Mac, here) for the symbols to become automatically available in the ...


9

map.flyTo() is available in Leaflet 1.0. However the parameters are different from those in the example. See http://leafletjs.com/reference-1.0.0.html#map-flyto flyTo(<LatLng> latlng, <Number> zoom?, <Zoom/pan options> options?) Example: flyTo([13.87992, 45.9791], 12)


9

The endpoint for Studio-made styles is available and stable for use with Leaflet. var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer( 'https://api.mapbox.com/styles/v1/mapbox/emerald-v8/tiles/{z}/{x}/{y}?access_token=<your token>', { tileSize: 512, zoomOffset: -1, attribution: '© <a href="https://www....


9

POSTGIS now supports outputting vector tiles as endpoint to a Query. https://postgis.net/docs/ST_AsMVT.html I honestly don't recommend this approach because currently that's just geometry and no attributes. You can also pair POSTGIS with GeoServer and GeoWebCache to produce vector tiles but also don't recommend that. But probably your best bet now is ...


8

Yes, it might sound confusing but internally markers are treated like layers. You have to use removeLayer, it will still only remove a single marker: var x = L.marker([51.5, -0.09]).addTo(map); var y = L.marker([51.45, -0.09]).addTo(map); map.removeLayer(x);


8

I could successfully feed Mapbox SDK with non-mapbox (wikimedia) datasource without API key, which likely means there is no restriction for it. Also in code comments (logoView on iOS) they mention that you only need to display the Mapbox watermark if you use mapbox-hosted maps, you can safely hide it otherwise. Attaching the Mapbox GL style json file for ...


8

Let me quote from https://www.mapbox.com/api-documentation/#maps : If you use Mapbox.js, Mapbox GL JS, or another library like Leaflet, you're already using this API. This documentation is geared toward software developers who want to programmatically read these resources: it isn't necessary to read or understand this reference to design or use ...


8

Mapbox no longer applies OpenStreetMap edits right away and won't guarantee any timeframe for edits to appear. I've heard that their system for applying changes is backlogged and has lost some changes. You could try contacting them at help@mapbox.com, but I doubt they'd do anything to fix their problems. Sources: Conversations with people at Mapbox and ...


7

MapBox doesn't require you to use the MapBox.js API - you can use your customized tiles with OpenLayers easily by using OpenLayers.Layer.XYZ.


7

Absolutely Matt. Using vectors as the datasource for maps is ideal for high resolution printed output and MapBox vector tiles work well to distribute large data like OSM efficiently. I think the problem in getting something like this working is purely on a software level - you need the capability to mosaic tiles together, apply styles to them, and then ...


7

The easiest trick is to create your "master" Layer Group and add all other category Layer Groups into it. You can of course add this master into the overlays list of your Layers Control, so that it is listed and has a checkbox for the user to toggle it on/off. The problem is that this checkbox will get out-of-sync when user toggles individual categories. A ...


7

I'm pretty sure the TMS that the plugin is calling is broken, either the token was cancelled, ran out of request capacity, or blocked by MapBox. Try using a different satellite image background, either from the QMS plugin, or external. You can also follow NextGIS' FAQ regarding broken services


6

You will have to host the openstreet map data on your own server and generate your styled tiles yourself. Look at Mapnik for tiling. MapBox could be a solution that is hosted in the cloud, but it is not free to use (but you can have limited free use and storage).


Only top voted, non community-wiki answers of a minimum length are eligible