Manipulate the map in mapbox

问题

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; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibXdlaXNzYXNwZW4iLCJhIjoiY2sxdG96ZWhiMG04ZDNncW1yYnY1Zm45byJ9.gbFJEsL3BuxGhWjDSh3kvw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>

</body>
</html>

Now what I want to do is overlay the data that I get from a python script which looks like this (sample data, the real data is much more than this):

[{'type': 'scattermapbox', 
'mode': 'markers', 
'text': ['Census Tract:304.01<br>
Predicted Growth Rank:1.0<br>
    Year: 2017 '], 
'marker': {'size': 1, 'color': ['rgba(247, 251, 255, 255)'], 
'colorscale': [[0.0, 'rgba(8, 48, 107, 255)'], [0.05263157894736842, 'rgba(8, 48, 107, 255)'], [0.10526315789473684, 'rgba(8, 48, 107, 255)'],
               [0.15789473684210525, 'rgba(8, 48, 107, 255)'], [0.21052631578947367, 'rgba(8, 48, 107, 255)'], [0.2631578947368421, 'rgba(8, 48, 107, 255)'],
               [0.3157894736842105, 'rgba(8, 48, 107, 255)'], [0.3684210526315789, 'rgba(8, 48, 107, 255)'], [0.42105263157894735, 'rgba(8, 48, 107, 255)'],
               [0.47368421052631576, 'rgba(8, 48, 107, 255)'], [0.5263157894736842, 'rgba(8, 48, 107, 255)'], [0.5789473684210527, 'rgba(8, 48, 107, 255)'],
               [0.631578947368421, 'rgba(8, 48, 107, 255)'], [0.6842105263157894, 'rgba(8, 48, 107, 255)'], [0.7368421052631579, 'rgba(8, 48, 107, 255)'],
               [0.7894736842105263, 'rgba(8, 48, 107, 255)'], [0.8421052631578947, 'rgba(8, 48, 107, 255)'], [0.894736842105263, 'rgba(8, 48, 107, 255)'],
               [0.9473684210526315, 'rgba(8, 48, 107, 255)'], [1.0, 'rgba(8, 48, 107, 255)']], 
'opacity': 0, 
'cmin': 1.0, 
'cmax': 1.0, 
'showscale': False},
'showlegend': False, 
'lon': [-122.77720976814757],
'lat': [45.47996783203806],
'hoverinfo': 'text'}, 
Scattermapbox({
'lat': [45.48553],
'lon': [-122.77518],
'marker': {'color': 'rgb(231, 41, 74)', 'size': 9},
'mode': 'markers',
'showlegend': False,
'text': [9555 SW DUNCAN LN]
})]

Thus I should get something like this as the end result:

来源：https://stackoverflow.com/questions/58512159/manipulate-the-map-in-mapbox

标签

javascript

node.js

express

mapbox

mapbox-gl