OpenLayers - GeoJSON

by Lawrence Ross

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

<div class="input">
  <input type="text" id="id-input" placeholder="Click on a marker ...">
</div>
<div id="map" class="map"></div>

CSS

html, body, #map {
  height: 100%;
  overflow: hidden;
}
.input {
  margin: 5px;
}
#id-input{ width: 300px }

JavaScript

var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([ -95.36,29.75]),
      zoom: 10
    })
  });
    var coords = [[-95.36,29.75], [-96.36,30.75]];
    var lineString = new ol.geom.LineString(coords);
    // transform to EPSG:3857
    lineString.transform('EPSG:4326', 'EPSG:3857');

    // create the feature
    var feature = new ol.Feature({
        geometry: lineString,
        name: 'Line'
    });

    var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 10
        })
    });

    var source = new ol.source.Vector({
        features: [feature]
    });
    var vector = new ol.layer.Vector({
        source: source,
        style: [lineStyle]
    });
    map.addLayer(vector);