GeoJSON custom markers and style

Using Mapbox markers and properties in GeoJSON

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>GeoJSON custom markers and style</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.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>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
    .setView([23.68477, 120.89355], 7)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

// GeoJSON data: see http://geojson.org/ for the full description of this format.
//
// This specific GeoJSON document includes Path styling that's based on Leaflet's
// convention: http://leafletjs.com/reference.html#path
//
// And marker styling based on simplestyle-spec:
// http://github.com/mapbox/simplestyle-spec
var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "fillColor": "#eeffee",
      "fillOpacity": 0.8
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [119.2895599, 21.718679],
          [119.2895599, 25.373809],
          [122.61840, 25.37380917],
          [122.61840, 21.71867980],
          [119.2895599, 21.718679]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#00ff00"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [120.89355, 23.68477]
    }
  }]
};

// Here we use the `L.geoJson` layer type from Leaflet, that lets us use
// Polygons, Points, and all other GeoJSON types - but we specify that it
// should also pull styles for polygons with the `style` option
// and use the custom `L.mapbox.marker.style` function
// to make fancy markers with the `pointToLayer` option.
var geoJson = L.geoJson(geoJsonData, {
    pointToLayer: L.mapbox.marker.style,
    style: function(feature) { return feature.properties; }
}).addTo(map);
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example