¿Cómo agregar una lista de lugares?

Este tutorial muestra como agregar una lista de lugares en un mapa de Geodir Maps

Carga tu archivo geojson

Incluye el archivo geojson en el 'head' de tu documento:

                                        
    <script src="http://www.geodir.co/resources/file/documentacion/geodir-maps-data.geojson"></script>
                                        
                                    
Agrega un ícono

Agrega un ícono fácilmente:

                                        
    const Icon = L.Icon.extend({
        options: {
            iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker.png',
            iconSize: [25, 35],
            iconAnchor: [13, 35],
            popupAnchor: [0, -30]
        }           
    });

    const bancoCreditoIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-banco-credito.png' }),
        bancoContinentalIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-banco-continental.png' }),
        scotiabankIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-scotiabank.png' }),
        interbankIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-interbank.png' });
                                        
                                    
Agrega una lista de lugares

Agrega una lista de lugares facilmente:

                                        
    L.geoJSON(geojson, {
        pointToLayer: function (feature, latlng) {
            switch (feature.properties.tipo) {
                case 'Agencia Banco de Crédito':
                    return L.marker(latlng, {
                        icon: bancoCreditoIcon
                });
                case 'Agencia Banco Continental':
                    return L.marker(latlng, {
                        icon: bancoContinentalIcon
                });
                case 'Agencia Scotiabank':
                    return L.marker(latlng, {
                        icon: scotiabankIcon
                });
                case 'Tienda Interbank':
                    return L.marker(latlng, {
                        icon: interbankIcon
                });
            }
        },
        onEachFeature: function(feature, layer) {
            if (feature.properties && feature.properties.nombre) {
                layer.bindPopup(feature.properties.nombre);
            }
        }
    }).addTo(map);
                                        
                                    
Copia el código completo

Copia el código completo:

                                        
    <!DOCTYPE html>
    <html>
        <head>       
            <title>Geodir Maps | API</title>

            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
            <link rel="shortcut icon" href="http://www.geodir.co/resources/images/favicon.ico" />
            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
        
            <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
            <script src="http://www.geodir.co/resources/file/documentacion/geodir-maps-data.geojson"></script>
        </head>

        <body>
            <div id="map"></div>

            <style>
                #map {
                    width: 600px;
                    height: 400px;
                }
            </style>

            <script>
                const map = L.map('map', {
                    center: [-12.03, -77.03],
                    zoom: 11,
                    minZoom: 1,
                    maxZoom: 20
                });

                L.tileLayer('https://tiles.geodir.co/osm_tiles/{z}/{x}/{y}.png', {
                    minZoom: 1,
                    maxZoom: 20,
                    attribution: '© <a href="http://www.geodir.co/maps" target="_blank">Geodir Maps</a> contributors'
                }).addTo(map);

                const Icon = L.Icon.extend({
                    options: {
                        iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker.png',
                        iconSize: [25, 35],
                        iconAnchor: [13, 35],
                        popupAnchor: [0, -30]
                    }           
                });

                const bancoCreditoIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-banco-credito.png' }),
                    bancoContinentalIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-banco-continental.png' }),
                    scotiabankIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-scotiabank.png' }),
                    interbankIcon = new Icon({ iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker-interbank.png' });

                L.geoJSON(geojson, {
                    pointToLayer: function (feature, latlng) {
                        switch (feature.properties.tipo) {
                            case 'Agencia Banco de Crédito':
                                return L.marker(latlng, {
                                    icon: bancoCreditoIcon
                            });
                            case 'Agencia Banco Continental':
                                return L.marker(latlng, {
                                    icon: bancoContinentalIcon
                            });
                            case 'Agencia Scotiabank':
                                return L.marker(latlng, {
                                    icon: scotiabankIcon
                            });
                            case 'Tienda Interbank':
                                return L.marker(latlng, {
                                    icon: interbankIcon
                            });
                        }
                    },
                    onEachFeature: function(feature, layer) {
                        if (feature.properties && feature.properties.nombre) {
                            layer.bindPopup(feature.properties.nombre);
                        }
                    }
                }).addTo(map);
            </script>
        </body>
    </html>