---
# System prepended metadata

title: 2D/3D Web GIS Development

---

# 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
![](https://i.imgur.com/FKC7VKD.png)


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/