OpenStreetMap with OpenLayers

http://openlayers.org

by Paolo Favero

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Scale Box</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <form>
      <label for="type">Geometry type &nbsp;</label>
      <select id="type">
        <option value="draw">draw rects</option>
        <option value="modify">modify rects</option>
      </select>
    </form>
    
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/[email protected]/dist/elm-pep.js"></script>
    <script type="module" src="main3.js"></script>
  </body>
</html>

CSS

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

JavaScript

const source = new ol.source.Vector();
const style = new ol.style.Style({
	geometry: function (feature) {
		const modifyGeometry = feature.get('modifyGeometry');
		return modifyGeometry ? modifyGeometry.geometry : feature.getGeometry();
	},
	fill: new ol.style.Fill({
		color: 'rgba(255, 255, 255, 0.6)',
	}),
	stroke: new ol.style.Stroke({
		color: '#ffcc33',
		width: 2,
	})
});

const vector = new ol.layer.Vector({
	source: source,
	style: function (feature) {
		return style;
	},
});

const map = new ol.Map({
	layers: [
		new ol.layer.Tile({
			source: new ol.source.OSM(),
		}), 
		vector
	],
	target: 'map',
	view: new ol.View({
		center: [1800000, 6400000],
		zoom: 5,
	}),
});


// add draw interaction
const draw = new ol.interaction.Draw({
	source: source,
	type: 'Circle',
	geometryFunction: ol.interaction.Draw.createBox()
});
map.addInteraction(draw);

// add modify interaction
const defaultModify = new ol.interaction.Modify({source: source});
const defaultModifyStyle = defaultModify.getOverlay().getStyleFunction();
const modify = new ol.interaction.Modify({
	source: source,
	deleteCondition: ol.events.condition.never,
	insertVertexCondition: ol.events.condition.never,
	style: function (feature) {
		source.getFeatures().forEach(function (modifyFeature) {
			const modifyGeometry = modifyFeature.get('modifyGeometry');
			if (modifyGeometry) {
				const point = feature.getGeometry().getCoordinates();
				console.log(point);
				let modifyPoint = modifyGeometry.point;
				if (!modifyPoint) {
					// save the initial geometry and vertex position
					modifyPoint = point;
					modifyGeometry.point = modifyPoint;
					modifyGeometry.geometry0 = modifyGeometry.geometry;
					// get anchor and minimum radius of vertices to be used
					const result = calculateCenter(modifyGeometry.geometry0);
					modifyGeometry.center = result.center;
					modifyGeometry.deltas = result.deltas;
				}

				const center = modifyGeometry.center;
				const minRadius =...