JSFiddle - React, Tailwind, and code Playground

basic GeoJSON layers using different icons

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
<script src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}
.infopop h4 {
    font: 14px/16px Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0 0 0px;
    color: #777;
}

JavaScript

// set center coordinates
var coords = [34.069, -118.293];

// set default zoom level
var zoomLevel = 13;

// initialize map
var map = L.map('map').setView(coords, zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

//create GeoJSON objects
var breweries = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2930511, 34.07262197]
        },
            "properties": {
                "NAME": "Brewery #1"
        }
    }, {
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2816772, 34.06740181]
        },
            "properties": {
                "NAME": "Brewery #2"
        }
    }, {
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2967767, 34.06370117]
        },
            "properties": {
                "NAME": "Brewery #3"
        }
    }]
};

var wineries = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2901087, 34.05506611]
        },
            "properties": {
                "NAME": "Winery #1"
        }
    }, {
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.3015698, 34.08000674]
        },
            "properties": {
                "NAME": "Winery #2"
        }
    }, {
        "type": "Feature",
            "geometry": {
           ...