mapbox-gl-js

Mapbox GL JS refresh layer

由 南楼画角 提交于 2019-12-23 03:19:14
问题 I'm using Chroma.js to style a Mapbox choropleth map. I do this by storing in a variable dataStyleProp a single property of the source -- in this case the data are population and the properties are "free", "slave", "white", and "total"). Then I use dataStyleProp to build the Chroma.js color scale. What I would like to do is: Select the value for dataStyleProp from a radio button on the HTML page, Pass that value to the Chroma script, Then refresh the map to show the new choropleth. I've

Was default_marker removed from mapbox-gl.js

由 不问归期 提交于 2019-12-23 02:28:24
问题 I am trying to use the default_marker and/or secondary_marker in mapbox-gl.js however it appears they have been removed from the sprite.json in streets-v9 (probably v8 too). I've found a working example in streets-v7 where they were part of the sprite.json/sprit.png, but they are gone now. How can I get these back or what is the new replacement? I've gone through the new sprint.png but I don't see anything similar. 回答1: Apologies for the change, ongle! We've recently worked to standardize the

Double on click event with mapbox gl

由 戏子无情 提交于 2019-12-22 18:11:48
问题 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

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 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

How to create a vector tiles map with ngx-leaflet (Angular way)?

由 人走茶凉 提交于 2019-12-21 05:09:09
问题 Any good recommended angular 6+ supported libraries which can be used to accomplish the following task? I'm using ngx-leaflet as the Map. I wish to create the map with Vectors rather than Rasters . I know that Leaflet doesn’t support vector tiles by default, however, you can accomplish via mapbox-gl-leaflet plugin. Can anyone recommend me an approach or an appropriate library to accomplish this task using angular 6+? 回答1: You may use Leaflet.VectorGrid plugin. See ngx-leaflet-starter and the

Get Directions between two points in Mapbox?

由 拜拜、爱过 提交于 2019-12-20 05:38:16
问题 I recently using mapbox gl on react native instead of Google maps, I am trying to add a feature that shows a direction from point A to point B on the map. OR use Mapbox directions API inside my React Native App here is my code I tried but after my screen mounted, the app crashed successfully :D import MapboxGL from '@react-native-mapbox-gl/maps'; import React from 'react'; import {View} from 'react-native'; MapboxGL.setAccessToken( '....', ); class TwoPoints extends React.Component {

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)" } }

Using MapBox for Geolocation in html

由 自古美人都是妖i 提交于 2019-12-19 10:09:21
问题 I would like to display the address on dynamics CRM using MapBox API, i have used Google API and it works perfectly, but now i would like to display it using map box. I have looked at the forward geo-location feature of Mapbox but it's not yet clear. So my variable my address variable will be coming from a field. e.g var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada"; <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add a geocoder</title> <meta name='viewport'

Drawing a circle with the radius in miles/meters with Mapbox GL JS

由 Deadly 提交于 2019-12-17 23:22:15
问题 I'm in the process of converting a map from using mapbox.js to mapbox-gl.js , and am having trouble drawing a circle that uses miles or meters for its radius instead of pixels. This particular circle is used to show the area for distance in any direction from a central point. Previously I was able to use the following, which was then added to a layer group: // 500 miles = 804672 meters L.circle(L.latLng(41.0804, -85.1392), 804672, { stroke: false, fill: true, fillOpacity: 0.6, fillColor: "
订阅 mapbox-gl-js