1

I am trying to place an image for each category I have but I can't get it to work.

I am using GeoJSON to get the data from a Wordpress. I have tried many things but I don't know exactly where to change the icons for each category.

My icons are stored in http://map.local/category1.png, http://map.local/category2.png...

 <?php
          $arg = array( 'post_type' => 'lugar', 'posts_per_page' => 10,);
          $loop = new WP_Query( $arg );
          $posts = $loop ->get_posts();
          foreach( $posts as $post ) { 
            $output[] = array(
              'address' => $post->address,
              'category'=> $post->category,
              'Latitude'=> $post->lat,
              'Longitude'=>$post->lon,
              'title'=>get_the_title(),
              'url'=> get_permalink()
            );
          } 
          $json =json_encode($output);
?>
    <script>
        var data = <?php echo $json ?>;
        var map = L.map('map',{
            center:[39.4697500, -0.3773900],
            zoom:14,
            zoomControl: false
        });
        L.control.zoom({
          position: 'bottomright'
        }).addTo(map);

L.tileLayer('xx', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1,
}).addTo(map);

        var markers=L.markerClusterGroup();
        let geojsonData = createGeoJson(data);

        function createGeoJson(data) {
            var geojson = {
                "type":"FeatureCollection",
                "features":[

                ]
            };

            data.forEach(element => {
                let marker = L.marker([element.Latitude, element.Longitude]);
                let pntGeojson = marker.toGeoJSON();

                pntGeojson.properties = element;
                geojson.features.push(pntGeojson);
            });

            return geojson;
        }


  
        var categorynone = L.geoJson(geojsonData, {
            onEachFeature:function(feature, layer) {
              let content = '<span class="title">' + feature.properties.title + '</span>' +  '<span class="address">' + feature.properties.address + '</span>' +  '<a href="'+ feature.properties.url + '">' + 'Més informació' + '</a>';
                layer.bindPopup(content);
            },
            pointToLayer:function(geoObj, latLng) {
                return L.marker(latLng);
              
            },
            filter:function (feature,layer){
                return feature.properties.category == "";  
            }

        });



        for (let i = 1; i < 8; i++) {

            this["category"+i] = L.geoJson(geojsonData, {
                onEachFeature:function(feature, layer) {
                let content = '<span class="title">' + feature.properties.title + '</span>' +  '<span class="address">' + feature.properties.address + '</span>' +  '<a href="'+ feature.properties.url + '">' + 'Més informació' + '</a>';

                        layer.bindPopup(content);
                
                },
                pointToLayer:function(geoObj, latLng) {
                    return L.marker(latLng);
                
                },
                filter:function (feature,layer){
                    return feature.properties.category == "categoria" +i;  
                }

            });


        }

        var all = L.layerGroup([category1,category2,category3,category4,category5,category6,category7]);
        L.control.layers({
            "All":markers,
            "Category 1": category1,
            "Category 2": category2,
            "Category 3": category3,
            "Category 4": category4,
            "Category 5": category5,
            "Category 6": category6,
            "Category 7": category7,
            
        }).addTo(map);
        markers.addLayer(all);
        markers.addTo(map);

        console.log(markers);

    </script>
6
  • You write that you don't know "where to change the icons for each category". Change to what? You have some custom icons? See this example from Leaflet tutorial how to create custom icons for markers: leafletjs.com/examples/custom-icons – TomazicM Jun 17 at 18:07
  • Yes, I have just read that article before but I don't know how to include it in my code. I have the icons, I have category1.png, category2.png... But I don't know how to put it in the code. – JamalDols Jun 17 at 19:33
  • Please edit your question and add info about your icons and location where will you read them from. – TomazicM Jun 17 at 20:59
  • that's exactly what I don't know how to do. That's what I'm asking. How to put an icon according to the category. – JamalDols Jun 18 at 7:42
  • You have icon images category1.png, ..., that are stored somewhere on your web server. Please edit your question and add the info about the names of those images an locations where are you going to red them from. All relevant infor should be in the body of the question, not in the comments. – TomazicM Jun 18 at 7:48
1

In your loop where you create one GeoJSON layer for each category, just add icon creaton for specific category and then use this icon when creating markers:

for (let i = 1; i < 8; i++) {
  let markerIcon = L.icon({
    iconUrl: 'path_to_icon/category' + i + '.png'
  });

  this["category" + i] = L.geoJson(geojsonData, {
    onEachFeature: function(feature, layer) {
      let content = '<span class="title">' + feature.properties.title + '</span>' +  '<span class="address">' + feature.properties.address + '</span>' +  '<a href="'+ feature.properties.url + '">' + 'Més informació' + '</a>';
      layer.bindPopup(content);
    },
    pointToLayer: function(geoObj, latLng) {
      return L.marker(latLng, {icon: markerIcon});
    },
    filter: function(feature,layer){
      return feature.properties.category == "categoria" + i;  
    }
  });
}
1
  • Thank you so much!! – JamalDols Jun 18 at 11:19

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.