mapbox-gl

how to customise cluster icon in mapbox-gl?

我与影子孤独终老i 提交于 2019-12-22 14:02:14
问题 I want to implement clustering in my map. I found example of simple clustering from Mapbox Cluster Example but My code is here, where marker ==> {marker-symbol} is from studio. but it is not working. Is it possible to achieve output of cluster? 回答1: Solved By following code var layers = [ [150], [20], [0] ]; layers.forEach(function(layer, i) { map.addLayer({ "id": "cluster-" + i, "source": "markers", "type": "symbol", "layout": { "text-field": "{point_count}", "text-font": [ "Arial Unicode MS

Mapbox GL cluster zoom

余生颓废 提交于 2019-12-22 08:04:34
问题 I'm trying to show all the markers when the user click on a cluster. This is what I have done so far: map.on('click', function (e) { var cluster_features = map.queryRenderedFeatures(e.point, { layers: [ 'cluster-0', 'cluster-1', 'cluster-2' ] }); var cluster_feature = cluster_features[0]; if (cluster_feature && cluster_feature.properties.cluster) { map.jumpTo({ around: e.lngLat, zoom: map.getZoom() + 2 }); } }); This is adding 2 levels of zoom every time the user click on a marker. It works

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

試著忘記壹切 提交于 2019-12-21 16:58:34
问题 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

Custom marker with dialog box

微笑、不失礼 提交于 2019-12-20 00:22:48
问题 How do I achieve dialog like those shown above. So far this is what I can do right now map.addLayer({ "id": "markers", "type": "symbol", "source": "markers", "interactive": true, "layout": { "text-field": "{price2}", "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], "text-offset": [0, 0.6], "text-anchor": "top", "text-size": 12, "text-letter-spacing": 0.05, "icon-image": "marker-15" }, "paint": { "text-color": "#fff", "text-halo-width": 2, "text-halo-color": "rgb(11, 148, 68)" } }

Cannot find Mapbox Vector Tile URL for my Mapbox Style map

[亡魂溺海] 提交于 2019-12-14 03:49:38
问题 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

Manipulate the map in mapbox

*爱你&永不变心* 提交于 2019-12-13 20:15:34
问题 The code presented here. Gives us a mapbox, which I also use in my code. Here is the actual code from the link: <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Display a map</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0;

Having trouble with mapbox GL layers

馋奶兔 提交于 2019-12-13 05:06:06
问题 So, I'm trying to get a style layer from the loaded stylemap in mapbox GL but it keeps returning undefined elements. I'm at the end of my wits. I'm trying to get the underlaying water layer to store in the layers variable so I can alter its properties. For instance, its visibility. Here's the code: var layers=map.getLayer('water'); changeinnerHTML(featuresWindow, JSON.stringify(layers, null, 1)); PS - I'm returning to coding after years. I just brushed upon my js again. PPS: Here's the whole

How to hide all opened marker popups in mapbox-gl?

限于喜欢 提交于 2019-12-12 12:33:33
问题 I can't find the way to hide all opened marker popups or even check marker popup state. 回答1: I would think getPopup().isOpen() would allow you to check state, and getPopup().remove() (ran while iterating over all of your stored markers in some array) would accomplish what you need here. 来源: https://stackoverflow.com/questions/40849927/how-to-hide-all-opened-marker-popups-in-mapbox-gl

highlighting polyline features in mapbox-gl.js

淺唱寂寞╮ 提交于 2019-12-12 01:36:49
问题 I am trying to use the following code to highlight features under the mouse pointer. The difference between my geojson data and the geojson data used in the linked example is that the example is made up of polygons whereas my geojson is made up of polylines. I have tried to modify the code accordingly in order that lines are highlighted however it does not work. My geojson is accessible here: http://iskandarblue.github.io/mapbox/data/prototype2.geojson Any advice on what needs to be changed?

MapBox and TIFF

我与影子孤独终老i 提交于 2019-12-11 11:53:12
问题 I am trying to show my TIFF file at the MapBox's map. I am starting with this example: https://www.mapbox.com/mapbox-gl-js/example/vector-source/ by replacing map.addSource('terrain-data', { type: 'vector', url: 'mapbox://mapbox.mapbox-terrain-v2' }); with map.addSource('terrain-data', { type: 'vector', url: 'mapbox://xxx.yyy' }); where xxx.yyy is my Map ID from Data section of the account (https://www.mapbox.com/studio/data/) JavaScript initiates needed calls (to some jpg files), but all of