JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<div id="map" class="map"></div>

CSS

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

JavaScript

//draw line
var coordinates = [];
//coordinates[0] = ol.proj.transform([73.77994, 18.55966], 'EPSG:4326', 'EPSG:3857')

//coordinates[1] = ol.proj.transform([73.80095, 18.55471], 'EPSG:4326', 'EPSG:3857')

var lineFeature = new ol.Feature({
    geometry: new ol.geom.LineString(coordinates)
});

var lineStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: "#ff00ff",
       
        
    })
});

lineFeature.setStyle(lineStyle);



//draw a point

var iconFeature = new ol.Feature({
    geometry: new ol.geom.Circle(ol.proj.transform([73.9432, 18.9608], 'EPSG:4326', 'EPSG:3857'), 1500, 'XY'),

});

var iconStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: "#0000ff",
        width: 4
    }),
    fill: new ol.style.Fill({
        color: "#0000ff",
    }),

    text: new ol.style.Text({
        text: "Bus",
        stroke: new ol.style.Stroke({
            color: "#ff0000",
            scale: 4
        })

    })

});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
    features: [iconFeature, lineFeature]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});


var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'osm'
        })
    }), vectorLayer],
    view: new ol.View2D({
        center: ol.proj.transform([73.9432, 18.9608], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10
    })
});


//update line
var line = lineFeature.getGeometry();
line.appendCoordinate(ol.proj.transform([73.9432, 18.9608], 'EPSG:4326', 'EPSG:3857'));

line.appendCoordinate(ol.proj.transform([73.9432, 18.9808], 'EPSG:4326', 'EPSG:3857'));

//move marker
var circle = iconFeature.getGeometry();
circle.setCenter(ol.proj.transform([73.873215, 18.281518], 'EPSG:4326', 'EPSG:3857'));