map.js

%angular
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
<div id="mapid" style="height:500px;"></div>
<script type="text/javascript">
var Leaflet = L.noConflict();
    var map = Leaflet.map('mapid', {center: [40,-97], zoom: 4});
    var tiles = Leaflet.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
    var states = [{
        "type": "Feature",
        "properties": {"party": "Republican"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-104.05, 48.99],
                [-97.22,  48.98],
                [-96.58,  45.94],
                [-104.03, 45.94],
                [-104.05, 48.99]
            ]]
        }
        },{
            "type": "Feature",
            "properties": {"party": "Democrat"},
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                    [-109.05, 41.00],
                    [-102.06, 40.99],
                    [-102.03, 36.99],
                    [-109.04, 36.99],
                    [-109.05, 41.00]
                ]]
            }
            
        }
    ];

var poly = Leaflet.geoJson(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
    }}
}).addTo(map);
</script>