Connecting MapGuide to CesiumJS

transcript

gordon.luckett@arrowgeo.com

Gordon Luckett

What is MapGuide?

GIS Server for Linux or Windows

• Will run as a Windows Service or Linux Daemon

MapGuide Server can connect directly to DATA

Feature Data Objects - FDO

• OSGeo FDO Provider for ArcSDE

• OSGeo FDO Provider for MySQL

• OSGeo FDO Provider for ODBC

• OSGeo FDO Provider for SDF

• OSGeo FDO Provider for SHP

With Autodesk Infrastructure Server:•Autodesk FDO Provider for Oracle

•Autodesk FDO provider for Raster

•Autodesk FDO Provider for GE Smallworld

Third Party

• OSGeo FDO Provider for SHP

• OSGeo FDO Provider for WMS

• OSGeo FDO Provider for WFS

• OSGEO FDO Provider for GDAL

• OSGEO FDO Provider for OGR

• SL-King FDO Provider for Oracle

• OSGEO FDO Provider for SQL Server Spatial

Third Party

•Safe Software FME FDO Providers

What is MapGuide?

Web Layer

Apache Web ServerMicrosoft IIS

What is MapGuide?

Client Browser

Basic AJAX (MapGuide Specific with

Frames)

aka WebLayout

Fusion (Merges MapGuide and OpenLayers)

aka ApplicaitonDefinition

History of MapGuide

1995 Argus Technologies

– Calgary, Alberta, Canada

1996 Autodesk, Inc. Buys Argus

– Continued to be developed in Calgary

History of MapGuide

•2004 Autodesk, Inc. started what became MapGuide Open Source

•2004 Autodesk makes FDO Connector for Oracle, SHP, SDF, ArcSDE

and SQL Server

•2006 MapGuide and FDO code contributed to OSGeo (GNU LGPL)

How do I make a Map?

MapGuide Maestro

• http://trac.osgeo.org/mapguide/wiki/maestro/Downloads

https://www.youtube.com/watch?v=05JiZ5FLgyY&feature=youtu.be

What is Cesium JS?

Cesium?

Yes, it’s an element Cs (55)

• JavaScript library for 3D maps

• WebGL and HTML5

• Founded by

Cesium Time Series

GeoJSON is fine but…

• Cesium Markup Language (CZML) great for 3D!

• Best format for Cesium – even though GeoJSON and TopoJSON

are supported

Example of City Lots CZML

[{"id": "2", "description": " ","polygon": { "outline": { "boolean": true }, "outlineColor": { "rgba": [128,128,128,255] }, "material": {

"solidColor": { "color": { "rgba": [192,192,192,128] } } },"positions": { "cartographicDegrees": [-

122.4104915062,37.808810393158,0,-122.41065235288,37.808835423132,0,-122.41064912354,37.808861817816,0,-

122.41073148091,37.808872879732,0,-122.41073666317,37.808846453406,0,-122.41095443329,37.808880115378,0,-

122.41095279816,37.808892538016,0,-122.41102734272,37.808903727216,0,-122.41103088976,37.808889723516,0,-

122.41124858149,37.808920286056,0,-122.41142370062,37.809118891082,0,-122.41145299896,37.809105294632,0,-

122.41268655799,37.810562195773,0,-122.41148891234,37.811219194443,0,-122.41132303554,37.810939708462,0,-

122.41040188357,37.809312119144,0,-122.4104915062,37.808810393158,0]}}},

{"id": "3", "description": "E","polygon": { "outline": { "boolean": true }, "outlineColor": { "rgba": [128,128,128,255] }, "material": {

"solidColor": { "color": { "rgba": [192,192,192,128] } } },"positions": { "cartographicDegrees": [-

122.39445833552,37.796199748601,0,-122.39480037704,37.796604611313,0,-122.39473603247,37.796641794502,0,-

122.39468122461,37.796581601105,0,-122.39351740747,37.797258483573,0,-122.393550812,37.797293644052,0,-

122.39316869333,37.797508015294,0,-122.39309158519,37.797425958996,0,-122.39346860288,37.797207703685,0,-

122.3934908553,37.797233051549,0,-122.39412696319,37.796863388651,0,-122.39393195174,37.796648933042,0,-

122.39385042967,37.796687923681,0,-122.39374251822,37.796574630945,0,-122.39387787158,37.796503745408,0,-

122.39445833552,37.796199748601,0]}}}]

