Code block embed: Leaflet

sandbox
1

Here is JSON that renders a Leaflet map with markers:

{
  "markers": [
    {"lat": 37.7749, "lng": -122.4194, "popup": "<h3>San Francisco</h3>"},
    {"lat": 37.8044, "lng": -122.2712, "popup": "<h3>Oakland</h3>"},
    {"lat": 37.3382, "lng": -121.8863, "popup": "<h3>San Jose</h3>"},
    {"lat": 37.8716, "lng": -122.2727, "popup": "<h3>Berkeley</h3>"},
    {"lat": 37.4419, "lng": -122.1430, "popup": "<h3>Palo Alto</h3>"},
    {"lat": 37.3861, "lng": -122.0839, "popup": "<h3>Mountain View</h3>"},
    {"lat": 37.3541, "lng": -121.9552, "popup": "<h3>Santa Clara</h3>"},
    {"lat": 37.5485, "lng": -121.9886, "popup": "<h3>Fremont</h3>"},
    {"lat": 37.6688, "lng": -122.0808, "popup": "<h3>Hayward</h3>"},
    {"lat": 37.9358, "lng": -122.3477, "popup": "<h3>Richmond</h3>"},
    {"lat": 37.9102, "lng": -122.0652, "popup": "<h3>Walnut Creek</h3>"}
  ]
}

That code block has the language set to JSON for syntaxhighlighting. If I change…

```json

to

```leaflet

I get this:

{
  "markers": [
    {"lat": 37.7749, "lng": -122.4194, "popup": "<h3>San Francisco</h3>"},
    {"lat": 37.8044, "lng": -122.2712, "popup": "<h3>Oakland</h3>"},
    {"lat": 37.3382, "lng": -121.8863, "popup": "<h3>San Jose</h3>"},
    {"lat": 37.8716, "lng": -122.2727, "popup": "<h3>Berkeley</h3>"},
    {"lat": 37.4419, "lng": -122.1430, "popup": "<h3>Palo Alto</h3>"},
    {"lat": 37.3861, "lng": -122.0839, "popup": "<h3>Mountain View</h3>"},
    {"lat": 37.3541, "lng": -121.9552, "popup": "<h3>Santa Clara</h3>"},
    {"lat": 37.5485, "lng": -121.9886, "popup": "<h3>Fremont</h3>"},
    {"lat": 37.6688, "lng": -122.0808, "popup": "<h3>Hayward</h3>"},
    {"lat": 37.9358, "lng": -122.3477, "popup": "<h3>Richmond</h3>"},
    {"lat": 37.9102, "lng": -122.0652, "popup": "<h3>Walnut Creek</h3>"}
  ]
}