0

I am currently working on a webmapping project using Mviewer device, linked to OpenLayers 5.3. I am trying to create a new vector layer to locate points, with js. So far, I managed to create a layer with circles and colours categorizing the types of objects I want to represent. What I would like to do is to replace the representations with coloured circles by customized PNG mapmarkers which I found online. But I still cannot find the way to insert external graphics for my representation. Here is my code block:

{
mviewer.customLayers.bati_officiel = {};
 var categorie = mviewer.customLayers.bati_officiel;

 categorie.legend = { items: [
{
    label: "Culturel",
    geometry: "Point",
    styles: [ new ol.style.Style({
   image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(218,221,225,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
   })
  })]
 },   
{
    label: "Equipement public",
    geometry: "Point",
    styles: [new ol.style.Style({
         image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(27,132,237,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
  })
})]
 },
  {
    label: "Marine",
    geometry: "Point",
    styles: [new ol.style.Style({
      image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(237,27,27,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
  })
})]
 },
  {
    label: "Religieux",
    geometry: "Point",
    styles: [new ol.style.Style({
         image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(27,200,27,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
  })
 })]
 },
   {
    label: "Scolaire",
    geometry: "Point",
    styles: [new ol.style.Style({
         image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(69,120,27,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
  })
})]
 },
  {
    label: "Social",
    geometry: "Point",
    styles: [new ol.style.Style({
         image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(59,30,217,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
    })
  })]
  },
    {
    label: "Sportif",
    geometry: "Point",
    styles: [new ol.style.Style({
         image: new ol.style.Circle({
    fill: new ol.style.Fill({
        color: 'rgba(218,20,27,1.0)'
    }),
    stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 4
    }),
    radius: 9
  })
 })]
 }

] };


    mviewer.customLayers.bati_officiel.layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: "https://extranet.ville-houilles.fr/geoserver/houillesSIG/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=houillesSIG:bati_officiel&maxFeatures=50&outputFormat=application%2Fjson",
         format: new ol.format.GeoJSON()
     }),
     style: function(feature, resolution) {
        var stl;            
        if (feature.get('categorie')) {           
            switch (feature.get('categorie')) {
                 case "Culturel":
                    stl = categorie.legend.items[0].styles;
                    break;
                case "Equipement public":
                    stl = categorie.legend.items[1].styles;
                    break;
                case "Marine":
                    stl = categorie.legend.items[2].styles;
                    break;
               case "Religieux":
                    stl = categorie.legend.items[3].styles;
                    break;
                case "Scolaire":
                    stl = categorie.legend.items[4].styles;
                    break;      
                case "Social":
                    stl = categorie.legend.items[5].styles;
                    break;      
                case "Sportif":
                    stl = categorie.legend.items[6].styles;
                    break;                              
                default:
                    stl = categorie.legend.items[0].styles;
            }
        }            
        return stl;
    }
 });
mviewer.customLayers.bati_officiel.handle = false;

}

Here is a link to my project if needed : enter link description here

1

I actually found the solution quite quickly ! Here is a sample to what I did with a piece of my code : This part :

{
label: "Equipement public",
geometry: "Point",
styles: [new ol.style.Style({
     image: new ol.style.Circle({
fill: new ol.style.Fill({
    color: 'rgba(27,132,237,1.0)'
}),
stroke: new ol.style.Stroke({
    color: "#ffffff",
    width: 4
}),
radius: 9
  })
})]
 }

Became this :

 {
    label: "Equipement public",
    geometry: "Point",
     styles: [new ol.style.Style({
           image: new ol.style.Icon({
anchor: [0, 0],
src: 'https://extranet.ville-houilles.fr/mviewer/png_test/office-building.png'
  })
})]
  }

Now it works great !

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.