Angular2-Leafletjs：为L.geoJSON（）定义样式.addTo（myMap）

Question

In am using Leafletjs in Angular2 , http.get to invoke JSON from a URL, but I can't define style for the features that are added to the map because of predefining the geoJSON layer:

  // Add an empty layer to the map
  var geoJsonLayer1 = L.geoJSON().addTo(myMap);

  // Retrieve the geojson file
  http.get(myJsonURL)
  .map((response: Response) => {
      geoJsonLayer1.addData(response.json());
  }).subscribe();

The geoJSON layer doesn't have any style and it looks as below:

The reason that I am predefining the layer is, I am lazy-loading the JSON file. In the regular way, we can define the style as below:

L.geoJSON(myLines, {
    style: myStyle
}).addTo(map);

Now my question is, how to define the style for a predefined layer?

Answer 1

Just predefine the layer without data…

var geoJsonLayer1 = L.geoJSON(null, {
  style: myStyle
}).addTo(map);

// Later on…
geoJsonLayer1.addData(response.json());

BTW your screenshot looks to show markers (for "Point" type features) with missing icon image. In that case, instead of style option for vector shapes (like polygons, line strings, etc.), you should use the pointToLayer option.