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",
        width: 5
    })
});

lineFeature.setStyle(lineStyle);



//draw a point

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

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor:[0.5, 1],  
    src: 'http://www.openlayers.org/dev/img/marker.png'
  }))
});

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: 8
    })
});


//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 point = iconFeature.getGeometry();
point.setCoordinates(ol.proj.transform([73.873215, 18.281518], 'EPSG:4326', 'EPSG:3857'));