workshop ol vector layer

by Francesco Boccacci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="https://epsg.io/3003.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<body>
 <div id="map" class="map"></div>
</body>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.map {
  height: 100%;
  width: 100%;
}

JavaScript

ol.proj.proj4.register(proj4);
const firenze_gbw = [1681450.785672498, 4848967.319261061];
      
const firenze_gmerc = ol.proj.transform(firenze_gbw,"EPSG:3003","EPSG:3857");
      
const  map = new ol.Map({
	layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: new ol.View({
          center: firenze_gmerc,
          zoom: 10
        })
});
      
const firenzeCenter = new ol.geom.Point(firenze_gmerc);
const attributiFirenze = {
	 id: 14623,
   nome: "Firenze",
   cod: "D612",
   istat: "048017"
};
      
const comuneFirenze = new ol.Feature();
comuneFirenze.setGeometry(firenzeCenter);
comuneFirenze.setProperties(attributiFirenze);
      
const comuni = new ol.source.Vector({
	features: [comuneFirenze]
});
      
const layerComuni = new ol.layer.Vector({
          source: comuni,
          style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                  color: [0, 153, 255, 1]
                }),
                stroke: new ol.style.Stroke({
                  color: [255, 255, 255, 1],
                  width: 1.5
                })
              })
          })
});

map.addLayer(layerComuni);