How to get vectorlayer from json openlayer 3

Question

In below script I have added vector layer vectorLayer,vectorLayer5,vectorLayer1

How can I get that layer from json.. want to add multiple layers from external json file with that icon png image

 // we change this on input change var radius = 10; longitude = 400000; latitude = 300000; var styleFunction = function() { return new ol.style.Style({ image: new ol.style.Circle({ radius: radius, stroke: new ol.style.Stroke({ color: [51, 51, 51], width: 2 }), fill: new ol.style.Fill({ color: [51, 51, 51, .3] }) }) }); }; var update = function(value) { var wgs84Sphere = new ol.Sphere(6378137); radius = value; vectorLayer.setStyle(styleFunction); if(wgs84Sphere.haversineDistance(feature.getGeometry().getCoordinates(),iconFeature5.getGeometry().getCoordinates())<=radius){ vectorLayer5.setVisible(true); console.log('a'); } else{ vectorLayer5.setVisible(false); console.log('b'); } } var feature = new ol.Feature(new ol.geom.Point([longitude, latitude])); var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature] }), style: styleFunction }); var rasterLayer = new ol.layer.Tile({ source: new ol.source.TileJSON({ url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json', crossOrigin: '' }) }); // icon marker start here var iconFeature5 = new ol.Feature({ geometry: new ol.geom.Point([longitude, latitude]), name: 'Missing Person', population: 4000, rainfall: 500 }); var vectorSource5 = new ol.source.Vector({ features: [iconFeature5] }); var vectorLayer5 = new ol.layer.Vector({ source: vectorSource5 }); var iconStyle5 = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://cloud.githubusercontent.com/assets/41094/2833021/7279fac0-cfcb-11e3-9789-24436486a8b1.png' })) }); iconFeature5.setStyle(iconStyle5); // 2nd marker longitude1 = 100000; latitude1 = 100000; var iconFeature1 = new ol.Feature({ geometry: new ol.geom.Point([longitude1, latitude1]), name: 'Missing Person', population: 4000, rainfall: 500 }); var vectorSource1 = new ol.source.Vector({ features: [iconFeature1] }); var vectorLayer1 = new ol.layer.Vector({ source: vectorSource1 }); iconFeature1.setStyle(iconStyle5); var map = new ol.Map({ layers: [rasterLayer,vectorLayer,vectorLayer5,vectorLayer1], target: document.getElementById('map'), view: new ol.View({ center: [400000, 400000], zoom: 4 }) }); 

 html, body, #map { height: 100%; overflow: hidden; } .input { margin: 5px 0; } 

 <script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script> <div class="input"> <input type="range" id="range" min="10" max="50" onchange="update(this.value)"> <input type="text" id="range" value="10"> </div> <div id="map" class="map"></div> 

Answer 1

In web mapping we call json data with geometries as geojson and it has its own extension in text files. In order to call a geojson file to OL3 you'll have to load it to the vector source of the layer, Here is a part of a code to load external geojson file to an OL3 map:

var vectorSource=new ol.source.Vector({
      projection : 'EPSG:4326', // or 'EPSG:8357'
      url: 'yourExternalFile.geojson',
      format: new ol.format.GeoJSON()
});
var vectorLayer=new ol.layer.Vector({
    title: 'geojson layer',
    source: vectorSource,
    style:new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0],
            anchorOrigin: 'bottom-left',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'yourImage.png'
        }))
    })
});

PS: the examples on Openlayers 3 website are very useful when you combine them