# 2D/3D Web GIS Development
The goal of Web GIS mainly about how to show GIS data close to the real visualization.

**Types of GIS data:**
* Vector data (points, lines, and polygons)
Individual points stored as coordinate pairs that indicate a physical location in the world
* Raster data (grid data)
Representation of the world as a surface divided up into a regular grid array, or cells, where each of these cells has an associated value

**File Format of GIS data**
* Vector Data (.kml, .shp, etc.)
* Raster Data (.tif, .GeoJPEG, etc.)

GeoJSON

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

WMS and WMTS

GetCapabilities
GetTile
GetFeatureInfo

DEM, DSM, and DTM

Global Positioning System: World Geodetic System (WGS84) /EPSG:4326 => EPSG:3857

**2D Development using Openlayers or Leaflet**
* **Openlayers**
is high performance feture-packed library for all mapping need. Open source Javascript

import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';

new Map({
  layers: [
    new TileLayer({source: new OSM()}),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
  target: 'map',
});

* **Leaflet**
is open-source JavaScript library for mobile-friendly interactive maps.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

**3D Development using CesiumJS**

is an open source JavaScript library for creating world-class 3D globes and maps

const viewer = new Cesium.Viewer("cesiumContainer");

**References**
https://openlayers.org/
https://leafletjs.com/
https://cesium.com/