前提・実現したいこと
mapboxで、複数の緯度・経度情報をfor文を用いて同一のレイヤーに表示させたいと考えています。
発生している問題・エラーメッセージ
しかし実行すると下記のようなエラーが出ます。
mapboxは最近触り始めたので、わからないところが多くどうすればいいのかわかりません。
style.js:693 Uncaught Error: There is already a source with this ID at je.addSource (style.js:693) at Map.addSource (map.js:1759) at Map.<anonymous> (map.html:29) at Map.fire (evented.js:129) at Map._render (map.js:2912) at map.js:3217
該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>マップを表示</title> 6<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 7<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet"> 8<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script> 9<style> 10body { margin: 0; padding: 0; } 11#map { position: absolute; top: 0; bottom: 0; width: 100%; } 12</style> 13</head> 14<body> 15<div id="map"></div> 16<script> 17 var lat=[38.943951,38.909664,38.914581]; 18 var log=-[-77.052477,-77.043444,-77.031706]; 19 20 mapboxgl.accessToken = 'myid'; 21 const map = new mapboxgl.Map({ 22 container: 'map', 23 style: 'mapbox://styles/mapbox/streets-v11', 24 center: [136.447164, 35.483184], 25 zoom: 9 // starting zoom 26 }); 27 map.on('load', () => { 28 for(var i=0;i<3;i++){ 29 map.addSource('places', { 30 // This GeoJSON contains features that include an "icon" 31 // property. The value of the "icon" property corresponds 32 // to an image in the Mapbox Streets style's sprite. 33 'type': 'geojson', 34 'data': { 35 'type': 'FeatureCollection', 36 'features': [ 37 { 38 'type': 'Feature', 39 'properties': { 40 'description': 41 '<p>テスト</p>', 42 'icon': 'theatre-15' 43 }, 44 'geometry': { 45 'type': 'Point', 46 'coordinates': [log[i], lat[i]] 47 } 48 } 49 ] 50 } 51 }); 52 } 53 54 map.addLayer({ 55 'id': 'places', 56 'type': 'symbol', 57 'source': 'places', 58 'layout': { 59 'icon-image': '{icon}', 60 'icon-allow-overlap': true 61 } 62 }); 63 }); 64</script> 65 66</body> 67</html> 68
補足情報(FW/ツールのバージョンなど)
質問に不足している点があれば追加させていただきます
あなたの回答
tips
プレビュー