Use square rather than point

Question

I am displaying some points on map using leafletjs. The datasource is geoJSON

Like this simple sample that provided in their site.

Is it possible to use square rather than point by styling or the only way is to use multiPolygon instead of multiPoint?

Answer 1

I hope this helps:

HTML

<div id="map" style="width: 600px; height: 400px"></div>

JavaScript

var map = L.map('map').setView([40, -100], 15),
    createSquare = function (latlng, options) {
        var point = map.latLngToContainerPoint(latlng),
            size = options.radius || options.size || 10,
            point1 = L.point(point.x - size, point.y - size),
            point2 = L.point(point.x + size, point.y + size),
            latlng1 = map.containerPointToLatLng(point1),
            latlng2 = map.containerPointToLatLng(point2);
        return new L.rectangle([latlng1, latlng2], options);
    },
    points1 = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-100, 40]
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-99.999, 40]
                }
            }
        ]
    },
    points2 = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-100, 39.999]
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-99.999, 39.999]
                }
            }
        ]
    },    
    layer1 = L.geoJson(points1, {
        pointToLayer: function (feature, latlng) {
            return new L.CircleMarker(latlng, {
                radius: 10,
                color: "#000",
                weight: 1,
                fillColor: "#F50",
                fillOpacity: 0.75
            });
        }
    }).addTo(map),
    layer2 = L.geoJson(points2, {
        pointToLayer: function (feature, latlng) {
            return createSquare(latlng, {
                radius: 10,
                color: "#000",
                weight: 1,
                fillColor: "#0F5",
                fillOpacity: 0.75
            });
        }
    }).addTo(map);

Result

Here is the jsfiddle.