Adding icon as marker

@steady-entertainment if you place your image in /public/images/ you should be able to view it in the browser by accessing

livewiretest.test/images/donut.png

if you cant view the image, check you have correct permissions on folder of 755 and on the image as 644.

you dont need to use any of the url or asset helpers. just ensure you have a / at the front when you add to your javascript so its served from site root.

drwxr-xr-x 15 reniar staff 480B Dec 1 20:09 public

What’s the permissions on the subfolder images?

There is no problem with your js btw.

I tested by just putting a

<img src=‘/images/donut.png’> 

in the blade. If you can see the image then your permissions are correct

You are right, I cannot see the image it shows the no image found symbol

The folder is 755 and the files are 644

basic tests

1, Put what you think the url should be in your browser address bar. If the icon does not appear, don't bother going any further until you find out why your web server cannot serve a static image. At this point this IS NOT a javascript or Laravel issue.

it works http://livewiretest.test/images/iss.png no problem

2, Assuming you know the correct url for the icon, put it in your code. Hard code it. Not asset, not URL helper, just the raw URI

if I do

const iss = 'http://livewiretest.test/images/iss.png';

    const offline = L.icon({
        iconUrl: iss,
        iconSize: [50, 32], // size of the icon
        iconAnchor: [22, 16], // point of the icon which will correspond to marker's location
    });

that doesn't work and has the same effect like

const iss = '{{ URL::asset('/images/test.png') }}';

const offline = L.icon({
    iconUrl: iss,
    iconSize: [50, 32], // size of the icon
    iconAnchor: [22, 16], // point of the icon which will correspond to marker's location
});

Open the browser network tools. Refresh the page. See the assets being loaded. Look for the name of your file. Is it found and loaded? If it is in red then it was not found. Check the url being requested. Does it match the path that you think the image is located at? Is the image listed? if it is not even in the list of assets loaded then there is a javascript issue where your request to change the icon is not even considered.

Yes the image is not even listed but instead the standard image this blue standard marker is being pulled in via cdn

If the browser network tools are new to you, step back for a moment and watch some tutorials on how to use them. They will be used over and over so is a key skill for a web developer.

Hmmm that is really strange ....

Is that inside a blade file?

@steady-entertainment I would just find some easy dev to do so you can catch up if you are behind.

Depending on who is paying for the project,I would be clear to raise the problem you are having as there might be a budget hit. You may find that what you've got is good enough, and that will atleast bat the problem away until you can work it out.

@steady-entertainment if you want a hand with the project, and are ok to push it to a public repo, i'd be happy to install it at my end and see I can crack this for you,

hopefully @snapey's steps will sort it though.

yes I did but I couldn't solve it

<div
    id="mapid"
    class="h-screen w-full z-0"
></div >

@push('head-scripts')

    <script
        src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""
    >
    </script>

@endpush

    <script>

    //Making map and tiles
    const mymap = L.map('mapid').setView([0, 0], 3);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoicmVuaXIiLCJhIjoiY2toMW54eXF4MDlwZjJybmFoem5zaHoyOCJ9.vMLPuxo_2duOAym6w5q8rg'
    }).addTo(mymap);

    const iss = 'http://livewiretest.test/images/iss.png';

    const offline = L.icon({
        iconUrl: iss,
        iconSize: [50, 32], // size of the icon
        iconAnchor: [22, 16], // point of the icon which will correspond to marker's location
    });

    const marker = L.marker([0, 0, {icon: offline}]).addTo(mymap);


    marker.setLatLng([50, 20]);

</script >