0

I found marker-size: medium in the properties section in the GeoJSON file. so I want to call that marker-size, to be used in the PHP Leaflet code. So I need a solution for using this marker size and how can I solve it easily

===========geojson data=========================

     {
            "type":"FeatureCollection",
            "features":[
                {
                    "type":"Feature",
                    "properties":{"markercolor":"#1e7e7e","marker-size":"medium","marker-symbol":"","title":"Indonesia"},
                    "geometry":{"type":"Point","coordinates":[107.9296875,-6.664607562172573]}
                },
                {
                    "type":"Feature",
                    "properties":{},
                    "geometry":{"type":"Point","coordinates":[114.873046875,4.565473550710278]}
                },

========leaflet php code===========

pointToLayer: function(feature, latlng) {
   var smallIcon = L.icon({
                      iconSize:feature.properties.marker_size,
                      iconAnchor: [13, 27],
                      popupAnchor:  [1, -24],
                     
   });

   return L.marker(latlng, {icon: smallIcon});
},
        onEachFeature:onEachFeature
    }).addTo(mymap);
    });
4
  • Welcome to Geographic Information Systems! Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works. – Ian Turton Dec 9 '20 at 13:44
  • L.circleMarker has no size option, only radius. Please edit your question end explain the rule/formula of how you want to assign marker size on the basis of feature properties. Marker radius is a number, and there is no such property in your GeoJSON data. – TomazicM Dec 9 '20 at 14:04
  • sorry for the mistake, I have edited the question, I also don't understand the use of marker-size: medium. so please find a solution – olif Dec 9 '20 at 14:15
  • Leaflet has no marker with the medium size. You can only specify marker radius, where radius is size in pixels. You have to decide how big (what radius) will your marker be for medium property value. – TomazicM Dec 9 '20 at 15:38
2

Like @TomazicM said before, you can't assign "medium" as a size of your icon BUT if you really want to do this, you can have an object like this :

const sizeTranslator = {
         "small" : [20, 20],
         "medium" : [40, 40],
         "big" : [60, 60],
        };

And after instanciate this object, you can use the values with your code just here :

   var smallIcon = L.icon({
                  iconSize: sizeTranslator[feature.properties.marker-size],
                  iconAnchor: [13, 27],
                  popupAnchor:  [1, -24],
                 });

Hope it can help you

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.