Suite

Dépliant MapBox addlayer

Dépliant MapBox addlayer


Je suis débutant dans le codage et j'essaie de modifier du code GitHub téléchargé pour créer une application personnalisée et afficher mes données.

La fonction AddLayer me rend désespéré. J'essaie d'ajouter des données à partir du compte MapBox en modifiant la partie du code avec mon nom d'utilisateur Mapbox et mon identifiant de projet :

L.mapbox.tileLayer('myMBid.n7i50n7g'), L.mapbox.gridLayer('myMBid.n7i50n7g'),

S'il vous plaît partagez vos connaissances en matière de codage avec moi et apprenez-moi comment puis-je modifier le code pour pouvoir charger des données à partir de MapBox ?

Ou comment puis-je, à l'intérieur de ce codage, insérer une option pour charger des fichiers geojson ou topojson à partir du dossier de l'application ?

Code complet :

 var map = L.map('map',{maxZoom:17,minZoom:1}).setView([45.2701486, 18.5586462], 13); L.mapbox.accessToken = 'pk.myMBpublickey'; var baseLayer = new L.mapbox.tileLayer('myMBid.hl6099hm').addTo(map); // AJOUTER UN CONTRLEUR DE COUCHE var ui = document.getElementById('layerControls'); //AJOUTER LA PREMIÈRE COUCHE addLayer( L.mapbox.tileLayer('myMBid.j2rlctfi'), L.mapbox.gridLayer('myMBid.j2rlctfi'), 'Administrativne granice', 1 ); //AJOUTER UNE DEUXIÈME COUCHE addLayer( L.mapbox.tileLayer('myMBid.n7i50n7g'), L.mapbox.gridLayer('myMBid.n7i50n7g'), 'Soil Types', 3 ); function addLayer(layer, gridlayer, name, zIndex) { layer.setZIndex(zIndex); var gridControl = L.mapbox.gridControl(gridlayer, {position: 'bottomleft'}).addTo(map); // Crée un simple sélecteur de calques qui permet d'activer // et de désactiver les calques. var link = document.createElement('a'); link.href = '#'; link.className = 'btn btn-primary btn-sm'; link.type = 'bouton'; link.innerHTML = nom; link.onclick = function(e) { e.preventDefault(); e.stopPropagation(); if (map.hasLayer(layer)) { map.removeLayer(layer); map.removeControl(gridControl); this.className = 'btn btn-primary btn-sm'; } else { map.addLayer(couche); map.addLayer(gridlayer); map.addControl(gridControl); this.className = 'active btn btn-primary btn-sm'; } } ; ui.appendChild(lien); } ; // AJOUTER LA SUPERPOSITION DE REFERENCE var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane); var topLayer = new L.mapbox.tileLayer('landplanner.hl60jemk', { maxZoom: 18 }).addTo(map); topPane.appendChild(topLayer.getContainer()); topLayer.setZIndex(7) ; 

Vous pouvez y parvenir en utilisant les éléments suivants :

L.mapbox.tileLayer('https://{s}.tiles.mapbox.com/v4/YOUR_MAP_ID/{z}/{x}/{y}.png">

J'ai essayé de vérifier si mes données MapBox sont correctes et j'ai testé le code dans Plunker :

L.mapbox.accessToken = 'pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ.tI5Od3maJWFflOMcit5vDg'; var map = L.mapbox.map('mapbox', 'fnevistic.n7o8oi8c', { 'center': [45.25, 18.55], 'zoom': 12 });

Tout fonctionne bien. La carte s'affiche, la fenêtre contextuelle fonctionne. Maintenant, j'essaie de trouver le moyen d'implémenter ce code dans un code existant :

//AJOUTER LA PREMIÈRE COUCHE addLayer( L.mapbox.tileLayer('myMBid.j2rlctfi'), L.mapbox.gridLayer('myMBid.j2rlctfi'), 'Administrativne granice', 1 );

J'ai fait des corrections de code selon les instructions d'Evil Genius :

//AJOUTER LA PREMIÈRE COUCHE addLayer( L.mapbox.tileLayer("https://{s}.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/{z}/{x}/{y}.png">https ://a.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/%7Bz%7D/%7Bx%7D/%7By%7D.pn… token=pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ3maJCit5 js:1e.exports @ mapbox.js:6e.exports._loadTileJSON @ mapbox.js:6L.TileLayer.extend.initialize @ mapbox.js:6s.Class.extend.e @ mapbox.js:1e.exports @ mapbox. js:7(fonction anonyme) @ physicalLayers.js:15 mapbox.js:7

impossible de charger TileJSON à

https://a.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/{z}/{x}/{y}.png">PartagerAméliorer cette réponserépondu 21 août '15 à 11:20PhilPhil11 insigne en bronze