OpenLayers - geojson

by nerdess

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/6.5.1-dev.1613407331286/index.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var coord = [-76.95266723632812, 39.07974903895123];

var geojsonObject = {
  type: 'FeatureCollection',
  crs: { type: 'name', properties: { name: 'EPSG:4326' }},
  features: [
    {
      type: 'Feature',
      properties: {
        'marker-color': '#4620dd',
        'marker-size': 'medium',
        'marker-symbol': 'park',
        'name': 'State Park'
      },
      geometry: {
        type: 'Point',
        coordinates: coord
      }
    }
  ]
};

var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
  featureProjection: 'EPSG:3857'
});

var vectorSource = new ol.source.Vector({ features: features });
var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function (feature, resolution) {
    console.log(feature.getProperties(), feature.get('marker-color'));
    return [new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({ color: feature.get('marker-color') })
      })
    })];
  }
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.OSM() }),
    vectorLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat(coord),
    zoom: 5
  })
});