Overlays

Overlays can consist of any combination of polygons, lines, and points.

  • Polygon fills can be solid, transparent, or semi-transparent. A variety of fill patterns (such as diagnols or dots) or images can also be used.
  • Line thickness should vary based on zoom level. As the map is zoomed out lines should become thinner and as the map is zoomed in lines should become thicker.
  • Points can be displayed a markers, images, or circles.
Example & Code
/* Marker tooltip */
function popup(feature, layer) {
    var popupContent = '
Latitude: ' + feature.geometry.coordinates[1] + ' 
Longitude: ' + feature.geometry.coordinates[0] + '
';

    if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
}

/* Add polygon examples with no fill and opacity */
L.geoJson(commonFeatures, {
    style: function(feature) {
        return feature.properties;
    }
}).addTo(map);

/* Add polygon example with fill */
L.geoJson(polygonFill, {
    style: function(feature) {
        return feature.properties;
    }
}).addTo(map);

/* Add example thin line */
L.geoJson(thinLine, {
    style: L.mapbox.simplestyle.style
}).addTo(map);

/* Add example thick line */
L.geoJson(thickLine, {
    style: L.mapbox.simplestyle.style
}).addTo(map);

/* Add example default marker */
L.geoJson(defaultMarker, {
    style: function(feature) {
        return feature.properties;
    },
    onEachFeature: popup

}).addTo(map);

/* Add example custom marker */
L.geoJson(customMarker, {
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {
            icon: customIcon
        });
    },
    style: function(feature) {
        return feature.properties;
    },
    onEachFeature: popup

}).addTo(map);

/* Add example cirlce pointer */
L.geoJson(circlePointer, {
    style: function(feature) {
        return feature.properties && feature.properties.style;
    },
    onEachFeature: popup,
    pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
            radius: 8,
            fillColor: "#00ff00",
            color: "#00ff00",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
    }
}).addTo(map);

var commonFeatures = {
    'type': 'FeatureCollection',
    'features': [{ //Example polygon with no fill
        'type': 'Feature',
        'properties': {
            'fillColor': 'none'
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                [
                    [-77.000543, 38.890900],
                    [-77.000543, 38.889856],
                    [-76.999545, 38.889855],
                    [-76.999545, 38.890904],
                    [-77.000543, 38.890900]
                ]
            ]
        }
    }, { // Example polygon with opacity
        'type': 'Feature',
        'properties': {
            'color': '#33ccff',
            'fillColor': '#33ccff',
            'fillOpacity': .2,
            'stroke': 'none'
        },
        'geometry': {
            'type': 'Polygon',
            'coordinates': [
                [
                    [-76.999474, 38.890900],
                    [-76.999474, 38.889856],
                    [-76.998504, 38.889855],
                    [-76.998504, 38.890909],
                    [-76.999474, 38.890904]
                ]
            ]
        }
    }]
};

var polygonFill = { // Example polygon with yellow solid fill
    'type': 'Feature',
    'properties': {
        'color': '#FFE773',
        'fillColor': '#FFE773',
        fillOpacity: 1,
        'stroke': '#FFE773'
    },
    'geometry': {
        'type': 'Polygon',
        'coordinates': [
            [
                [-76.998383, 38.890900],
                [-76.998383, 38.889860],
                [-76.996208, 38.889855],
                [-76.996208, 38.890909],
                [-76.998383, 38.890900]
            ]
        ]
    }
};

var thinLine = { // Example thin line
    'type': 'Feature',
    'properties': {
        'stroke': '#9900cc',
        'weight': 5
    },
    'geometry': {
        'type': 'LineString',
        'coordinates': [
            [-76.996173, 38.889715],
            [-76.996173, 38.887945]
        ]
    }
};

var thickLine = { // Example thick line
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            'stroke': '#FF8C00',
            'stroke-width': 10
        },
        "geometry": {
            'type': 'LineString',
            'coordinates': [
                [-77.002031, 38.888680],
                [-76.998448, 38.888680]
            ]
        }
    }]
};

var defaultMarker = { // Example marker
    'type': 'Feature',
    'properties': {
        'marker-color': '#00ff00'
    },
    'geometry': {
        'type': 'Point',
        'coordinates': [-76.997311, 38.889223]
    }
};

var customIcon = L.icon({
    iconUrl: '/design-standards/1.x/images/maki-icons/theatre-18@2x.png',
    'iconSize': [50, 50], // size of the icon
    'iconAnchor': [15, 45], // point of the icon which will correspond to marker's location
    'popupAnchor': [0, -25] // point from which the popup should open relative to the iconAnchor
});

var customMarker = { // Example marker with custom icon
    'type': 'Feature',    
    'geometry': {
        'type': 'Point',
        'coordinates': [-77.00280, 38.889513]
    }
};

var circlePointer = { // Example circle marker
    'type': 'Feature',    
    'geometry': {
        'type': 'Point',
        'coordinates': [-77.001589, 38.889275]
    }
};