-1

I'm trying to modify the size of marker icon used to show gpx waypoints. I know I should modify iconSize: [x,z] and iconAnchor: [y,z] but I don't find where (in which Leaflet file) it has to be modified. I have even replaced leaflet/images/marker-icon.png with another PNG. It has no effect!

How can I do this?

I have no code to show because my question is WHERE (in which script) the icon size is to be modified?

This is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Open Street Map</title>
    <meta charset="utf-8" >
    <link rel="icon" type="image/png" href="OpenStreetMap.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" >
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="src/Leaflet.GraphicScale.min.css" >
    <link rel="stylesheet" href="src/stylesheet.css" >

</head>
<body>

    <div id="map"></div>
    <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js"></script>
    <script src="src/Leaflet.GraphicScale.min.js"></script>
    <script>
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return (results === null)? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '10 10',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
}

function resetHighlight(e) {
    customLayer.resetStyle(e.target);
}


var Marker = L.icon({
iconUrl: 'Point.png',

iconSize:     [27, 32], // size of the icon
iconAnchor:   [13, 32], // point of the icon which will correspond to marker's location
popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
});
var Lon = getUrlParameter('Lon')
var Lat = getUrlParameter('Lat')
var starts = new L.LayerGroup();

// ****************** change colors sequentially  *****************

var colors = [
'#3388ff',
'#800000',
'#9a6324',
'#808000',
'#469990',
'#000075',
'#000000', 
'#e6194b',
'#f58231',
'#ffe119',
'#bfef45',
'#3cb44b',
'#42d4f4',
'#4363d8',
'#911eb4',
'#f032e6',
'#a9a9a9',
//'#fabed4',    Pink
//'#ffd8b1',    Apricot
//'#fffac8',    Beige
//'#aaffc3',    Mint
'#dcbeff',
//'#ffffff' White
];

var n = 0;
var customLayer = L.geoJson(null, {
  style: function(feature) {
    if (!feature.properties.id) {
      feature.properties.id = n++;
    }
    var iColor = feature.properties.id % colors.length;
    return { color: colors[iColor] };
  }, 
onEachFeature: function(feature, layer) {
  if (feature.properties.desc) {
    layer.bindPopup(feature.properties.desc);
  }
  layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight
  });
}



});

        var map = new L.LayerGroup();
        var runLayer = omnivore.gpx("../"+getUrlParameter('map'), null, customLayer)
        .on('ready', function() {
        map.fitBounds(runLayer.getBounds());
    })
    .addTo(map);


            var osmLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>'
        ;
         var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; ' + osmLink + ' Contributors'
            ;
        var mbAttr = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://mapbox.com">Mapbox</a>',
            mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiamFudXMwMDciLCJhIjoiY2l0azNvNjZlMDAzbTQ2bGk0dDFtaGhzcCJ9.8GAQYGpMFog62mRv17pGtA';

        var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
            satellite  = L.tileLayer(mbUrl, {id: 'mapbox.satellite',   attribution: mbAttr});           
            
         var Stamen_Terrain = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: 'abcd',
            ext: 'png'
        });     
        var standard = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
            maxZoom: 18
        });

        var map = L.map('map', {
            layers: [osmMap, starts, map],
        })
        .setView([49.21, 4.2], 8);

        var baseLayers = {  
            "OpenStreetMap": osmMap,                
            "OpenTopoMap": standard,
            "3D map" : Stamen_Terrain,
            "satellite": satellite,
        };

        L.control.layers(baseLayers).addTo(map);

        var graphicScale = L.control.graphicScale({
        position:  'bottomright',   
        fill: 'hollow',
        }).addTo(map);
    
    </script>
</body>
</html>
11
  • 1
    Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code. – TomazicM Apr 3 at 13:57
  • 1
    You say "I have no code", but also "I'm trying to modify the size of marker icon used to show gpx waypoints", which means you have some code. Icon size is to be modified in your own script. – TomazicM Apr 4 at 9:40
  • 1
    It's hard to understand what are you trying to do with your code. You have group layer assigned to the variable map: var map = new L.LayerGroup(), but than you use the same variable name when defining map and then adding map as a layer to the map: var map = L.map('map', {layers: [osmMap, starts, map]}). – TomazicM Apr 4 at 17:11
  • 1
    As far as your question is concerned, now that you published your code, it's clear what you want to do: change markers displayed as a part of GeoJSON layer. You'll get your answer when question is reopened. At the moment it needs two more reopen votes. Hint: see official Leaflet GeoJSON example: leafletjs.com/examples/geojson. – TomazicM Apr 4 at 17:20
  • 1
    You didn't answer my question about the use of the map variable. You need not be JS specialist, but you should now for each statement in your code why it's there and what it does, otherwise you'll be in trouble all the time. – TomazicM Apr 4 at 17:35
1

You can specify your own marker/icon to be used for points in GeoJSON layer via pointToLayer option (see https://leafletjs.com/reference-1.7.1.html#geojson), which is intended just for that purpose.

In you case the code to use marker with your icon marker would be:

var customLayer = L.geoJson(null, {
  pointToLayer: function(point, latlng) {
    var myMarker = L.marker(latlng, {
      icon: Marker
    });
    return(myMarker);
  },
  style: function(feature) {
  .
  .
  .
3
  • I followed your code whith this but I get a syntax error unexpected token ')' : 'code' style: function(feature) { iconUrl = 'Point.png', iconSize = [15, 25], shadowSize = [25, 25], shadowAnchor = [7, 25] }); } – Hervé Apr 5 at 13:45
  • I didn't include all the code, just option pointToLayer that's new, the rest should be as in your question. – TomazicM Apr 5 at 13:49
  • Sorry, I thought I must add your code, not insert. Now except my variable is Marker not marker it works, thanks. – Hervé Apr 5 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.