Cesium “Hello World”

<!DOCTYPE html>

<head>

<title>Hello World!</title>

<style>

@import url(Cesium/Widgets/widgets.css);

#cesiumContainer {position: absolute; top: 0; left: 0;

height: 100%; width: 100%; margin: 0;

overflow: hidden; padding: 0;font-family: sans-serif;}

html {height: 100%;}

body {padding: 0; margin: 0;overflow: hidden; height: 100%;}

</style>

</head>

<body>

var viewer = new Cesium.Viewer('cesiumContainer');

</script>

</body>

</html>

Integration with MapGuide?

How do we get the MapGuide data in CZML?

mapguide-rest project

PUT/GET/POST/DELETE

Adapters:

• XML

• GeoJSON

• PNG

• HTML

• CZML

mapguide-rest calls

Examples:/mapguide/rest/library/San_Francisco/2_LAYERS/city_lots.LayerDefinition/features.html

/mapguide/rest/library/San_Francisco/2_LAYERS/city_lots.LayerDefinition/features.xml

/mapguide/rest/library/San_Francisco/2_LAYERS/city_lots.LayerDefinition/features.geojson

mapguide-rest calls

LEAFLET<link rel=“lots" type="application/json"

href="/mapguide/rest/library/San_Francisco/2_LAYERS/city_lots.LayerDefinition/features.geojson?tr

ansformto=LL84“>

$.getJSON($('link[rel=" lots "]').attr("href"), function(data) {

var geojson = L.geoJson(data, {

onEachFeature: function (feature, layer) {

layer.bindPopup(feature.properties.TO_ST + ' ' +

feature.properties.STREET + ' ' +

feature.properties.ST_TYPE);

CZML from MapGuide into Cesium

var parcelsSource = new Cesium.CzmlDataSource();

viewer.dataSources.add(parcelsSource);

parcelsSource.loadUrl("/mapguide/rest/library/San_Francisco/2_LAYERS/city_lots.LayerDefinition/featur

es.czml?TransformTo=LL84");

viewer.zoomTo(parcelsSource);

CZML from MapGuide into Cesium

But 2D!

Back to MapGuide Maestro!

Code for Buildings

var buildingSource = new Cesium.CzmlDataSource();

viewer.dataSources.add(buildingSource);

buildingSource.loadUrl("/mapguide/rest/library/San_Francisco/2_LAYERS/buil

ding_footprint.LayerDefinition/features.czml?TransformTo=LL84");

viewer.zoomTo(buildingSource);

Anything can be considered “height”

Property values

Review

1. Download and install mapguide server

2. Download and install mapguide maestro on your desktop

3. Put GIS files/database on server

4. Use maestro to make layers

5. Download and put mapguide-rest on your server

6. Download and put Cesium on your server

7. Modify Cesium Hello World with CZML from MapGuide

Some Links

http://mapguide.osgeo.org/

http://trac.osgeo.org/mapguide/wiki/Release/2.6/Notes/

http://trac.osgeo.org/mapguide/wiki/maestro/Downloads/

https://github.com/jumpinjackie/mapguide-rest/

http://cesiumjs.org/2013/04/12/Cesium-up-and-running/

MapGuide Newsgroup

http://osgeo-org.1560.x6.nabble.com/MapGuide-Users-f4182607.html

Thank You!

Connecting MapGuide to CesiumJS

Documents