¿Cómo agregar un lugar?

Este tutorial muestra como agregar un lugar en un mapa de Geodir Maps

Prepara tu página

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

                                    	
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
                                    	
                                    

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

                                    	
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
        integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
        crossorigin=""></script>
                                    	
                                    

Agrega un elemento 'div' donde quieres ver tu mapa:

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

Define la altura del contenedor del mapa:

                                    	
    #map {
        width: 600px;
        height: 400px;
    }
                                    	
                                    
Configura tu mapa

Crea un mapa con centro en Lima con Geodir Calles:

                                    	
    const map = L.map('map', {
        center: [-12.05, -77.05],
        zoom: 18,
        minZoom: 1,
        maxZoom: 20
    });
                                    	
                                    

Agrega una capa al mapa:

                                    	
    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);
                                    	
                                    
Agrega un ícono

Agrega un ícono fácilmente:

                                    	
    const icon = L.icon({
        iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker.png',
        iconSize: [35, 35],
        iconAnchor: [17, 35],
        popupAnchor: [0, -24]
    });
                                    	
                                    
Agrega un lugar

Agrega un lugar fácilmente:

                                    	
    L.marker([-12.05, -77.05], {
        icon: icon
    }).addTo(map)
    .bindPopup("Soy un nuevo lugar!").openPopup();
                                    	
                                    
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>
        </head>

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

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

            <script>
                const map = L.map('map', {
                    center: [-12.05, -77.05],
                    zoom: 18,
                    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({
                    iconUrl: 'http://www.geodir.co/resources/images/documentacion/maps/geodir-marker.png',
                    iconSize: [35, 35],
                    iconAnchor: [17, 35],
                    popupAnchor: [0, -24]
                });

                L.marker([-12.05, -77.05], {
                    icon: icon
                }).addTo(map)
                .bindPopup("Soy un nuevo lugar!").openPopup();
            </script>
        </body>
    </html>