mapbox-gl-js

Do embedded GeoJSON styles work with Mapbox GL?

由 孤街浪徒 提交于 2019-12-06 11:19:33
Is it possible to utilize the built-in properties attribute of a GeoJSON data source to automatically style a Mapbox GL map without having to pre-specify a style? I have a use case where I dynamically load in GeoJSON LineString data that needs to be a particular color and it already has style data built in: {"properties": {"color": "#ffff33"... Right now, I have a rather inelegant setup where the relevant color is parsed out, translated into a style, and added to the map upon every load: $scope.patternPropToStyle = function(props) { var id = 'pattern' + props.pid; var style = { "id": id, "type

Double on click event with mapbox gl

由 妖精的绣舞 提交于 2019-12-06 08:00:52
I am redrawing layers on style.load event and removing the layers map.on('style.load', function() { loadByBounds(tempBounds) }); function loadByBounds(b) { if (map.getLayer("cluster-count")) { map.removeLayer("cluster-count"); } ... map.on('click', 'unclustered-point', function(e) { var popup = new mapboxgl.Popup() .setLngLat(e.features[0].geometry.coordinates) .setHTML(text) .addTo(map); })} But how to remove map.on('click') events? As when I click the point the Popup() displays 2 times. And when I change layer one more time the onclick event fires 3 times and so on. So I think I have to

Missing MapBox CSS using React

由 非 Y 不嫁゛ 提交于 2019-12-05 19:49:02
I'm trying to work with MapBox using React. I've created the project with create-react-app, added mapbox-gl ("mapbox-gl": "^0.46.0-beta.1"), but I have a problem with css file. It shows me this warning: This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/ I've followed all steps: 1 - Install the npm package: npm install --save mapbox-gl 2 - Include the CSS file in the of your HTML file: <link href='https://api.tiles.mapbox.com

MapBox clear all current markers

由 陌路散爱 提交于 2019-12-05 05:08:30
I've created a MapBox instance with: var map = new mapboxgl.Map({ container : 'map', style : 'mapbox://styles/mapbox/streets-v9' }); I need to clear all markers, and have tried things like map.remove(marker) on each one, and a few other things, but nothing seems to work. Is there a simple function call to just clear all markers from the map? EDIT: Different from How to remove all layers and features from map? because I get "eachLayer is not a recognised function" (or similar) in console. You saw this? https://www.mapbox.com/mapbox-gl-js/api/#marker#remove Instead of map.remove maybe try marker

Mapbox GL JS: ignore map click event if marker is clicked

由 与世无争的帅哥 提交于 2019-12-04 07:40:30
I have a marker in the map. I want to change its state when it is clicked and change it back when other place on the map is clicked. The problem is that map.on("click", console.log) is also fired upon clicking the marker. I want to see only the marker clicked event, because map click invokes state rollback. <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox

Style is not done loading: Mapbox GL JS

由 一个人想着一个人 提交于 2019-12-04 00:30:59
问题 My goal is to create a before and after map that shows a series of coordinate markers on the after map. When the code is executed, I see this error message in the console: Style is not done loading The end goal is to see a cursor that would allow users to swipe horizontally and see the maps change (from before to after). Here's my code so far, any help would go a long way! $(document).ready(function() { var request_one = $.ajax({ url: "https://geohack-framework-gbhojraj.c9users.io/ny",

Recommended way to switch tile urls in mapbox-gl-js

由 谁说我不能喝 提交于 2019-12-03 09:57:07
问题 Situation We render a raster layer to the map. The layer's source has an initial tile-url. Now we want to change the tile-url of the source and trigger a reload for the new tiles. E.g. we have tiles for different points in time and we want to step through the different time steps. What can be done in mapbox-gl@0.21.0 map.addSource('tile-source', {...}); map.addLayer('tile-layer', {source: 'tile-source', ...}); // react to a button click or what ever to trigger tile url change ... const source

Mapbox GL JS: Export map to PNG or PDF?

由 血红的双手。 提交于 2019-12-03 05:05:38
I'm using Mapbox GL JS version 0.32. Is there a way to export the map to a high-res PNG or PDF? Obviously, I can just screenshot, but it would be nice if there was a more formal way. I found this repo , but it looks old and isn't clear how it works. I tried using the preserveDrawingBuffer option : var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', minZoom: 4, maxZoom: 14, center: [-2.0, 53.3], preserveDrawingBuffer: true }); console.log(map.getCanvas().toDataURL()); This outputs a long data URL in the console, but copying and pasting it into a base64

Recommended way to switch tile urls in mapbox-gl-js

由 ☆樱花仙子☆ 提交于 2019-12-03 03:24:38
Situation We render a raster layer to the map. The layer's source has an initial tile-url. Now we want to change the tile-url of the source and trigger a reload for the new tiles. E.g. we have tiles for different points in time and we want to step through the different time steps. What can be done in mapbox-gl@0.21.0 map.addSource('tile-source', {...}); map.addLayer('tile-layer', {source: 'tile-source', ...}); // react to a button click or what ever to trigger tile url change ... const source = map.getSource('tile-source'); source.tiles = ['new-tile-url']; source._pyramid.reload(); This works

Mapbox: How to avoid JavaScript errors for tilesets that aren't available at the current zoom level?

由 懵懂的女人 提交于 2019-12-02 01:13:51
问题 I'm using Mapbox GL JS and loading tileset layers from my Mapbox account. Some of these tileset layers are only available for zoom levels 10 to 15. The default zoom level of my map is 5, and when I load the map I get a JavaScript console error, saying that the tileset is 404ing: Is there any way I can avoid this? I don't want to recreate the tileset all the way to zoom level 5, as it will unnecessarily increase its size. I don't think the console error is causing any problems in Chrome, but I
订阅 mapbox-gl-js