TurfJS Ajouter un point à la carte MapBox

Nouveauté de Turf JS et étudie l'intégration via l'API MapBox. En utilisant la carte MapBox.Outdoors par défaut, vous avez suivi l'exemple de la documentation TurfJS http://turfjs.org/docs/#point, mais je n'arrive pas à obtenir le point que je trace en haut de la carte. Toutes les suggestions grandement apprécié, l'erreur semble être dans ma ligne de liste de la liste par rapport à la FeatureLayer.setGeoJSON, mais je ne peux pas le comprendre. Si je laisse la dernière ligne active, la carte ne se charge pas, si je la commente, la carte se charge mais aucune épingle n'apparaît.TurfJS Ajouter un point à la carte MapBox

<BODY> 
<div id='map'></div> 
<script> 
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA'; 

var point = turf.point([35.463453, -97.514914], { 
"title": "OKC Thunder", 
"description": "100 W Reno Ave, Oklahoma City", 
"marker-color": "#6BC65F", 
"marker-size": "large", 
"marker-symbol": "basketball" 
}); 

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19); 
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all? 
</SCRIPT> 
</BODY>

Source

2016-09-05 MarkGuk

Je pense que le problème est que vous essayez d'ajouter geojson à la carte sans la convertir en premier. Vous devez convertir le fichier geojson en un format utilisable par le dépliant. Voici un exemple qui devrait fonctionner pour vous. Il liera également une fenêtre contextuelle au marqueur de point qui affichera les propriétés pour vous. La partie style peut être effectuée de manière statique (comme pour toutes les propriétés sauf titre) afin qu'elle soit appliquée à tous les points de la collection d'entités, ou en utilisant dynamiquement chaque propriété d'entités (comme c'est le cas avec title).

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19); 

var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]}; 

L.geoJson(featureCollection, { 
    onEachFeature: function (feature, layer) { 
     layer.bindPopup(""+feature.properties+"<br />"); 
    }, 
    style: function (feature) { 
     style = { 
      "title": feature.properties.title, 
      "description": "100 W Reno Ave, Oklahoma City", 
      "marker-color": "#6BC65F", 
      "marker-size": "large", 
      "marker-symbol": "basketball" 
     }; 
     return style 
    } 
}).addTo(map)

Source

2016-11-23 14:40:44

Je pense que vous devriez utiliser la fonction de marqueur d'ensemble que la boîte à cartes met à votre disposition. Vous pouvez donc ignorer la création d'une couche d'entités et utiliser simplement la fonction mapbox-marker. Il est documenté ici: https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/

Il y a aussi une description de la façon de créer un simple marqueur ici: https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

Pour le code que vous avez fourni, vous pouvez simplement ignorer la création d'un objet via GeoJSON turf.point et il suffit d'utiliser ceci:

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19); 
L.marker([-97.514914, 35.463453], { 
    icon: L.mapbox.marker.icon({ 
    "title": "OKC Thunder", 
    "description": "100 W Reno Ave, Oklahoma City", 
    "marker-color": "#6BC65F", 
    "marker-size": "large", 
    "marker-symbol": "basketball" 
    }) 
}).addTo(map);

Ou si vous voulez, vous pouvez également faire pour utiliser GeoJSON avec turf.point cette façon:

var point = turf.point([-97.514914, 35.463453], { 
    "title": "OKC Thunder", 
    "description": "100 W Reno Ave, Oklahoma City", 
    "marker-color": "#6BC65F", 
    "marker-size": "large", 
    "marker-symbol": "basketball" 
}); 

var coords = point.geometry.coordinates; 

var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19); 
    L.marker(coords, { 
    icon: L.mapbox.marker.icon(point.properties) 
    }).addTo(map);

Assurez-vous également que vous devez retourner votre point de coordonnées [35,463453, -97,514914] à [-97,514914, 35,463453] pour correspondre à la spécification GeoJSON qui est « coordonnées projetées, longitude, latitude pour coordonnées géographiques »

http://geojson.org/geojson-spec.html#id2

Source

2016-12-01 13:58:13

TurfJS Ajouter un point à la carte MapBox

Répondre

Questions connexes