poner imagen de fondo mapbox

dairo65 · #1 (**permalink**) 14/10/2017, 17:45

saludos.

tengo este problema, y es que no se como poner una imagen de fondo para mi market aquí les dejo el codigo

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>MAPAS</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
    
    <style>
        body {
         margin:0; padding:0;
          }
        #map
         { 
 
            position:absolute; top:0; bottom:0; width:100%;
             }
 
    </style>
</head>
<body>
 
<style>
.coordinates {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding:5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
}
 
 
#point{
  background-image: url('img/icono2.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;  
}
</style>
 
<div id='map'></div>
<pre id='coordinates' class='coordinates'></pre>
 
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFpcm9yaXZlcmExOTgyIiwiYSI6ImNqN2R6ZnA3cDBnNzUzNG10MmM1Z24xYTgifQ.7oz5IzjuIZOyXzFeuaekSw';
// Holds mousedown state for events. if this
// flag is active, we move the point on `mousemove`.
var isDragging;
 
// Is the cursor over a point? if this
// flag is active, we listen for a mousedown event.
var isCursorOverPoint;
 
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
   center: [ -73.357591, 5.544499],
    zoom: 13
});
 
var canvas = map.getCanvasContainer();
 
var geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [ -73.357591, 5.544499]
        }
    }]
};
 
function mouseDown() {
    if (!isCursorOverPoint) return;
 
    isDragging = true;
 
    // Set a cursor indicator
    canvas.style.cursor = 'grab';
 
    // Mouse events
    map.on('mousemove', onMove);
    map.once('mouseup', onUp);
}
 
function onMove(e) {
    if (!isDragging) return;
    var coords = e.lngLat;
 
    // Set a UI indicator for dragging.
    canvas.style.cursor = 'grabbing';
 
    // Update the Point feature in `geojson` coordinates
    // and call setData to the source layer `point` on it.
    geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
    map.getSource('point').setData(geojson);
}
 
function onUp(e) {
    if (!isDragging) return;
    var coords = e.lngLat;
 
    // Print the coordinates of where the point had
    // finished being dragged to on the map.
    coordinates.style.display = 'block';
    coordinates.innerHTML = 'Longitude: ' + coords.lng + '<br />Latitude: ' + coords.lat;
    canvas.style.cursor = '';
    isDragging = false;
 
    // Unbind mouse events
    map.off('mousemove', onMove);
}
 
map.on('load', function() {
 
    
// Añade un solo punto al mapa
    map.addSource('point', {
        "type": "geojson",
        "data": geojson
    });
 
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 40,
            "circle-color": "#3887be"
            "background-image": "url('img/icono2.png')", ---------es aqui donde no me cuadra--------
            
        }
    });
 
 
 
   
 
    // Cuando el cursor ingrese una característica en la capa de puntos, prepárese para arrastrar.
    map.on('mouseenter', 'point', function() {
        map.setPaintProperty('point', 'circle-color', 'yellow');
        canvas.style.cursor = 'move';
        isCursorOverPoint = true;
        map.dragPan.disable();
    });
 
    map.on('mouseleave', 'point', function() {
        map.setPaintProperty('point', 'circle-color', 'green');/* accion al poner el mouse*/
        canvas.style.cursor = '';
        isCursorOverPoint = false;
        map.dragPan.enable();
});
 
 
 
    /// para posicionar al usuario 
 
map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
}));
 
    map.on('mousedown', mouseDown);
});
 
 
 
</script>
 
</body>
</html>

no se que estoy haciendo mal.

muchas gracias por su amable ayuda

#2 (**permalink**) 14/10/2017, 17:54

Con imágen de fondo te refieres a la web?

dairo65 · #3 (**permalink**) 14/10/2017, 18:04

gracias por responder alvaro_trewhela

no jejejej no me exprese bien disculpa

lo que pasa es que tengo un marcador (como los marcadores de google maps)personalizado en este mapa pero en este codigo esta predeterminado como un circulo, y lo que quiero es poner mi marcador personalizado en vez del circulo.

no se si me haga entender

#4 (**permalink**) 14/10/2017, 18:43

No se muestra en el html tu elemento con id point. que es y donde se ubica?

dairo65 · #5 (**permalink**) 14/10/2017, 18:49

asi es , cuando cargo mi html (mapa) solo me muestra el circulo pero no mi marcador arrastrable

#6 (**permalink**) 14/10/2017, 19:19

Es decir, se carga dinamicamente?.

No debería haber problema, revisaste bien la dirección de la imágen?

dairo65 · #7 (**permalink**) 14/10/2017, 19:28

la idea es que cuando se cargue el mapa automáticamente me cargue la imagen en en punto donde yo ubique el marcador pero
no oye no me muestra nada me arroja error en la consola de chrome

Uncaught SyntaxError: Unexpected string

#8 (**permalink**) 14/10/2017, 19:55

Mira yo hice esto como ejemplo, para que veas que se cargan estilos al elemento generado dinamicamente.

Código HTML:

Ver original<html>
    <head>
    <style>
    #point{
    background-image:url("images/test.jpg");
    width:500px;
    height:500px;
    }
    </style>
    <script type="text/javascript">
    
    function addIdElement(element, id, target){
    var el = document.createElement(element);
    el.setAttribute("id", id);
    document.getElementById("target").appendChild(el);
    }
    
    
    </script>
    </head>
    <body onload="addIdElement('div', 'point', 'target');">
        <div id="target"></div>
    </body>
</html>

A mi me anduvo perfecto, por lo que creo que debe ser tu dirección de imágen

dairo65 · #9 (**permalink**) 14/10/2017, 20:03

tienes razon por que cambie tu
background-image:url("images/test.jpg");

por
background-image:url("img/icono2.png");

y si me carga bien la imagen, me la muestra, pero no la quiero de fondo de pantalla si no de fondo del marcador.

si has visto que en google maps los marcadores se ven en forma de una gota con lo ancho arriba?
ese es el icono que quiero cambiar.

y la pregunta del millon es por que si me carga su ejemplo pero en mi codigo no??

#10 (**permalink**) 14/10/2017, 20:22

Es que como no se como está conformado tu marcador no tengo idea que está pasando.

Pero si no te carga en tu código no debes tener acceso al elemento

dairo65 · #11 (**permalink**) 14/10/2017, 20:35

Cita:

Iniciado por alvaro_trewhela

Es que como no se como está conformado tu marcador no tengo idea que está pasando.

Pero si no te carga en tu código no debes tener acceso al elemento

te entiendo, y en eso si tienes razón por que no se por que no me deja cargar la imagen o icono, si tu coges mi código y lo pegas en un html te darás cuenta que sale un circulo grande marcando la posición.

ahora lo que quiero es cambiar ese circulo por un icono por ejemplo como este
https://nubemedia360.com/wp-content/...gle-places.png

pero obviamente personalizado por mi