Snippets Collections
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>OpenStreetMap & OpenLayers - Marker Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
	<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
  
  <script>
    /* OSM & OL example code provided by https://mediarealm.com.au/ */
    var map;
    var mapLat = -33.829357;
		var mapLng = 150.961761;
    var mapDefaultZoom = 10;
    
    function initialize_map() {
      map = new ol.Map({
        target: "map",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                      url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([mapLng, mapLat]),
            zoom: mapDefaultZoom
        })
      });
    }

    function add_map_point(lat, lng) {
      var vectorLayer = new ol.layer.Vector({
        source:new ol.source.Vector({
          features: [new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
            })]
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: "http://vps1.dyndns.info:8051/markers/svg/map-marker-blue.svg"
          })
        })
      });

      map.addLayer(vectorLayer); 
    }


  </script>
</head>
<body onload="initialize_map(); add_map_point(-33.8688, 151.2093);">
  <div id="map" style="width: 100vw; height: 100vh;"></div>
</body>
</html>
curl 'http://router.project-osrm.org/table/v1/driving/13.388860,52.517037;13.397634,52.529407;13.428555,52.523219?annotations=distance,duration'

Response:

{
	"code": "Ok",
	"distances": [
		[0, 1887.3, 3802.9],
		[1903.1, 0, 2845.8],
		[3280.4, 2292.8, 0]
	],
	"durations": [
		[0, 251.5, 384.4],
		[258.1, 0, 363.5],
		[354.7, 301.1, 0]
	],
	"sources": [{
		"hint": "N85xha7OcYUYAAAABQAAAAAAAAAgAAAASjFaQdLNK0AAAAAAsPePQQwAAAADAAAAAAAAABAAAAA_6wAA_kvMAKlYIQM8TMwArVghAwAA7wrV7s3X",
		"distance": 4.231666,
		"location": [13.388798, 52.517033],
		"name": "Friedrichstraße"
	}, {
		"hint": "npYWgHzyeYUGAAAACgAAAAAAAAB2AAAAW7-PQOKcyEAAAAAApq6DQgYAAAAKAAAAAAAAAHYAAAA_6wAAf27MABiJIQOCbswA_4ghAwAAXwXV7s3X",
		"distance": 2.789393,
		"location": [13.397631, 52.529432],
		"name": "Torstraße"
	}, {
		"hint": "oZYWgP___38fAAAAUQAAACYAAAAeAAAAsowKQkpQX0Lx6yZCvsQGQh8AAABRAAAAJgAAAB4AAAA_6wAASufMAOdwIQNL58wA03AhAwMAvxDV7s3X",
		"distance": 2.226595,
		"location": [13.428554, 52.523239],
		"name": "Platz der Vereinten Nationen"
	}],
	"destinations": [{
		"hint": "N85xha7OcYUYAAAABQAAAAAAAAAgAAAASjFaQdLNK0AAAAAAsPePQQwAAAADAAAAAAAAABAAAAA_6wAA_kvMAKlYIQM8TMwArVghAwAA7wrV7s3X",
		"distance": 4.231666,
		"location": [13.388798, 52.517033],
		"name": "Friedrichstraße"
	}, {
		"hint": "npYWgHzyeYUGAAAACgAAAAAAAAB2AAAAW7-PQOKcyEAAAAAApq6DQgYAAAAKAAAAAAAAAHYAAAA_6wAAf27MABiJIQOCbswA_4ghAwAAXwXV7s3X",
		"distance": 2.789393,
		"location": [13.397631, 52.529432],
		"name": "Torstraße"
	}, {
		"hint": "oZYWgP___38fAAAAUQAAACYAAAAeAAAAsowKQkpQX0Lx6yZCvsQGQh8AAABRAAAAJgAAAB4AAAA_6wAASufMAOdwIQNL58wA03AhAwMAvxDV7s3X",
		"distance": 2.226595,
		"location": [13.428554, 52.523239],
		"name": "Platz der Vereinten Nationen"
	}]
}
star

Mon Aug 29 2022 19:26:26 GMT+0000 (Coordinated Universal Time)

#osm #html #javascript
star

Mon Aug 29 2022 19:22:58 GMT+0000 (Coordinated Universal Time)

#osm #osrm #bash

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension