Maps - open layers

Concept

Maps offers access to visual representation of the location on a map.  This can be used in the platform as well as on mobile application.

Documentation official: Link

Installtion:

https://openlayers.org/download/

1. Create a express server with the following configuration:

npm init

npm i express nodemon

package.json

{
  "name": "openlayers",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1",
    "nodemon": "^2.0.20"
  }
}

touch server.js

//server.js
const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

app.use(express.static('public'));
router.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.use('/', router);
app.listen(3001);

console.log('Running at Port 3001');

2. Create a HTML file

3. Inside project`s folder 

a. create a public folder

b. inside public folder create a js folder with the file: index.js

c. inside public folder create a css folder with the file: style.css

4. The Logic will be in index.js and the style in style.css

Documentation: https://openlayers.org/en/latest/apidoc/

Final folder:

image-1663871980010.png

 

image-1664224974888.png

Orange: Assign

Green: Avaible

Red: not avaible

yellow: not response

purple: selected vendor

grey: not match

white: deactivated

Blue point: open

orange: vendor asingn

Status:

vAvailable, vNoMatch, vNoResponse, vNotAvailable, vInactive

Use of the map

you have to import the map inside an iframe, you can custom the iframe to get a circle or squere map, example:

image-1664485657287.png

Live demo (https://developer.scheduleinterpreter.com/app/map-test)

Functions: 

updateRadius(:meters), example updateRadius(:10018857)

Create a map:

Options

si_maps ={
target: {
		id: "map-canvas",
		height: "110%",
		width: "100%",
		opacity: {
			value: "0.65",
			display: true,
		},
		map_url_source: "https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png",
	},
	popup: {
		display: true,
		popup_container: "si_map-popup",
		popup_content: "si_map-popup-content",
	},	
	events: [],
	center_coords: [],
	zoom: undefined,
	zoom_controls: {
		center: true,
		in_out: true,
	},
}

si_maps is a global variable you can check in the brower console window.si_maps or si_maps

Methods:

init(): will create a mape with the options seted,

Reload(): will rerun the map creation

Example


si_maps.target = {
    "id": "apptVendorRoute",
    "height": "70vh",
    "width": "90vw",
    "opacity": {
        "value": "0.65",
        "display": true
    },
    "map_url_source": "https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"
}
si_maps.events = [
    {
        "eventId": 0,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "99 Walnut St,",
        "city": "Manchester",
        "state": "NH",
        "zip": "3101",
        "label": ["Jennifer Martinez,"],
        "lat": 42.9952709,
        "lon": -71.4564256,
        "startTime": "",
        "markerClass": "homeStyle"
    },
    {
        "eventId": 174213,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "185 Queen City Avenue",
        "city": "Manchester",
        "state": "NH",
        "zip": "3101",
        "label": ["Jennifer Martinez,", "ERE - One Day Surgery & Endoscopy Center"],
        "lat": 42.9743441,
        "lon": -71.4684319,
        "startTime": "7:15 am",
       "markerClass": "pointStyle"
    },
    {
        "eventId": 174214,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "185 Queen City Avenue",
        "city": "Manchester",
        "state": "NH",
        "zip": "3101",
        "label": ["Jennifer Martinez,", "ERE - One Day Surgery & Endoscopy Center"],
        "lat": 42.9743441,
        "lon": -71.4684319,
        "startTime": "7:15 am",
        "markerClass": "pointStyle"
    },
    {
        "eventId": 169235,
        "isRouteDataShow": 1,
        "isSelected": 1,
        "isP2PDataShow": 1,
        "street": "100 Hitchcock Way",
        "city": "Manchester",
        "state": "NH",
        "zip": "3104",
        "label": ["Heart & Vascular Center"],
        "lat": 43.010453,
        "lon": -71.4235355,
        "startTime": "10:45 am",
        "markerClass": "selectedStyle"
    },
    {
        "eventId": 173059,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "2300 Southwood Drive",
        "city": "Nashua",
        "state": "NH",
        "zip": "3060",
        "label": ["Internal Medicine"],
        "lat": 42.7852999,
        "lon": -71.4985233,
        "startTime": "12:50 pm",
       "markerClass": "pointStyle"
    },
    {
        "eventId": 174501,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "17 Prospect Street Suite: 102",
        "city": "Nashua",
        "state": "NH",
        "zip": "3060",
        "label": ["Rehab - 17 Prospect Street"],
        "lat": 42.7563173,
        "lon": -71.4582287,
        "startTime": "3:15 pm",
        "markerClass": "pointStyle"
    },
    {
        "eventId": 174500,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "17 Prospect Street Suite: 102",
        "city": "Nashua",
        "state": "NH",
        "zip": "3060",
        "label": ["Rehab - 17 Prospect Street"],
        "lat": 42.7563173,
        "lon": -71.4582287,
        "startTime": "5:45 pm",
        "markerClass":"pointStyle"
    },
    {
        "eventId": 174219,
        "isRouteDataShow": 1,
        "isSelected": 0,
        "isP2PDataShow": 1,
        "street": "185 Queen City Avenue",
        "city": "Manchester",
        "state": "NH",
        "zip": "3101",
        "label": ["Jennifer Martinez,", "ERE - One Day Surgery & Endoscopy Center"],
        "lat": 42.9743441,
        "lon": -71.4684319,
        "startTime": "7:15 am",
        "markerClass": "pointStyle"
    },
]

si_maps.init()

 

 

 

 

 

 

 

Back to top